Log inCreate a free account

Language

Log inCreate a free account
Documentation menu

Webflow: your site's forms

Add the people who fill in a form on your Webflow site to Mailcheer: a webhook on every submission, a test on the live site, and picking the email field.

Every time a visitor submits a form on your site, Webflow can send what they typed to a web address. That is a webhook. Give it your Mailcheer inbound webhook URL and the visitor lands in your contacts, with no export and no import.

Before you start

  • A Mailcheer inbound webhook. In Mailcheer, open Integrations → Bring in contacts and click Create an inbound webhook. Mailcheer gives you an address that looks like https://mailcheer.com/api/in/<token>. Treat it as a secret and never publish it: anyone who has it can send data to it.
  • A site hosted on Webflow. If you exported your site to host it elsewhere, Webflow does not process its form submissions.
  • Clear field names. Every form field has a Name setting that identifies it in submissions, and Webflow uses these names in what it sends. Give each field a unique name, such as Email for the address.
  • A field meant for the email address. In its settings, set Text type to email.

Only bring in people who have agreed to receive your emails, and say so clearly next to the form. Double opt-in (a confirmation email) is on by default in Mailcheer.

1. Create the webhook in Webflow

The webhook is set form by form, in the form's settings:

  1. Select your form on the canvas or in the Navigator.
  2. Open the Settings panel on the right.
  3. Click the "add" icon next to Send to and choose Webhook.
  4. Paste your Mailcheer inbound webhook URL as the webhook URL.
  5. Click Save.
  6. Webflow then shows a Secret key, only once. It is used to authenticate Webflow's messages. Copy it and store it somewhere safe, as Webflow asks, then click Hide key forever.

A form can have several destinations: the webhook is added alongside the ones already there, such as storing submissions in Webflow or email notifications.

Another route: site settings

Webflow also lets you create the webhook from your site settings. Pick one route or the other.

  1. Go to Site settings → Apps & integrations → Webhooks.
  2. Click Add webhook.
  3. Choose the Form submission trigger type.
  4. Choose the API version (v1 or v2).
  5. Paste your Mailcheer inbound webhook URL as the webhook URL.

2. Send a test

To test, fill in the form yourself on the live site:

  1. Publish your site with the Publish button.
  2. Open the page with the form on the published site.
  3. Fill in the form with your own email address and submit it.

Mailcheer replies right away and processes the submission afterwards.

3. Pick your fields in Mailcheer

Go back to your inbound webhook in Mailcheer. It shows what it received, along with the list of fields it found.

Webflow puts what the visitor typed in a data object whose keys are your field names (the Name setting). In the format described in Webflow's developer documentation, that object sits inside payload (payload.data); in the v1 format, data sits at the top level. Look for the field that holds the address.

Then choose, with a click:

  • the field that holds the email (required);
  • the first name and last name, if you want them;
  • tags: fixed ones (such as webflow-site) or taken from a field;
  • double opt-in, on by default;
  • the automation to trigger, if you have one.

To bring in people you already have, use a file instead: see Import your contacts.

If it does not work

  • The address is incomplete. Compare the webhook URL with the inbound webhook URL shown in Mailcheer. It must be copied in full, with no extra space or character.
  • The form will not submit. If you turned on reCAPTCHA (Site settings → Apps & Integrations), every form on the site must contain a reCAPTCHA element, or the submission fails.
  • Submissions stopped coming in. On the free Starter Site plan, Webflow caps the site at 50 form submissions in total. Beyond that, you need to upgrade your Site plan.
  • Webflow turned the webhook off. When deliveries keep failing, Webflow deactivates the webhook and emails you. To reactivate it, Webflow's documentation points you to its support team.

Sources