Introduction
Creating a responsive contact page is a fundamental part of any web application. It's the bridge between you and your users, enabling them to reach out for inquiries, support, or feedback. In this tutorial, we'll guide you through the process of building a sleek, responsive contact page in a Next.js application using EmailJS for form submission. By the end of this article, you'll have a functional contact form that sends emails directly to your inbox.
Why Use EmailJS?
EmailJS is a popular service that allows you to send emails directly from JavaScript without the need for a backend. It’s simple to set up and perfect for projects where you want to handle form submissions without building an entire server-side infrastructure. With EmailJS, you can send emails using various email services like Gmail, Yahoo, Outlook, and others, directly from your front-end code.
Step 1: Setting Up Your Next.js Project
If you haven't already set up a Next.js project, you can do so with the following commands:
npx create-next-app@latest my-contact-page
cd my-contact-page
npm install
Step 2: Install EmailJS
Next, install the latest version of the EmailJS package:
npm install --save @emailjs/browser
Step 3: Configure EmailJS in siteConfig.js
To keep your configuration organized, store your EmailJS credentials in a configuration file. Here's how to do it:
// src/config/siteConfig.js
const siteConfig = {
emailJsConfig: {
serviceId: "your_service_id",
templateId: "your_template_id",
userId: "your_user_id",
},
// other configurations...
};
export default siteConfig;
Step 4: Create the Contact Form Component
Now, let’s build the contact form. We'll create a two-column layout using Flexbox, ensuring it’s responsive and integrates smoothly with EmailJS.
// src/components/ContactPage.js
"use client";
import { useState } from "react";
import emailjs from "@emailjs/browser";
import siteConfig from "@/config/siteConfig";
export default function ContactPage() {
const [formData, setFormData] = useState({ name: "", email: "", message: "" });
const [isSubmitted, setIsSubmitted] = useState(false);
const [error, setError] = useState(false);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
emailjs.send(
siteConfig.emailJsConfig.serviceId,
siteConfig.emailJsConfig.templateId,
formData,
siteConfig.emailJsConfig.userId
)
.then((response) => {
setIsSubmitted(true);
setError(false);
setFormData({ name: "", email: "", message: "" });
})
.catch((error) => {
setError(true);
});
};
return (
<div className="container mx-auto p-4 mt-5 md:mt-12 max-w-6xl m-auto">
{/* Page Title */}
<h1 className="text-4xl font-bold text-center mb-12 border-b-4 border-teal-500 inline-block pb-2">
Get in Touch
</h1>
{/* Two-Column Layout */}
<div className="flex flex-col lg:flex-row">
{/* Left Column: Contact Information */}
<div className="lg:w-1/3 mb-6 lg:mb-0">
<h2 className="text-2xl font-semibold">Contact Information</h2>
<p>Email: [email protected]</p>
<p>Phone: (0044) 07XXX-XXXXXX</p>
<p>For any kind of assistance regarding tech, please knock me.</p>
</div>
{/* Right Column: Contact Form */}
<div className="lg:w-2/3">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
<input
type="text"
name="name"
id="name"
value={formData.name}
onChange={handleChange}
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
name="email"
id="email"
value={formData.email}
onChange={handleChange}
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</label>
<textarea
name="message"
id="message"
value={formData.message}
onChange={handleChange}
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500"
/>
</div>
<button
type="submit"
className="w-full bg-teal-500 text-white py-2 px-4 rounded-md shadow-sm hover:bg-teal-600 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
>
Send Message
</button>
{isSubmitted && <p className="text-green-500 mt-3">Thank you! Your message has been sent.</p>}
{error && <p className="text-red-500 mt-3">Oops! Something went wrong. Please try again.</p>}
</form>
</div>
</div>
</div>
);
}
Step 5: Styling the Page
We've ensured that the layout is responsive, with Flexbox used to handle the alignment and spacing. The form fields are styled to be consistent with the rest of the site’s design, providing a smooth user experience.
Conclusion
And that's it! You now have a fully functional, responsive contact page in your Next.js application, integrated with EmailJS for seamless email handling. This setup is simple yet effective for any personal or business website where user communication is key.
Happy coding!