Contact form for Next.js

A contact form for Next.js

Q: Can I send submissions to Slack or Discord too?

Yes. Add a webhook on Professional or Business. Slack, Discord, Teams, Google Chat, and Telegram are native.

Use @boosterpack/react-form. It handles the silent spam checks and the submit. No extra script tag.

No CAPTCHA

AI spam protection

Free plan

Next.js docs↗

How to add it

Create the form, paste it into Next.js, click activate once.

Create the form

Install the package

Run npm i @boosterpack/react-form. That replaces the embed script.

Render the form

Use <BoosterpackForm> or useBoosterpackForm in a Client Component.

App Router: add 'use client' at the top of the form file.

Deploy and activate

Open the live page, click Activate form, and confirm from your inbox.

Copy this

Copy your form ID from the dashboard, then drop this in.

Form HTML

Replace <FORM_ID> with your 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>

Next.js is React, so you can skip the script and use the official package.

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 types. Status, error, and the form ref are already typed.

One-time activation

Open the live page. Click Activate form. We email you so only you can turn the form on for that domain. Each inbox you add also confirms once. After that, it stays on.