Innovative Contact Form Solutions with Next.js

Contact forms are a crucial element for any website aiming to facilitate communication between users and businesses. With the rise of modern web technologies, building efficient and stylish contact forms has never been easier. In this article, we will explore how to implement an innovative contact form solution using Next.js, an open-source React framework for building web applications.

Why Next.js?

Next.js simplifies the process of building dynamic applications. It comes with features like server-side rendering, static site generation, and API routes, making it an excellent choice for building robust contact forms that can handle both client-side and server-side logic.

Setting Up a Basic Contact Form

To get started, let’s create a simple contact form using Next.js.

Get @rnab’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

First, ensure you have Node.js and npm installed on your machine. You can create a Next.js app by running:

npx create-next-app contact-form-example
cd contact-form-example

Next, create a components directory and add a new file ContactForm.tsx.

import { useState, FormEvent } from 'react';

const ContactForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    console.log(`Submitting: Name - ${name}, Email - ${email}, Message - ${message}`);
    // Here you would typically handle form submission, such as sending data to an API.
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <label>
        Message:
        <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ContactForm;

In this component, we utilize React’s useState hook to manage form state. The handleSubmit function handles the form submission, where you can integrate API calls to send form data to your server.

Advanced Features with Next.js

Next.js API routes allow you to build backend logic directly within your application. Let’s create an API route to process our form data.

Creating an API Route

Create a directory called pages/api and add a file named contact.ts:

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;
    // Here, you would include logic to send an email, store in a database, etc.
    console.log(`Received contact form submission: ${name}, ${email}, ${message}`);
    res.status(200).json({ status: 'success' });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

The above code outlines a simple API endpoint that accepts POST requests, processes form data, and sends a response. You can extend this to integrate third-party services or databases.

Connecting the Form to the API

Update the ContactForm.tsx component to connect to this API endpoint:

// Existing imports and component code

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  const response = await fetch('/api/contact', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, email, message }),
  });

  const result = await response.json();
  console.log('Form submission result:', result);
};

// Rest of the component code

With these adjustments, submitting the form will send data to your custom API route to be processed accordingly.

Conclusion

Building a contact form in Next.js leverages its powerful features, enabling seamless integration of client-side and server-side functionalities. This setup offers flexibility, allowing developers to scale and customize their contact forms based on the application’s requirements.

Whether you’re new to Next.js or looking to refine your contact form solution, this guide should provide a solid foundation to start innovating with your web forms.