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 } =;
[name]: value,
const handleSubmit = (e) => {
// Handle form submission, e.g., send data to a server.
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" value={} onChange={handleChange} required />
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" value={} onChange={handleChange} required />
<label htmlFor="subject">Subject:</label>
<input type="text" id="subject" name="subject" value={formData.subject} onChange={handleChange} required />
<label htmlFor="message">Message:</label>
<textarea id="message" name="message" value={formData.message} onChange={handleChange} required />
<button type="submit">Submit</button>
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.