> ## 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.

# Framer integration

> Enable signups from your Framer site using a built-in or custom Loops component.

Collect new subscribers from your Framer site. There are a few ways to set this up.

1. [Framer Form component](#framer-form-component)\
   This uses the native Form component in Framer and gives good flexibility for extra form fields.
2. [Framer Loops component](#framer-loops-component)\
   This is the simplest method. A simple drop-in form with an email address input.
3. [Custom component with code](#advanced-integration)\
   The most flexible but complex option, using custom code.

> [!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.

## Framer Form component

Use [Framer Forms](https://www.framer.com/features/forms/) to easily create a form on your site.

### Insert the Form Component

From **Insert -> Forms** drag the **Form builder** component into your page. This will add an example form.

![Framer Form component](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-form-component.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=d0426c13908ad170efc970c2ce94017d)

### Edit the form fields

Edit the fields in the form to match the data you want to collect from new subscribers.

An email field is required. Make sure to toggle the **Required** option to **Yes** for your email field.

You need to edit the **Name** value of each field to match the [contact properties' "API name"](https://loops.so/docs/contacts/properties.md) in Loops.

For example, the **Name** value must be "email" for the email address field.

![Email form field](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-email-field.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=35e2be920b979df45dd80139b126ee9d)

You can add hidden fields to populate data like `mailingLists`, `userGroup` and `source` in Loops yet ensure they don't show up in the form.

You may have to click the `+` button to show the **Value** and **Hidden** options.

> [!TIP]
>
> To add subscribers to specific [mailing lists](https://loops.so/docs/contacts/mailing-lists.md), add a
> field with **Name** `mailingLists`. The **Value** can be a single mailing list
> ID or a comma-separated list of IDs.

> [!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.

![Hidden form field](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-form-hidden.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=48c9c39a6c3501490a28ead141aa48c8)

### Configure the form

The final step is to set the endpoint to your Loops form URL.

1. Go to the [Forms page](https://app.loops.so/forms) in your Loops account.
2. Click on the **Settings** tab.
3. Copy the **Form Endpoint**.

   ![Form endpoint](https://mintcdn.com/loops/o5mH5af8b_cEo_bz/images/form-endpoint.png?fit=max\&auto=format\&n=o5mH5af8b_cEo_bz\&q=85\&s=f997c55643c658a3217ee9cca72e2c52)
4. Back in Framer, select your form. In the **Send To** option, select "Webhook". Then paste the URL from Loops into the **API** field.

   ![Framer form webhook](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-form-webhook.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=6cb4ce32e76b6d971829df8fde014bcc)

Now your form is all set up and can start receiving new subscribers.

### Set up a confirmation message

By default a "Thank you" message is shown inside the form button when the form is submitted successfully.

You can opt to use a redirect instead. You can add a confirmation message on another web page and use the **Redirect** option in the form settings.

## Framer Loops component

Framer has a built-in Loops option for creating simple signup forms with an email address field.

### Insert the Loops Component

From **Insert -> Forms** drag the **Loops** component into your page. This will add an example form.

![Framer Loops component](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-loops-component.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=8806edaec1877f6bbf9cd73f337d58fb)

### Configure the form

Next, you need to add your Loops form ID to the **ID** field.

1. Go to the [Forms page](https://app.loops.so/forms) in your Loops account.
2. Click on the **Settings** tab.
3. Copy the **Form ID**.

   ![Form ID](https://mintcdn.com/loops/o5mH5af8b_cEo_bz/images/form-id.png?fit=max\&auto=format\&n=o5mH5af8b_cEo_bz\&q=85\&s=cbd349994911210002f0b7a02c20388c)
4. Paste this ID into the **ID** field in the Framer component.

   ![Loops form ID](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-property-panel.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=0ee89de4b2c208ad4a2eb6ee2b65e8b2)
5. Framer offers two extra fields in the component:
   * **User Group** populates the contact's `userGroup` value in Loops.
   * **Mailing list** can be used to subscribe contacts to your [mailing lists](https://loops.so/docs/contacts/mailing-lists.md). Add here one or more mailing list IDs separated by commas.
     > [!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.

### Set up a confirmation message

Make sure to also set up a confirmation message by clicking on the **Success** dropdown.

You can choose to show a message in an overlay with the "Show Overlay" option or redirect the user to another web page with the "Open Link" option.

To add an overlay message, click on the **Overlays** section header in the right-hand panel, choose between "Relative" and "Fixed" and make sure the **Show On** selection is "Submit".

## Advanced integration

This option adds a custom component into your Framer site [using form code](https://loops.so/docs/forms/custom-form.md) generated by Loops

### Generate the form code

1. Go to the [Forms page](https://app.loops.so/forms) in your Loops account.
2. Click on the **Settings** tab.
3. Select “JSX” from the **Generate Form Code** dropdown (1), then copy the code snippet (2).

   ![Generating JSX form code in Loops](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/jsx-form.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=e220637047302e7c59969a531b231bff)

### Embed the component in Framer

1. Create a new component. Toggle over to **Assets** in the Framer side panel then click the `+` button.

   ![Creating a new Framer component from the Assets panel](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-1.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=dd174a81bd62bfbf14e0f9edd0221b16)

2. Give your New Component a title.

   ![Naming the new component in Framer](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-2.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=577c8d23d7013beb94d27eec20ccd0ef)

3. Finally, paste the code copied in from Loops into the code editor. You should see the Preview on the right fill in with a preview of your component.

   ![Pasting Loops form code into the Framer code editor](https://mintcdn.com/loops/OG31ikb--92jQDlq/images/framer-3.png?fit=max\&auto=format\&n=OG31ikb--92jQDlq\&q=85\&s=e16eb14c62eb830c95fe0deecf3708e7)

4. Drag and drop your new asset anywhere on your page to use it :)


## Related topics

- [Integrations](https://loops.so/docs/integrations.md)
- [Add contacts via integrations](https://loops.so/docs/add-users/integrations.md)
- [Simple form](https://loops.so/docs/forms/simple-form.md)
- [Make integration](https://loops.so/docs/integrations/make.md)
- [Bubble integration](https://loops.so/docs/integrations/bubble.md)