Boosterpack Forms
Back to Documentation

Add a Contact Form to Gatsby

Use the official @boosterpack/react-form package for a native React integration with your Gatsby site. Handles Proof-of-Work, spam protection, and submission automatically.

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 Gatsby project. No embed script needed — the package handles everything.

3
Add the form component

Use the <BoosterpackForm> component or the useBoosterpackForm hook in any page or component. See the code snippets below.

Gatsby uses client-side React by default, so no special configuration is needed.

4
Build and deploy

Deploy your Gatsby site (Gatsby Cloud, Netlify, Vercel — anywhere). When you visit the page with your form, you'll see an overlay with an Activate form button. Click it to activate the domain. Your form is live 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 Gatsby 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>
  )
}

Gatsby SSR: The React package only runs on the client side. During static generation, the form renders normally and the Proof-of-Work is solved at runtime in the browser.

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 →