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

📌 Note: This article was originally published on ContactFormX Blog with better formatting and interactive code examples.

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.

npm run dev

Visit http://localhost:3000 and try submitting your 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
• Spam protection - Built-in rate limiting and honeypot fields

Pricing

FormX offers a generous free tier:

• Free Plan: 1 form, 50 submissions/month
• Pro Plan: $5/month for unlimited forms and 2,000 submissions
• Plus Plan: $50/year (save $10) with all Pro features

Perfect for personal projects, portfolios, and small business sites!

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.

---

Try FormX Today

🚀 Get started for free: contactformx.com/sign-up

📖 Read more tutorials: contactformx.com/blog

💬 Follow for more web dev tips!

---

This article was originally published on ContactFormX Blog with interactive code examples and better formatting.