Tutorials
Webflow
Integrations

Connect Webflow forms to Brevo: In 3 easy steps

Connect Webflow forms to Brevo: In 3 easy steps
Author
Max Frings
Published
3.6.2024
Table of Contents
Gastautor
Webflow Cloneable
100% free to use
Customizable in Webflow
Clients First CSS ready
Relume Library ready
Empower your inhouse team to use Webflow
Eine Vorschau auf den Webflow Kurs für interne Teams von Virtual Entity
6h video material
Webflow SEO
Editor and Designer
Webflow Pagespeed
Incl. Checklists

Anyone who uses Brevo knows how diverse the platform is for sending emails and many other functions. From simple newsletters to multi-layered automations, Brevo can cover a lot of the marketing mix.

However, the success of these campaigns often depends on how seamlessly they are integrated into the user journey. It is therefore not surprising that the styling of Brevo forms is sometimes criticized. Too few granular settings lead to a style break when you embed forms on your own website.

But we have brilliant news for you: When you use Webflow, you no longer have to spoil your perfectly styled website with Brevo forms. Both platforms can be seamlessly connected — without any additional tools. Use native Webflow Forms and send the data directly to a Brevo list.

What are the benefits of Webflow x Brevo

The obvious advantage of this method is freedom of design. Brevo is great, but the design of forms is definitely expandable. With Webflow, you can style forms granularly, but you don't have any additional email marketing features. By combining both tools, you can customize the visual appearance of your form exactly as you imagine for the campaign — without any compromises.

Connect a Webflow form to Brevo in 3 steps

The easiest way to use Brevo on Webflow websites is to embed it as <iframes>you can get directly from your Brevo account. But if you want to use your Webflow form, all you have to do is follow these 3 steps:

1. Customize the email address field

First, you need to jump into the email field settings in your Webflow form and change the field Text field settings > Name into “EMAIL”. By default, the field is named “Email.” By making this change, you ensure that the email field exactly matches the form name in Brevo. As backup , also put “EMAIL” as the ID of the field.

In Form Field Settings, you can correctly set the name of your email field.

Repeat this step for all fields that you want your form to have.

2. Change the form action

In the second step, you must override the action of the submit button. You can do this easily in the Form Settings > Action. Insert the Brevo URL of your form here. It has the following formatting:

https://(account-number).sibforms.com/serve/(form-id)

It is essential that you enter the correct action URL for your Brevo form here. Otherwise, form submissions are not transferred. You can find the form URL in your Brevo embed code here:

Important: The URL is all after the scr= but without the > " <

3. Change the form method from Get to Post

The last step is done with one click. Change the method from Get to Post in the form settings. Now you can publish and test your form. You should now be able to see form submissions in your Brevo lists and trigger automations in Brevo.

Set the method from GET to POST

Now just set up a redirect in the Brevo form settings so that your subscribers don't end up on the unsightly success page that is displayed by default by Brevo.

In the Brevo form settings, you can specify where visitors should be sent after they have submitted the form.