# Connect Netlify to SendBeam

How to connect Netlify to SendBeam: what you need, the setup steps, and the code.

Via API

Netlify Forms stops at the inbox: no list, no double opt-in, nothing back out. Posting to SendBeam from the same static site gives you a signup and a contact form that work identically on any host.

## 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.

[← Netlify email marketing integration](https://sendbeam.io/integrations/netlify)

---
Source: https://sendbeam.io/docs/integrations/netlify