Framer

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

1. Framer Form component
   This uses the native Form component in Framer and gives good flexibility for extra form fields.
2. Framer Loops component
   This simplest method. A simple drop-in form with an email address input.
3. Custom component with code
   Ths most flexible but complex option, using custom code.

​

Framer Form component

Use Framer 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.

​

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” in Loops.

For example, the Name value must be “email” for the email address field.

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.

​

Configure the form

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

1. Go to the Forms page in your Loops account.
2. Click on the Settings tab.
3. Copy the Form Endpoint.
4. Back in Framer, select your form. In the Send To option, select “Webhook”. Then paste the URL from Loops into the API field.

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.

​

Configure the form

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

1. Go to the Forms page in your Loops account.
2. Click on the Settings tab.
3. Copy the Form ID.
4. Paste this ID into the ID field in the Framer component.
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. Add here one or more mailing list IDs separated by commas.
     Mailing lists need to be marked Public in your Lists settings 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 generated by Loops

​

Generate the form code

1. Go to the Forms page 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).

​

Embed the component in Framer

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

2. Give your New Component a title.

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.

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