Integrating Webflow Forms with Brevo: Easy Newsletter Setup Guide

Integrating Webflow Forms with Brevo: A Step-by-Step Guide

Email newsletters remain one of the most effective marketing channels, with an impressive ROI of $36 for every $1 spent according to recent studies. As a web designer or site owner, providing an easy way for visitors to subscribe to your newsletter is essential for growing your audience and nurturing potential clients.

In this guide, I'll walk you through the process of setting up a simple yet effective newsletter subscription form in Webflow that connects directly with Brevo (formerly Sendinblue). This integration allows you to automatically add new subscribers to your email marketing platform without any complex coding or third-party tools.

Why Choose Brevo for Your Newsletter?

Before we dive into the implementation details, it's worth highlighting why Brevo is an excellent choice for managing your newsletter:

• User-friendly interface that makes creating and sending emails intuitive
• Powerful automation capabilities
• Competitive pricing with a generous free tier (300 emails per day)
• Advanced segmentation options
• Detailed analytics and reporting

Now, let's get to the implementation.

Setting Up Your Webflow Form

The beauty of this integration is its simplicity. Here's what you'll need to do in Webflow:

Step 1: Create a Basic Form

First, add a form element to your Webflow page where you want the newsletter signup to appear. This form needs:

• An email input field
• A submit button

Keep it simple - asking for just an email address typically results in higher conversion rates than forms requesting multiple fields.

Step 2: Configure Form Settings

This is where the magic happens. We need to point our Webflow form to Brevo's API endpoint:

1. Select your form in the Webflow designer
2. In the form settings panel, find the Form Action field
3. Set the form Method to "POST"
4. Enter your unique Brevo form action URL (it will look something like: https://[your-unique-id].sibforms.com/serve/[long-string])

The action URL is provided by Brevo and is unique to your account. It will look similar to the example URL mentioned in your query.

Step 3: Configure the Email Input Field

For Brevo to properly recognize the email field:

1. Select your email input field
2. In the Element Settings panel, set the Name attribute to "EMAIL" (this is case-sensitive)
3. Make sure the field Type is set to "Email"
4. Enable the Required attribute to prevent empty submissions

Step 4: Add Required Hidden Fields

Brevo expects certain hidden fields to process the form correctly. Add a Custom Code element inside your form and paste the following HTML:

<input type="hidden" name="email_address_check" value="">
<input type="hidden" name="locale" value="en">
<input type="hidden" name="html_type" value="simple">

These hidden fields won't be visible to users but are necessary for proper form processing. Let me explain what each does:

• email_address_check: Acts as a honeypot for spam prevention
• locale: Sets the language for any auto-responses ("en" for English)
• html_type: Defines the format type for email rendering

Testing Your Integration

Once you've set everything up:

1. Publish your Webflow site
2. Test the form by submitting your own email address
3. Check your Brevo account to confirm the contact was added
4. Verify that the confirmation email (if enabled in Brevo) was received

Advanced Customization Options

While the basic setup above will work perfectly for most use cases, here are some advanced customizations you might consider:

Custom Success and Error Messages

In your Webflow form settings, you can customize the messages displayed after submission:

• Success Message: "Thanks for subscribing! Please check your email to confirm your subscription."
• Error Message: "Oops! Something went wrong. Please try again or contact us directly."

Redirect After Submission

Instead of showing a success message, you might prefer to redirect subscribers to a thank-you page:

1. Create a dedicated thank-you page in Webflow
2. In your form settings, enable "Redirect on submit"
3. Enter the URL of your thank-you page

Styling Your Form

Design considerations can significantly impact conversion rates:

• Use contrasting colors for your submit button to make it stand out
• Consider adding a brief value proposition near the form (e.g., "Get weekly design tips direct to your inbox")
• Ensure the form is responsive and works well on mobile devices
• Add subtle animations to draw attention to the form

Troubleshooting Common Issues

If your form isn't working as expected, check these common issues:

1. Form Action URL: Verify you've copied the entire URL from Brevo correctly
2. Field Name: Confirm the email field is named "EMAIL" (case-sensitive)
3. Hidden Fields: Make sure all hidden fields are present and properly formatted
4. CORS Issues: If you're testing on a custom domain, ensure it's properly configured in your Brevo account

GDPR Compliance Considerations

For European users or if you have European visitors, GDPR compliance is essential:

• Add a checkbox for explicit consent
• Link to your privacy policy
• Ensure your privacy policy explains how you use email addresses
• Set up double opt-in in your Brevo account

A simple GDPR-compliant checkbox addition might look like:

<label>
  <input type="checkbox" name="gdpr" required>
  I agree to receive newsletter emails and can unsubscribe at any time.
</label>

Monitoring Performance

Once your form is live, it's important to monitor its performance:

• Track submission rates through Webflow's built-in form analytics
• Monitor conversion rates (what percentage of visitors subscribe?)
• A/B test different form designs or copy to improve performance
• Review Brevo analytics to track open rates and engagement

Conclusion

Integrating Webflow forms with Brevo provides a seamless way to collect subscriber emails without relying on complex third-party tools. By following this guide, you've created a direct connection between your website and email marketing platform that automatically builds your audience as visitors engage with your site.

The simplicity of requesting just an email address, combined with the power of Brevo's marketing automation, creates an efficient system for growing and nurturing your audience. As your list grows, you can leverage Brevo's segmentation and automation features to deliver more personalized content to your subscribers.

Have you implemented this integration on your site? I'd love to hear about your experience or answer any questions in the comments below!