How to Add a Contact Form to Your Next.js Site in 5 Minutes

Adding a contact form to your Next.js site doesn't have to be complicated. In this tutorial, you'll learn how to integrate a fully functional contact form in just 5 minutes using FormX.

Why Use a Form Backend Service?

When building static sites or JAMstack applications with Next.js, you often don't want to set up a full backend just to handle form submissions. That's where form backend services like FormX come in handy:

No backend code required - Focus on your frontend
Instant email notifications - Get notified when someone submits
Spam protection built-in - Keep bots away
Easy integration - Works with any framework

Step 1: Create Your Form

First, sign up for a free FormX account at contactformx.com. Once logged in, create a new form and copy your form ID.

Step 2: Add the Form to Your Next.js Component

Create a new component for your contact form. Here's a complete example using Next.js 14+ with Server Actions:

'use client';

import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('loading');

    const formData = new FormData(e.currentTarget);

    try {
      const response = await fetch('https://apif.contactformx.com/f/YOUR_FORM_ID', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        setStatus('success');
        setMessage('Thank you! Your message has been sent.');
        e.currentTarget.reset();
      } else {
        setStatus('error');
        setMessage('Something went wrong. Please try again.');
      }
    } catch (error) {
      setStatus('error');
      setMessage('Network error. Please check your connection.');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-md mx-auto space-y-4">
      <div>
        <label htmlFor="name" className="block text-sm font-medium mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          required
          className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div>
        <label htmlFor="email" className="block text-sm font-medium mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div>
        <label htmlFor="message" className="block text-sm font-medium mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows={4}
          required
          className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <button
        type="submit"
        disabled={status === 'loading'}
        className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 disabled:opacity-50"
      >
        {status === 'loading' ? 'Sending...' : 'Send Message'}
      </button>

      {message && (
        <p className={`text-center ${status === 'success' ? 'text-green-600' : 'text-red-600'}`}>
          {message}
        </p>
      )}
    </form>
  );
}

Step 3: Replace YOUR_FORM_ID

Don't forget to replace YOUR_FORM_ID with the actual form ID you copied from your FormX dashboard.

Step 4: Test Your Form

That's it! Run your Next.js development server and test the form. You should receive an email notification when someone submits the form.

Advanced Features

FormX offers several advanced features you can enable:

Custom redirect URLs - Redirect users after submission (Pro plan)
Email customization - Customize notification emails (Pro plan)
Webhook integration - Send data to other services
File uploads - Accept file attachments

Conclusion

Adding a contact form to your Next.js site is incredibly simple with FormX. No backend setup, no database configuration, just copy and paste the code. The free plan is perfect for personal projects and small sites.

Ready to get started? Create your free account and add your first form in minutes.