This `Contact` component, written in React, creates a contact form...

August 25, 2025 at 11:43 AM

import React, { useState } from 'react';
import { MapPin, Phone, Mail, Clock, Send, CheckCircle } from 'lucide-react';
import Map from '../components/Map';

const Contact = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    service: '',
    preferred_date: '', // Changed from 'date' to match formsubmit template
    message: '',
    website: '' // Honeypot field
  });
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Create FormData object for direct submission
    const form = e.target as HTMLFormElement;
    const formData = new FormData(form);
    
    // Submit to formsubmit.co
    fetch('https://formsubmit.co/YOUR_EMAIL', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        setIsSubmitted(true);
        // Reset form after 3 seconds
        setTimeout(() => {
          setIsSubmitted(false);
          setFormData({
            name: '',
            email: '',
            phone: '',
            service: '',
            preferred_date: '',
            message: '',
            website: ''
          });
        }, 3000);
      }
    })
    .catch(error => {
      console.error('Error submitting form:', error);
    });
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  // ... rest of your component code remains the same until the form section ...

  return (
    <div>
      {/* Hero Section and Contact Information sections remain unchanged */}
      
      {/* Contact Form and Map */}
      <section className="py-20 bg-gradient-to-br from-gray-50 to-orange-50">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* Contact Form */}
            <div className="bg-white p-8 rounded-xl shadow-lg">
              <h3 className="text-3xl font-bold text-gray-800 mb-6">Book Your Consultation</h3>
              
              {isSubmitted ? (
                <div className="text-center py-8">
                  <CheckCircle className="mx-auto text-green-500 mb-4" size={64} />
                  <h4 className="text-2xl font-bold text-green-600 mb-2">Thank You!</h4>
                  <p className="text-gray-600">Your message has been sent successfully. We'll contact you within 2 hours.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="name" className="block text-gray-700 font-medium mb-2">Full Name *</label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                        placeholder="Enter your full name"
                      />
                    </div>
                    <div>
                      <label htmlFor="phone" className="block text-gray-700 font-medium mb-2">Phone Number *</label>
                      <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                        placeholder="+91 99746 49458"
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="email" className="block text-gray-700 font-medium mb-2">Email Address *</label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      placeholder="your.email@example.com"
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="service" className="block text-gray-700 font-medium mb-2">Service Required *</label>
                      <input
                        type="text"
                        id="service"
                        name="service"
                        value={formData.service}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                        placeholder="Enter the service you require"
                      />
                    </div>
                    <div>
                      <label htmlFor="preferred_date" className="block text-gray-700 font-medium mb-2">Preferred Date</label>
                      <input
                        type="date"
                        id="preferred_date"
                        name="preferred_date"
                        value={formData.preferred_date}
                        onChange={handleChange}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="message" className="block text-gray-700 font-medium mb-2">Additional Requirements *</label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      rows={4}
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      placeholder="Tell us about your specific requirements, number of family members, any special needs, etc."
                    ></textarea>
                  </div>

                  {/* FormSubmit Hidden Fields */}
                  <input type="hidden" name="_subject" value="New service inquiry from Matru Tarpan website" />
                  <input type="hidden" name="_template" value="table" />
                  <input type="hidden" name="_next" value="https://yourdomain.com/thank-you" />
                  <input type="hidden" name="_captcha" value="true" />
                  <input type="hidden" name="_autoresponse" value="Thanks! We received your request and will contact you within 2 hours." />
                  
                  {/* Honeypot field */}
                  <input 
                    type="text" 
                    name="website" 
                    value={formData.website}
                    onChange={handleChange}
                    style={{display: 'none'}} 
                    tabIndex={-1} 
                    autoComplete="off" 
                  />

                  <button
                    type="submit"
                    className="w-full bg-gradient-to-r from-orange-600 to-red-600 text-white py-4 rounded-lg font-semibold text-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center"
                  >
                    Send Message
                    <Send className="ml-2" size={20} />
                  </button>
                </form>
              )}
            </div>

            {/* Map and Additional Info section remains unchanged */}
          </div>
        </div>
      </section>
    </div>
  );
};

This Contact component, written in React, creates a contact form to collect user information and submit it to a specified endpoint (via formsubmit.co). Here’s a breakdown of what the component does:

1. Imports

React, { useState }: React is imported along with the useState hook for managing component state.
Icons from lucide-react: These are used for UI elements like a pin, phone, etc.
Map: A custom component, presumably used to display a geographic map.

2. State Management

The component uses two useState hooks:

formData: Tracks the state of the user-entered form values (e.g., name, email, message).
isSubmitted: Tracks whether the form has been successfully submitted (to display a thank-you message).

3. Form Input Handling

handleChange: Updates the formData state object whenever a user types into an input field or textarea. This makes the form controlled.
handleSubmit: Executes when the form is submitted. It:
- Prevents the default browser form submission behavior.
- Posts the form data to https://formsubmit.co/YOUR_EMAIL using a fetch request.
- If successful, sets isSubmitted to true and resets the form after 3 seconds.
- If an error occurs, logs it to the console.

4. Honeypot & Hidden Fields

Includes a hidden field website as a honeypot. (Spam bots often fill this, while humans don’t see it.)
Hidden fields with _subject, _template, _next, _captcha, and _autoresponse are added for formsubmit.co customization (e.g., confirmation page, email template, autoresponder).

5. Rendering Logic

If isSubmitted is true: Displays a thank-you message with a green checkmark and status text.
Otherwise, renders the contact form with various inputs for fields like name, phone, email, service required, preferred date, and additional message.

6. Form Fields

Included form fields:
- Name, Email, Phone: Required fields for user contact details.
- Service, Preferred Date: Helps gather specific details about the requested consultation or service.
- Message: Free-form text for additional user requirements.
Submit Button: Has a gradient style and includes a Send icon from lucide-react.

7. Styling

Uses Tailwind CSS classes extensively for consistent styling (e.g., margins, padding, font sizes, colors, and hover effects).
Grid layout (grid-cols-1, grid-cols-2) is used for responsive design.

8. Map and Additional Information

Likely includes a Map component and additional sections in the returned JSX, though these are omitted in your provided code explanation.

Summary:

This component provides a functional and styled contact form that:

Validates basic inputs.
Uses a third-party service (formsubmit.co) to handle form submission.
Protects against spam using a honeypot field.
Offers a user-friendly interface, including success feedback when the form is submitted.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr