Forms
Framer
Forms
Framer
By integrating with Framer, you'll be able to drag and drop a styled Loops component into your Framer site.
Simple integration
Insert the Framer Input Component
Use the Framer Input Component! Drag and drop the Input component into your Framer site.
Find the settings panel
Scroll down in the Framer right hand side panel to get to the Input Component property settings.
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.
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
- On the left hand side of the screen, select the “Forms” tab to navigate to the Forms page.
- Select “Settings” from the tabs selector
- Toggle to “JSX” and copy the code snippet.
Embedding the component in Framer
- First, you need to create a new component. Toggle over to “Assets” in the Framer side panel then click the “+” button.
- Then, give your New Component a title.
- 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.