> ## Documentation Index
> Fetch the complete documentation index at: https://loops.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow integration

> Enable signups from your site using a native Webflow form.

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

To allow sign ups to your audience from your Webflow site, you can utilize a native Webflow form plus some drop-in JavaScript.

## Add a custom form script to your Webflow site

<Tip>
  If you do not add the custom script in the correct place, the form may not
  work properly.
</Tip>

To submit data to Loops seamlessly from your Webflow site we provide some JavaScript, which can be added to your site.

<CardGroup>
  <Card title="Get the script" icon="file" href="https://gist.github.com/askkaz/44ba29cf1898c60e3eb03903e63e2cc4">
    Use this script in your Webflow page.
  </Card>
</CardGroup>

### Where to add the script

* If you have a Loops form on every page of your site, add this code to the "Footer code" section in your Site settings ([read how in the Webflow docs](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#custom-code-in-site-settings)).
* If you have a Loops form on only one page, add this code to the "Before \</body> tag" section in your Page setting ([read how in the Webflow docs](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#before-the-\<-body>-tag)).

## Add a form to your page

Next you need to create a form in your Webflow page. Use the "Input" and "Button" elements.

When you add new fields, make sure the “Name” value in the field's settings panel matches the name of the field in Loops: `email`, `firstName`, etc. You can check the full list of your available properties from your [API Settings](https://app.loops.so/settings?page=api) page.

<Tip>
  Please make sure these contact properties already exist in your Loops account.
  You can add new contact properties in [API
  Settings](https://app.loops.so/settings?page=api), with a [CSV
  import](/add-users/csv-upload) or [using the API](/api-reference/intro).
</Tip>

<img src="https://mintcdn.com/loops/1DdZd7QTRR4Srm-l/images/webflow-field.png?fit=max&auto=format&n=1DdZd7QTRR4Srm-l&q=85&s=c89a5d084758404721dbacb04c2d6ef6" alt="Webflow form field settings showing the “Name” attribute" width="2280" height="1662" data-path="images/webflow-field.png" />

### How to add hidden fields

You may want to assign a property to all contacts that submit the form (for example, `source` or `userGroup`).

For this add an "Embed" component *inside your form* on the same level as your input and button elements.

<img src="https://mintcdn.com/loops/1DdZd7QTRR4Srm-l/images/webflow-hidden-field.png?fit=max&auto=format&n=1DdZd7QTRR4Srm-l&q=85&s=0947d420946a92c030c643808786b9c4" alt="Webflow embed element inside a form for hidden fields" width="2280" height="1662" data-path="images/webflow-hidden-field.png" />

In this Embed element add a hidden text field that passes on the custom value to Loops (make sure the `name` values match the "API Name" values in your [API Settings](https://app.loops.so/settings?page=api)).

```html theme={"dark"}
<input
  type="hidden"
  name="mailingLists"
  value="cly2xnjbn002z0mme68uog1wk, cly4xnjbn002x0mme28uog1wk"
/>

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

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

<!-- This also works with other default contact properties... -->
<input type="hidden" name="firstName" value="Barbara" />

<!-- ... and custom contact properties -->
<input
  type="hidden"
  name="signupPageUrl"
  value="https://yourdomain/this-page-url"
/>
```

<Warning>
  Mailing lists need to be marked **Public** in your [Lists
  settings](https://app.loops.so/settings?page=lists) in order for them to work
  in forms.
</Warning>

Here's how it looks in the Webflow editor:

<img src="https://mintcdn.com/loops/1DdZd7QTRR4Srm-l/images/webflow-embed.png?fit=max&auto=format&n=1DdZd7QTRR4Srm-l&q=85&s=4f56a8ef8bebe032977da1a09197d361" alt="Webflow editor showing hidden fields embedded in the form" width="2280" height="639" data-path="images/webflow-embed.png" />

## 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](https://app.loops.so/forms) in your Loops account.
2. Click on the **Settings** tab.
3. Copy the URL shown in the **Form Endpoint** field.
   <img src="https://mintcdn.com/loops/OG31ikb--92jQDlq/images/form-endpoint.png?fit=max&auto=format&n=OG31ikb--92jQDlq&q=85&s=c44978586df98ffbb59edc5208d5fc39" alt="Loops form endpoint URL in form settings" width="2280" height="1389" data-path="images/form-endpoint.png" />
4. In Webflow, click on your Form Block, go to the Settings panel and paste the URL into the **Action** field.
   <img src="https://mintcdn.com/loops/1DdZd7QTRR4Srm-l/images/webflow-action.png?fit=max&auto=format&n=1DdZd7QTRR4Srm-l&q=85&s=585823061a0e327495f131396b83a33b" alt="Webflow form settings showing the Action URL" width="2280" height="1662" data-path="images/webflow-action.png" />

<Tip>
  Our form submission endpoint has rate limiting, so you will see an error in
  testing if you submit more than once per minute or submit the same email
  twice.
</Tip>
