Introduction to Contact Forms

Contact forms are a common feature on websites, allowing visitors to send messages, inquiries, or feedback to website owners or administrators. In this tutorial, we'll explore how to create a contact form in a Next.js application, enabling users to submit messages and information through a web form.


Creating the Contact Form

Let's start by creating a basic contact form with fields for name, email, subject, and message:


    // components/ContactForm.js
    import { useState } from 'react';
    function ContactForm() {
        const [formData, setFormData] = useState({
            name: '',
            email: '',
            subject: '',
            message: '',
        });
        const handleChange = (e) => {
            const { name, value } = e.target;
            setFormData({
                ...formData,
                [name]: value,
            });
        };
        const handleSubmit = (e) => {
            e.preventDefault();
            // Handle form submission, e.g., send data to a server.
        };
        return (
            <form onSubmit={handleSubmit}>
                <div>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" value={formData.name} onChange={handleChange} required />
                </div>
                <div>
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" value={formData.email} onChange={handleChange} required />
                </div>
                <div>
<label htmlFor="subject">Subject:</label>
<input type="text" id="subject" name="subject" value={formData.subject} onChange={handleChange} required />
                </div>
                <div>
<label htmlFor="message">Message:</label>
<textarea id="message" name="message" value={formData.message} onChange={handleChange} required />
                </div>
                <button type="submit">Submit</button>
            </form>
        );
    }
    export default ContactForm;

In this code, we create a controlled form component using React state to manage form data. We handle form submission with the `handleSubmit` function, which can be customized to send the data to a server or perform other actions.


Styling the Contact Form

To make your contact form visually appealing, you can style it with CSS or a CSS framework of your choice. Here's a basic example of adding some CSS to style the form:


    /* styles/ContactForm.module.css */
    .container {
        max-width: 400px;
        margin: 0 auto;
    }
    form {
        display: flex;
        flex-direction: column;
    }
    label {
        font-weight: bold;
    }
    input, textarea {
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }

Don't forget to import the CSS file in your component to apply these styles.