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:
<pre>
// 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;
</pre>
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:
<pre>
/* 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;
}
</pre>
Don't forget to import the CSS file in your component to apply these styles.