Simple integration

Insert the Framer Input Component

Use the Framer Input Component! Drag and drop the Input component into your Framer site. framer component

Find the settings panel

Scroll down in the Framer right hand side panel to get to the Input Component property settings. framer property panel

Set the Loops ID

Add the ID from the Loops form page. Your ID is the line that starts with action="https://app.loops.so/api/XXXXXXXXXXX. Copy your ID (the X’s) and paste it into the ID input in the Framer component. Alt text

Set up a confirmation message

Make sure to also set up a confirmation message. This can be either setup in an overlay or in a redirected page.

Advanced Integration

  1. On the left hand side of the screen, select the “Forms” tab to navigate to the Forms page.
  2. Select “Settings” from the tabs selector

  1. Toggle to “JSX” and copy the code snippet.

Embedding the component in Framer

  1. First, you need to create a new component. Toggle over to “Assets” in the Framer side panel then click the “+” button.

  1. Then, give your New Component a title.

  1. 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. Drag and drop your new asset anywhere on your page to use it :)

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