Framer

​

Simple integration

This option uses Framer’s built-in Input component to create a sign up form on your site.

​

Insert the Framer Input Component

Drag and drop the Input component into your Framer site. This will add an email input and a submit button to your page.

Make sure the form’s “Service” dropdown is set to “Loops”.

​

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 URL shown in the “Form Endpoint” field. The ID you need is everything after /newsletter-form/ (a long string of letters and numbers).
4. Paste this ID into the “ID” field in the Framer component.

​

Set up a confirmation message

Make sure to also set up a confirmation message by clicking on the “Success” dropdown. This can be either setup in an overlay or in a redirected page.

​

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 :)