Next.js Newsletter Signup Form Generator

'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function NewsletterSignupFormForm() {
  const router = useRouter();
  // State for form data
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    interests: [],
    consent: '',
  });

  // State for errors and submission status
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  // Handle input changes
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target as HTMLInputElement;
    const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : undefined;
    
    if (type === 'checkbox') {
      // Handle checkboxes differently based on multiple or single
      if (name === 'consent' || name === 'terms' || name === 'remember') {
        setFormData({
          ...formData,
          [name]: checked ? 'Yes' : ''
        });
      } else {
        // For multiple checkbox options
        if (checked) {
          setFormData({
            ...formData,
            [name]: [...(formData[name] as string[]), value]
          });
        } else {
          setFormData({
            ...formData,
            [name]: (formData[name] as string[]).filter(item => item !== value)
          });
        }
      }
    } else {
      setFormData({
        ...formData,
        [name]: value
      });
    }

    // Clear errors on change
    if (errors[name]) {
      setErrors({
        ...errors,
        [name]: ''
      });
    }
  };

  // Validate form
  const validateForm = () => {
    const newErrors: Record<string, string> = {};
    let isValid = true;
    
    // Validate Email Address
    if (!formData.email) {
      newErrors.email = 'Email Address is required';
      isValid = false;
    }
    
    // Validate I agree to receive newsletters
    if (!formData.consent) {
      newErrors.consent = 'I agree to receive newsletters is required';
      isValid = false;
    }
    
    // Validate email format
    const emailFields = ['email', 'userEmail', 'contactEmail'].filter(field => formData[field]);
    emailFields.forEach(field => {
      const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
      if (formData[field] && !emailRegex.test(formData[field] as string)) {
        newErrors[field] = 'Please enter a valid email address';
        isValid = false;
      }
    });
    
    setErrors(newErrors);
    return isValid;
  };

  // Handle form submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }
    
    setIsSubmitting(true);
    
    try {
      // Call the API route to handle form submission
      const response = await fetch('/api/forms/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          formName: 'newsletter-signup-form',
          formData,
        }),
      });
      
      if (!response.ok) {
        throw new Error('Form submission failed');
      }
      
      // Reset form on success
      setFormData({
        name: '',
        email: '',
        interests: [],
        consent: '',
      });
      setSubmitSuccess(true);
      
      // Optionally redirect or show success message
      // router.push('/thank-you');
    } catch (error) {
      console.error('Error submitting form:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="max-w-md mx-auto">
      {submitSuccess ? (
        <div className="bg-green-50 border border-green-200 text-green-800 rounded-md p-4 mb-6">
          <p className="font-medium">Thank you for your submission!</p>
          <p className="text-sm mt-1">We have received your information and will be in touch soon.</p>
          <button
            className="mt-4 text-green-700 underline text-sm"
            onClick={() => setSubmitSuccess(false)}
          >
            Submit another response
          </button>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="form-group">
            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
              First Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.name ? 'border-red-500' : ''}`}
            />
            {errors.name && (
              <p className="mt-1 text-sm text-red-600">{errors.name}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
              Email Address *
            </label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.email ? 'border-red-500' : ''}`}
            />
            {errors.email && (
              <p className="mt-1 text-sm text-red-600">{errors.email}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="interests" className="block text-sm font-medium text-gray-700 mb-1">
              Interests
            </label>
            <div className="mt-2 space-y-2">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="interests-0"
                  name="interests"
                  value="News"
                  checked={(formData.interests as string[])?.includes('News')}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="interests-0" className="ml-2 block text-sm text-gray-700">
                  News
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="interests-1"
                  name="interests"
                  value="Updates"
                  checked={(formData.interests as string[])?.includes('Updates')}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="interests-1" className="ml-2 block text-sm text-gray-700">
                  Updates
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="interests-2"
                  name="interests"
                  value="Promotions"
                  checked={(formData.interests as string[])?.includes('Promotions')}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="interests-2" className="ml-2 block text-sm text-gray-700">
                  Promotions
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="interests-3"
                  name="interests"
                  value="Events"
                  checked={(formData.interests as string[])?.includes('Events')}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="interests-3" className="ml-2 block text-sm text-gray-700">
                  Events
                </label>
              </div>
            </div>
            {errors.interests && (
              <p className="mt-1 text-sm text-red-600">{errors.interests}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="consent" className="block text-sm font-medium text-gray-700 mb-1">
              I agree to receive newsletters *
            </label>
            <div className="mt-2 space-y-2">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="consent-0"
                  name="consent"
                  value="Yes"
                  checked={(formData.consent as string[])?.includes('Yes')}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="consent-0" className="ml-2 block text-sm text-gray-700">
                  Yes
                </label>
              </div>
            </div>
            {errors.consent && (
              <p className="mt-1 text-sm text-red-600">{errors.consent}</p>
            )}
          </div>
          <div className="form-group pt-4">
            <button
              type="submit"
              disabled={isSubmitting}
              className="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
            >
              {isSubmitting ? 'Submitting...' : 'Submit'}
            </button>
          </div>
        </form>
      )}
    </div>
  );
}

/*
// Example API route for Next.js
// Save this in /app/api/forms/submit/route.ts

export async function POST(request: Request) {
  try {
    const data = await request.json();
    const { formName, formData } = data;
    
    // Here you would typically:
    // 1. Validate the data
    // 2. Save to database or send to an external service
    // 3. Send confirmation emails, etc.
    
    console.log('Form submission received:', { formName, formData });
    
    // Example integration with an external service like ParrotForms
    // You can use your actual API endpoint from ParrotForms here
    // const response = await fetch('https://api.parrotforms.com/v1/submissions', {
    //   method: 'POST',
    //   headers: {
    //     'Content-Type': 'application/json',
    //     'Authorization': 'Bearer YOUR_PARROTFORMS_API_KEY'
    //   },
    //   body: JSON.stringify({ formName, formData }),
    // });
    
    // Return a success response
    return new Response(JSON.stringify({ success: true }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (error) {
    console.error('Error processing form submission:', error);
    return new Response(JSON.stringify({ success: false, message: 'Failed to process form submission' }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' }
    });
  }
}
*/