Contact form for Gatsby

A contact form for Gatsby

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

How to add it

Create the form, paste it into Gatsby, click activate once.

Create the form

Install the package

Run npm i @boosterpack/react-form.

Render the form

Use <BoosterpackForm> or useBoosterpackForm in any page or component.

Build and activate

Deploy, 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>

Gatsby 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>
  )
}

Static build: the package only runs in the browser. The form renders during the build; spam checks happen when someone submits.

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.