Next.js Quiz Form Generator

'use client';

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

export default function QuizFormForm() {
  const router = useRouter();
  // State for form data
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    question1: '',
    question2: '',
    question3: '',
  });

  // 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 Your Name
    if (!formData.name) {
      newErrors.name = 'Your Name is required';
      isValid = false;
    }
    
    // Validate Email Address
    if (!formData.email) {
      newErrors.email = 'Email Address is required';
      isValid = false;
    }
    
    // Validate Question 1: What is the capital of France?
    if (!formData.question1) {
      newErrors.question1 = 'Question 1: What is the capital of France? is required';
      isValid = false;
    }
    
    // Validate Question 2: Which planet is closest to the sun?
    if (!formData.question2) {
      newErrors.question2 = 'Question 2: Which planet is closest to the sun? is required';
      isValid = false;
    }
    
    // Validate Question 3: Who painted the Mona Lisa?
    if (!formData.question3) {
      newErrors.question3 = 'Question 3: Who painted the Mona Lisa? 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: 'quiz-form',
          formData,
        }),
      });
      
      if (!response.ok) {
        throw new Error('Form submission failed');
      }
      
      // Reset form on success
      setFormData({
        name: '',
        email: '',
        question1: '',
        question2: '',
        question3: '',
      });
      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">
              Your 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="question1" className="block text-sm font-medium text-gray-700 mb-1">
              Question 1: What is the capital of France? *
            </label>
            <div className="mt-2 space-y-2">
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question1-0"
                  name="question1"
                  value="London"
                  checked={formData.question1 === 'London'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question1-0" className="ml-2 block text-sm text-gray-700">
                  London
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question1-1"
                  name="question1"
                  value="Berlin"
                  checked={formData.question1 === 'Berlin'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question1-1" className="ml-2 block text-sm text-gray-700">
                  Berlin
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question1-2"
                  name="question1"
                  value="Paris"
                  checked={formData.question1 === 'Paris'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question1-2" className="ml-2 block text-sm text-gray-700">
                  Paris
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question1-3"
                  name="question1"
                  value="Madrid"
                  checked={formData.question1 === 'Madrid'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question1-3" className="ml-2 block text-sm text-gray-700">
                  Madrid
                </label>
              </div>
            </div>
            {errors.question1 && (
              <p className="mt-1 text-sm text-red-600">{errors.question1}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="question2" className="block text-sm font-medium text-gray-700 mb-1">
              Question 2: Which planet is closest to the sun? *
            </label>
            <div className="mt-2 space-y-2">
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question2-0"
                  name="question2"
                  value="Earth"
                  checked={formData.question2 === 'Earth'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question2-0" className="ml-2 block text-sm text-gray-700">
                  Earth
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question2-1"
                  name="question2"
                  value="Venus"
                  checked={formData.question2 === 'Venus'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question2-1" className="ml-2 block text-sm text-gray-700">
                  Venus
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question2-2"
                  name="question2"
                  value="Mercury"
                  checked={formData.question2 === 'Mercury'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question2-2" className="ml-2 block text-sm text-gray-700">
                  Mercury
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question2-3"
                  name="question2"
                  value="Mars"
                  checked={formData.question2 === 'Mars'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question2-3" className="ml-2 block text-sm text-gray-700">
                  Mars
                </label>
              </div>
            </div>
            {errors.question2 && (
              <p className="mt-1 text-sm text-red-600">{errors.question2}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="question3" className="block text-sm font-medium text-gray-700 mb-1">
              Question 3: Who painted the Mona Lisa? *
            </label>
            <div className="mt-2 space-y-2">
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question3-0"
                  name="question3"
                  value="Van Gogh"
                  checked={formData.question3 === 'Van Gogh'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question3-0" className="ml-2 block text-sm text-gray-700">
                  Van Gogh
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question3-1"
                  name="question3"
                  value="Picasso"
                  checked={formData.question3 === 'Picasso'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question3-1" className="ml-2 block text-sm text-gray-700">
                  Picasso
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question3-2"
                  name="question3"
                  value="Da Vinci"
                  checked={formData.question3 === 'Da Vinci'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question3-2" className="ml-2 block text-sm text-gray-700">
                  Da Vinci
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="radio"
                  id="question3-3"
                  name="question3"
                  value="Michelangelo"
                  checked={formData.question3 === 'Michelangelo'}
                  onChange={handleChange}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500"
                />
                <label htmlFor="question3-3" className="ml-2 block text-sm text-gray-700">
                  Michelangelo
                </label>
              </div>
            </div>
            {errors.question3 && (
              <p className="mt-1 text-sm text-red-600">{errors.question3}</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' }
    });
  }
}
*/