Create a Contact Form with Next.js Server Actions

Web3Forms is a popular choice among developers to create a working contact form for their websites. With the latest release of Next.js Server Actions, it's now easier to create a contact form with Web3Forms. Here's how to do it.

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.