Create a Contact Form with Next.js Server Actions

Not recommended as of 2025. Use the client side method instead.

Web3Forms is a popular choice among developers to create a working contact form for their websites. This is an example of how to create a contact form with Next.js Server Actions and Web3Forms. But it is not recommended for most of our users. We suggest you to use the client side method. This is only for Paid Plan users.

⚠️ Important Notice: ⚠️

When using Next.js Server Actions with Web3Forms, you need a paid plan and you must add your server IP address to the safelist. Otherwise, your requests might return a 403 rate limit error. Contact support with your server IP addresses.

What is Next.js Server Actions?

Next.js Server Actions is a new feature that allows you to create async functions that are executed on the server. It's a great way to handle form submissions, API calls, and other server-side logic like data mutations.

Setting up the contact form

First, you need to setup the contact form in your Next.js Project as usual. Here's an example code:

// app/contact/page.tsx
export default function Contact() {
  return (
    <div>
      <form action={}>
        <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"/>
        <input type="text" name="name" required/>
        <input type="email" name="email" required/>
        <textarea name="message" required></textarea>
        <button type="submit">Submit Form</button>
      </form>
      <span>{result}</span>
    </div>
  );
}

Now we have a basic contact form code ready, let's connect this with server actions.

Next.js Server Action

You can create this server action as a separate page or even as a separate component. Here's how the code looks like:

// ../components/actions.ts
"use server";

export async function submitForm(prevState: any, formData: FormData) {

   try {
      const response = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      body: formData
    });

   const data = await response.json();
   return data;

  } catch (e) {
    throw new Error('Failed to create task')
  }

}

Now, modify our original code to inlcude the server action:

// app/contact/page.tsx
"use client";

import { useFormState } from "react-dom";
import { submitForm } from '../components/actions';

export default function Contact() {
  const [result, formAction] = useFormState(submitForm, null);

  return (
    <div>
      <form action={formAction}>
        <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"/>
        <input type="text" name="name" required/>
        <input type="email" name="email" required/>
        <textarea name="message" required></textarea>

        <button type="submit">Submit Form</button>

      </form>
      <span>{result?.message}</span>

    </div>
  );
}

Done!

Woohoo, we did it. We just made a working contact form using Next.js Server Actions and Web3Forms Contact form API. Isn't it easy?

New to Web3Forms?

If you are new to web3forms, make sure you create your own access key from Web3Forms and replace the YOUR_ACCESS_KEY_HERE with your own access key.