Boosterpack Forms
Back to Documentation

Add a Contact Form to Next.js

Use the official @boosterpack/react-form package for a fully typed React integration. Handles Proof-of-Work, spam protection fields, and submission — all in one hook or component.

AI spam protection
No CAPTCHA
Free plan available

Setup Guide

Takes about 2 minutes

1
Create your form on Boosterpack Forms

Sign in to your account dashboard and create a new form. Add your destination email(s) and optionally connect webhook integrations (Slack, Discord, etc.). Then copy your form ID.

2
Install the React package

Run npm i @boosterpack/react-form in your project. No embed script needed — the package handles everything.

3
Add the form component

Use the <BoosterpackForm> component or the useBoosterpackForm hook in a Client Component. See the code snippets below.

For App Router, make sure your form component has 'use client' at the top since it uses hooks.

4
Deploy and activate

Deploy your site. When you visit the page with your form, you'll see an overlay with an Activate form button. Click it to activate the domain. Submissions flow once at least one recipient has confirmed (from Step 1) and the domain is activated.

Code to Copy

Get your form ID from your account dashboard.

Form HTML
Replace <FORM_ID> with your actual form ID
<form method="POST" action="https://boosterpackforms.com/api/forms/<FORM_ID>/submit">
  <input name="name" placeholder="Name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>
Since Next.js uses React, you can use the official React package instead of the embed script:
Install
npm i @boosterpack/react-form
Component
'use client'

import { BoosterpackForm } from '@boosterpack/react-form'

export function ContactForm() {
  return (
    <BoosterpackForm formId='<FORM_ID>'>
      {({ status, error }) => (
        <>
          <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 === 'sending'}>
            {status === 'sending' ? 'Sending…' : 'Send'}
          </button>
          {status === 'success' && <p>Sent!</p>}
          {status === 'error' && error && <p>{error}</p>}
        </>
      )}
    </BoosterpackForm>
  )
}

TypeScript: The package ships with full TypeScript types. The useBoosterpackForm hook returns typed status, error, and form ref — no type assertions needed.

Activating Your Domain

When you create a form, each recipient receives a confirmation email right away — they must confirm before receiving submissions.

When you load a page with your form on a domain that hasn't been activated yet, you'll see an overlay with an Activate form button. Click it to activate the domain. The form goes live once at least one recipient has confirmed and the domain is activated. This only happens once per domain.

What's Included

AI-powered spam filtering
Blocks spam before it reaches your inbox
Invisible Proof-of-Work
No CAPTCHA, no puzzles for your visitors
Multiple recipients
Up to 5 on Personal, up to 10 on Professional+
Webhook integrations
Slack, Discord, Teams, Google Chat, Telegram, or custom
No data stored
Messages are delivered and discarded
Free plan available
100 delivered/mo — spam never counts
Create your form now

Free plan · No credit card required

Full documentation →