# Connect Webflow to SendBeam

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

Via automation

Webflow sites have their own forms, and many site owners want those sign-ups in their email tool. There are two ways to do it: send Webflow's form submissions to SendBeam through an automation tool, or skip the tool and put a SendBeam form on the page with an Embed element.

## Before you start

- An account with Webflow
- An n8n, Zapier or Make account
- A SendBeam API key, or a form ID

## Set it up

1. **Pick your automation tool.** n8n with the official SendBeam node, Make or Zapier. Each connects to Webflow with its own trigger, shown below.
2. **Create an API key.** Settings → API keys in SendBeam, with contacts:write, and lists:write if the workflow adds people to a list. The full key is shown once. To send SendBeam events out instead, add an endpoint under Settings → Webhooks.
3. **Map the fields and test.** Map the fields between Webflow and SendBeam, run the workflow once with your own address, and check the result before switching it on.

## Code

### In n8n: Webflow to SendBeam

`n8n workflow`

```
1. Webflow Trigger, with the event Form Submission
2. SendBeam → Contact → Create or update
     Email       the email field from step 1
     First name  the first name, if there is one
     Source      webflow
3. SendBeam → Contact → Add to list
     Contact     By email, the same expression as step 2
     List        From list, then pick the list by name
```

Install the SendBeam node from Settings → Community nodes (n8n-nodes-sendbeam). Adding someone who is already a contact, or already on the list, succeeds, so the workflow is safe to re-run.

### In Make: Webflow to the REST API

`Make scenario`

```
Module 1: the Webflow module that watches for new form submissions
Module 2: HTTP → Make a request
URL:          https://sendbeam.io/api/v1/contacts
Method:       POST
Headers:      x-api-key = sb_live_XXXXXXXX_YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
Body type:    Raw
Content type: JSON (application/json)
Request content:
{
  "email": "{{1.email}}",
  "first_name": "{{1.first_name}}",
  "source": "webflow"
}
```

Replace {{1.email}} and {{1.first_name}} with the email field and the name, mapped from module 1. A 409 answer means the contact already exists; route it to GET /api/v1/contacts?q= with the same address if you need the contact’s id.

### In Zapier: Webflow to the REST API

`Zap`

```
Trigger  Webflow → New Form Submission
Action   Webhooks by Zapier → POST
URL           https://sendbeam.io/api/v1/contacts
Payload type  json
Data
  email       the email field
  first_name  the first name
  source      webflow
Headers
  x-api-key   sb_live_XXXXXXXX_YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
```

Webhooks by Zapier is available on Zapier’s paid plans. The SendBeam app for Zapier will replace this step with a Create Contact action once it is listed in Zapier’s directory.

## Things to know

- To avoid the automation step entirely, copy a form’s embed code from Forms → your form → Embed code in SendBeam into a Webflow Embed element.
- Each Webflow form sends its own field names; map the email field by the name you gave it in Webflow.
- Only add people to a marketing list if they agreed to hear from you. Someone who only bought or booked can still get receipts and reminders through Send transactional.

[← Webflow email marketing integration](https://sendbeam.io/integrations/webflow)

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