Using FormBeep in Next.js#

FormBeep works with Next.js applications using either the App Router or Pages Router. Choose the method that best fits your setup.

Option 1: Direct API Call (Recommended)#

The cleanest way to use FormBeep in Next.js is to call the API directly from your form component. This works with both App Router and Pages Router.

App Router (Next.js 13+)#

'use client';

import { useState, FormEvent } from 'react';

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

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('submitting');

    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData.entries());

    try {
      const response = await fetch('https://api.formbeep.com/v1/submit/YOUR_API_KEY', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        setStatus('success');
        e.currentTarget.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      console.error(err);
      setStatus('error');
    }
  }

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

      <button type="submit" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Sending...' : 'Send'}
      </button>

      {status === 'success' && <p>Message sent successfully!</p>}
      {status === 'error' && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Pages Router (Next.js 12 and earlier)#

The same component works in Pages Router. Just import it in your page:

// pages/contact.tsx
import ContactForm from '../components/ContactForm';

export default function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <ContactForm />
    </div>
  );
}

Option 2: Script Tag Method#

If you prefer to use the FormBeep embed script (for automatic honeypot injection), add it to your HTML layout.

App Router#

Add the script to your root layout:

// app/layout.tsx
import { Metadata } from 'next';
import Script from 'next/script';

export const metadata: Metadata = {
  title: 'My App',
};

export default function RootLayout({
  children,
}: {
  children: React.Node;
}) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          src="https://api.formbeep.com/v1/s/formbeep.js"
          data-api-key="fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Pages Router#

Add the script to your _document.tsx:

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />

        <Script
          src="https://api.formbeep.com/v1/s/formbeep.js"
          data-api-key="fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
          strategy="lazyOnload"
        />
      </body>
    </Html>
  );
}

Then use a regular HTML form in any component:

export default function ContactForm() {
  return (
    <form>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Submit</button>
    </form>
  );
}

Allowed Domains#

Add your Next.js deployment domain to the FormBeep Dashboard:

✔ localhost (for local development) ✔ example.com (production domain) ✔ yourapp.vercel.app (Vercel deployment)

Advantages of the API Method#

Full control over component state and UI
Better TypeScript support
No external script dependency
Easier to test and debug
Works seamlessly with Next.js’s server/client boundary

Troubleshooting#

Forms not sending notifications?

Ensure your domain is added to Allowed Domains in FormBeep Dashboard
Check browser console for errors
Verify API key is correct
For script method: Ensure script loads (check Network tab in DevTools)

Need help? If you encounter any issues or have questions about this guide, reach out at hello@formbeep.com or message @rishikeshs on Discord.