How to add Email Signup Forms to Framer Sites and Collect Newsletter Subscribers

In this guide we'll show you how to add an email signup form to any Framer website using Audienceful so you can start building an email list (and start sending newsletters!).

We integrate directly with Framer native forms, so you can convert SEO traffic on your blog to your audience by offering a way to subscribe to your newsletter. You can either do single field email collection, or setup unlimited multi-field lead capture forms with things like First Name, Company, Job Title, etc.

1. Create a form in Audienceful

If you don't have one already, create a free Audienceful account here.

Go to the Forms tab. Select "New" and then Form Action URL. Fill out the details required for the form. Add any optional tagging and redirects once users complete your form. Select "Save".

2. Create a form in Framer

Head to your Framer site, and create a form using the "Form Builder". If you need any help creating forms in Framer, follow this guide.

Next, edit the fields in the form to match the data you want to collect from new contacts. At a minimum, an email field is required and pictured below. Make sure to toggle the Required option to Yes for your email field.

For any fields in your form, you need to ensure the Name value of each field matches the data_name property in Audienceful. For example, the Name value must be “email” for the email address field.

3. Copy the unique URL from your Audienceful form

Select the newly created form to access your URL and copy it for the next step. Ensure the response type says "JSON" before copying the URL.

4. Make your form send data to Audienceful

Back in Framer, select your form. In the Send To option, select “Webhook”. Paste the URL from Audienceful (with response type as JSON) into the API field. Enter your email in the "Fallback" field to get emails if the Webhook were to stop working.

Additionally, you can add a redirect in the form configuration in Framer if you would like this behavior. Otherwise, there will be an inline success message in your site by default.

Congratulations! Your Framer site is now sending signups to Audienceful. Our form endpoint has some basic bot protection that should block the majority of bad actors for you. We also do a number of validations to ensure emails are deliverable prior to adding them to your list, so new contact may take a few seconds to appear.

If you're looking for more advanced forms like triggered Popovers or Pop-ups, check out all of our guides for setting up various form types.