This integration requires a paid Webflow plan to allow embedding custom scripts into your site.

​
Add a custom form script to your Webflow site

To submit a Loops form seamlessly on your Webflow site, you need to add some JavaScript.

The script linked below allows you to use the Webflow form submission to send data to Loops.

Get the script here: https://gist.github.com/askkaz/44ba29cf1898c60e3eb03903e63e2cc4

Add this script in your Webflow page settings in the “Before </body> tag” section. Alternatively you can add an “Embed” component into the page just beneath the form.

Please remember to add the custom script. If you do not add the custom script, the form will not work properly.

​
Add a form to your page

Next you need to create a form in your Webflow page.

When you add new fields, make sure the “Name” values you use in the field settings panel matches the names of your Loops contact properties: email, firstName, etc.

You can check the full list of your available properties from your API Settings page.

Please make sure these contact properties already exist inside of Loops in your audience table. You can add new contact properties in API Settings, with a CSV import or using the API.

If you want to set a property for all contacts that submit the form (for example, source or userGroup), add an “Embed” component inside your form.

Make sure this embed goes inside the “Form” element on your page.

In this Embed you can add a hidden text field that passes on the custom value to Loops:

<input type="hidden" name="source" value="Webflow" />

<input type="hidden" name="userGroup" value="Some User Group" />

Note: there is rate limiting, so you will get an error in testing if you submit more than once per minute or submit the same email twice.

​
Add your Loops form endpoint URL

The last step is to make sure your form submits data to Loops. You do this by adding a Loops form endpoint as the form’s “Action” value.

  1. Go to the Forms page in your Loops account.
  2. Click on the “Settings” tab.
  3. Copy the URL shown in the “Form Endpoint” field.
  4. In Webflow, click on your Form Block, go to the Settings panel and paste the URL into the “Action” field.

Was this page helpful?

TypedreamZapier