Netlify setup

Before you start

• An account with Netlify
• A SendBeam API key, or a form ID
• Somewhere to paste a snippet

Set it up

1. Create the forms in SendBeam. Forms → New form. One Signup form (pick the list it feeds) and one Contact form (set the address messages go to). Copy each form ID from the form page.
2. Put the IDs in your environment. The snippets read them from environment variables so the same code serves every site. Form IDs are meant to be public; protection is on the form, not in the ID.
3. Add the snippets and deploy. Paste the components below, deploy to Netlify, then submit each form once with an address you control and check Contacts and your inbox.

Code

Newsletter signup (plain HTML)

index.html

<form data-sendbeam data-endpoint="https://sendbeam.io/api/forms/YOUR_SIGNUP_FORM_ID">
  <label for="nl-email">Email</label>
  <input id="nl-email" name="email" type="email" required autocomplete="email" />
  <!-- Hidden check field. Each form has its own name: copy it from the form's Embed tab in SendBeam. -->
  <div style="position:absolute;left:-9999px" aria-hidden="true">
    <input name="YOUR_FORM_CHECK_FIELD" type="text" tabindex="-1" autocomplete="off" />
  </div>
  <button type="submit">Subscribe</button>
</form>
<p data-status role="status" aria-live="polite" hidden></p>
<script src="/sendbeam-forms.js" defer></script>

Do not add the data-netlify attribute: the form is handled by SendBeam, not by Netlify’s build-time form detection.

Contact form (plain HTML)

contact.html

<form data-sendbeam data-endpoint="https://sendbeam.io/api/forms/YOUR_CONTACT_FORM_ID">
  <label for="c-name">Name</label>
  <input id="c-name" name="name" type="text" required />
  <label for="c-email">Email</label>
  <input id="c-email" name="email" type="email" required autocomplete="email" />
  <label for="c-subject">Subject</label>
  <input id="c-subject" name="subject" type="text" />
  <label for="c-message">Message</label>
  <textarea id="c-message" name="message" rows="5" required></textarea>
  <div style="position:absolute;left:-9999px" aria-hidden="true">
    <input name="YOUR_FORM_CHECK_FIELD" type="text" tabindex="-1" autocomplete="off" />
  </div>
  <!-- Optional: Cloudflare Turnstile. Paste the SECRET key into the form's Protection section in SendBeam. -->
  <!-- <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-size="flexible"></div> -->
  <button type="submit">Send message</button>
</form>
<p data-status role="status" aria-live="polite" hidden></p>
<script src="/sendbeam-forms.js" defer></script>
<!-- Only when Turnstile is on: -->
<!-- <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> -->

netlify.toml with CSP

netlify.toml

# netlify.toml
[build]
  command = "npm run build"
  publish = "_site"      # dist for Astro, .next is handled by the Next runtime

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self' https://challenges.cloudflare.com; connect-src 'self' https://sendbeam.io https://challenges.cloudflare.com; frame-src https://challenges.cloudflare.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'"

Things to know

• Environment variables (SENDBEAM_SIGNUP_FORM_ID and friends for Eleventy, PUBLIC_ for Astro, NEXT_PUBLIC_ for Next.js) go under Site configuration → Environment variables and are read during the build.
• Deploy previews run on a different origin (deploy-preview-12–site.netlify.app); add it under Allowed sites while testing, or test on the production URL.
• Netlify Functions are not needed; if you already have one wrapping a form, it can forward the same JSON to the SendBeam endpoint unchanged.

← Back to the Netlify integration