How can we help?

Important Notice: This content is based on an earlier version of the product. Please do not consider this information as definitive. We’ve kept it available because some customers are still using the previous version. Thank you for your understanding!

1. Get a Form URL from Loops

• Go to the Loops website at loops.so.

• Sign in or create an account.

• In the sidebar, press the Forms button.

• Press the "Settings" button on the left side of the form builder menu, then copy the "Form Endpoint" URL.

  

2. Configure Your Form in Framer

• Open your Framer project that contains the form you want to integrate with Loops.

• Select the Submit Button on the form.

• Select "Loops" from the "Submit To" dropdown.

• Paste the URL from Loops into the "Loops URL" field.

3. Connecting Form Fields to Loops Contact Details

In Loops, each contact has several detail fields such as email, first and last names, user group, and custom properties.

The first email field in the form is automatically used as the contact email.

To add a user group for new contacts that sign up through your form, there are two ways to do this:

1. If you want all contacts who sign up through this form to have the same user group, enter it into the "User Group" property on the Submit Button.

2. If you want new contacts to pick a user group, create a dropdown field with the "Name" property set to "userGroup" and enter each user group as dropdown options.

To connect form fields to the first and last names in Loops, set the form field name to "firstName" or "lastName".

To connect form fields to custom fields, set "Name" on the Form Field component to the Loops property's stored name. The stored name is shown when creating the property, but if you already created the property and don't know what the stored name is, convert the property name to "camel case" by making the first letter lowercase, removing spaces and all non-alphanumeric characters, and making the first letter of all other words uppercase.

For example, "Phone Number" becomes "phoneNumber"

4. Test Your Form

• Publish your Framer project.

• Fill out the form with test data.

• Click the submit button on the form.

• Return to the Loops dashboard and check the Audience page for new contacts.

That's it! You've successfully integrated Loops with Framer.