# Webflow recipes

> Text each person who fills in a Webflow form.

Two recipes for Webflow. Each names its trigger and the BlueBot step, lists the fields to map and says how to test it with your own number before anyone else gets a text.

## How Webflow connects

- **[Text Hook](https://usebluebot.com/docs/text-hooks)**: A Text Hook is a BlueBot address the app posts its own webhook to. You map its fields to a recipient and a template, and each post becomes a text.
- **[Zapier](https://usebluebot.com/docs/zapier)**: BlueBot’s Zapier app has a Send Text action and instant triggers for incoming texts and every change of state.

## Text people who fill in a form

| Part             | What it is                                          |
| ---------------- | --------------------------------------------------- |
| Trigger          | Webflow’s webhook for a form submission             |
| Action           | A BlueBot **Text Hook** turns each post into a text |
| Connects through | [Text Hook](https://usebluebot.com/docs/text-hooks)                       |

### Steps

1. Make a Text Hook in BlueBot and copy its address.
2. Add the address in your Webflow site’s settings as a webhook for form submissions.
3. Submit the form once, then pick the name and phone fields from the payload BlueBot kept.
4. Write the template, and each submission becomes a text from your number.

### Map the fields

| Text Hook setting | Set it to                                                                                                                        |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Recipient         | The field in Webflow’s post that holds the person’s phone number, written as a path such as `{{body.phone}}`.                    |
| Text              | Hi {{body.first_name}}, thanks for getting in touch with Fernwood Studio. I’ll text you back today to talk about your project. |
| Metadata          | `source` set to `webflow`. BlueBot adds the hook’s id by itself.                                                                 |

### Test it

Post a sample to the hook’s address with your own number in the phone field, as below. A text arrives on your phone, and the hook’s page lists the post.

```bash title="A test post shaped like Webflow’s"
curl -X POST "https://usebluebot.com/h/YOUR_HOOK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"phone":"+15555550123","first_name":"Maria"}'
```

## Text yourself each submission

| Part             | What it is                                      |
| ---------------- | ----------------------------------------------- |
| Trigger          | Webflow’s New Form Submission trigger in Zapier |
| Action           | BlueBot’s **Send Text** action                  |
| Connects through | [Zapier](https://usebluebot.com/docs/zapier)                          |

### Steps

1. Start a Zap with Webflow’s New Form Submission trigger.
2. Add BlueBot’s Send Text action with your own number in To.
3. Put the person’s name and message in Text.

### Map the fields

| BlueBot field             | Map it to                                                                                                                                    |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| To                        | The person’s mobile number from Webflow. US numbers can leave off the +1.                                                                    |
| Text                      | New inquiry from {{name}}: {{message}}                                                                                                   |
| `{{name}}` in the text    | Webflow’s name field.                                                                                                                        |
| `{{message}}` in the text | Webflow’s message field.                                                                                                                     |
| Metadata                  | `source` set to `webflow`, and `record_id` set to the record’s id, so the status and reply webhooks for this text can find the record again. |
| Service                   | Auto, the default: iMessage when the person uses it, otherwise SMS through your iPhone.                                                      |

### Test it

Put your own number in **To** and press **Test step**. A text arrives on your phone from your own number, and Zapier shows the message BlueBot returned with `state: "queued"`. Then map Webflow’s field back into **To** and turn the Zap on.

## Before you turn it on

- Text only people who asked to hear from you. Anyone who replies STOP goes on your stop list, and BlueBot cancels texts to them. [Stop words](https://usebluebot.com/docs/concepts/stop-words)
- A text that can’t go yet waits with a hold rather than failing: quiet hours, your Mac away, a daily limit. [Holds](https://usebluebot.com/docs/concepts/holds)
- [Webflow with BlueBot](https://usebluebot.com/integrations/webflow) on the integrations page says what else the two do together.