Next.js Contact Form API

EasyFormAPI works with Next.js App Router and Pages Router. No backend API route, no nodemailer, no email service configuration — just fetch() to our endpoint from a Client Component or Server Action.

App Router — Client Component

'use client';
import { useState } from 'react';

export default function ContactForm() {
  const [sent, setSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    await fetch('https://api.easyformapi.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ access_key: process.env.NEXT_PUBLIC_EASYFORMAPI_KEY, ...data }),
    });
    setSent(true);
  }

  if (sent) return <p>Thanks! We\'ll be in touch.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name"    required placeholder="Name" />
      <input name="email"   required placeholder="Email" type="email" />
      <textarea name="message" required placeholder="Message" />
      <button type="submit">Send</button>
    </form>
  );
}

App Router — Server Action

// app/contact/actions.ts
'use server';

export async function submitContact(formData: FormData) {
  const res = await fetch('https://api.easyformapi.com/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      access_key: process.env.EASYFORMAPI_KEY,
      name: formData.get('name'),
      email: formData.get('email'),
      message: formData.get('message'),
    }),
  });
  if (!res.ok) throw new Error('Submission failed');
}