Contact Form with Neon Database Integration

env NEON_CONNECTION_STRING This document explains how to use the contact form component with Neon database integration.

Overview

The contact form implementation uses the Neon serverless PostgreSQL database to store form submissions. This approach provides:

• Serverless architecture compatible with edge functions
• Efficient data storage and retrieval
• Structured data with proper indexing

Components available

1. API Endpoint: /api/contact-serverless.ts - Handles form submissions and stores data in Neon
2. Database Connection: src/utils/db/neon-serverless.ts - Provides connection to Neon database
3. React Component: src/components/ContactForm.jsx - Reusable contact form component
4. Database Schema: src/utils/db/schema.sql - Includes the contact_submissions table definition

Usage

Basic Implementation

import ContactForm from '../components/ContactForm';

export default function ContactPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-3xl font-bold mb-6">Contact Us</h1>
      <ContactForm />
    </div>
  );
}

With Custom Type

You can specify the type of contact form:

<ContactForm type="speaking" />

Available types:

• general (default)
• speaking
• media

Database Schema

The contact_submissions table has the following structure:

CREATE TABLE contact_submissions (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  organization TEXT NOT NULL,
  message TEXT NOT NULL,
  type TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  status TEXT DEFAULT 'new',
  additional_data JSONB,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Setup Instructions

1. Ensure your Neon database connection string is set in your environment variables:

   NEON_CONNECTION_STRING=postgres://user:password@endpoint.neon.tech/neondb

2. Run the setup script to create the necessary table:

   node scripts/db/setup-contact-table.js

3. Import and use the ContactForm component in your pages.

Customization

You can customize the form by modifying the ContactForm.jsx component. The component is designed to be flexible and can be extended with additional fields as needed.