Integrating Revue email embed forms with Webflow forms
I recently switched my email newsletter from Mailchimp to Revue. Review is a simple and powerful email solution that integrates closely with Twitter. So for me, it seemed like a perfect fit.
I love Webflow because it gives designers and developers a visual way to build sites. And though you can embed HTML email forms into Webflow, you still have to style them. If you’ve ever styled an email form, you know the process can be tedious. So I just wanted a solution that tied Revue’s email capture to a pre-styled Webflow form. But unfortunately, I couldn’t find a tutorial for connecting Review with a Webflow form. And doing it through a Zapier integration seemed like overkill. So I sat down to figure it out, so you don’t have to.
Point a Webflow form to your Revue form
Step 1: Create a form in Webflow
Select the Form block element from Webflow’s add panel under the ‘Form’ subsection and drag it to your canvas. By default, Webflow adds a Name and Email text input into forms.
Revue doesn’t require names for email forms, so I deleted them from my form, but I outlined the steps to connect them below if you want to keep them.
Step 2: Grab your Revue email form’s action URL
The format of your Revue email’s post URL will look like this:
https://www.getrevue.co/profile/{your revue username}/add_subscriber
Find your email form’s post URL by opening Revue’s integrations and scrolling down to Signup forms. Copy and paste the URL that is listed after <form action="{copy this URL} ">.
Step 3: Update the email address field in Webflow
Change the form’s settings. First, select the email input on your Webflow form. Next, click on the gear icon, then click the ‘Show all settings’ button from the pop-up menu. Or select the text input and click the gear icon in Webflow’s sidebar to show the form’s settings.
Update the Name field
By default, the name field is `Email.` Update this field to `member[email].` Make sure this field is set as `Required` in your Webflow settings. Finally, add some placeholder text.
Step 4: Update your form’s action settings
Click the submit button to access its settings. Again, settings are found in the right panel by clicking the gear icon.
- Set the method to POST in the form’s settings.
- Paste your Revue email form’s post URL (that you grabbed in step 2) into the Action field in the Webflow form.
Step 5: Updating optional name fields
Add two fields if you want to collect names from your email form. First name and Last name. Repeat the steps from step 2 listed above, but instead of updating the name field for the email, update the names field for the first and last names.
- Text feild settings for first name: name: member[first_name]
- Text feild settings for last name: name: member[last_name]
Set these fields to optional in the form settings.
Step 5: Publish your site
Publish your site and test out your form.
When you test it out, you will notice that the user is redirected to verify that they are not a bot on Revue’s site. Revue requires a double opt-in, so users will confirm the subscription through their email.
Good luck and happy building!
If you run into any issues, visit Webflow’s Mailchimp integration tutorial, I used the same method to connect a Webflow form to Revue.