How to Connect Elementor Form With Brevo API

If you use Elementor to build WordPress websites and Brevo to manage email marketing, connecting the two can save you a surprising amount of manual work.

Instead of receiving a form submission and then copying the visitor's information into Brevo yourself, you can use our wp automation guide methods to create a workflow where the contact is sent to Brevo immediately after the Elementor form is submitted.

In this guide, you'll learn how to connect an Elementor Form with the Brevo API using a secure WordPress-side integration.

The process involves creating a Brevo API key, preparing your Elementor form, matching form fields with Brevo attributes, sending the submitted information to Brevo, and testing the complete workflow.

What Is Elementor?

Elementor is a popular WordPress page builder that lets you create websites visually without having to build every page from scratch.

One of its most useful features is the Form widget, which can collect information such as names, email addresses, phone numbers, company names, and messages.

Elementor Forms

Elementor forms can perform different actions after submission, including collecting submissions, sending emails, redirecting visitors, and sending data to external services. Elementor's documentation confirms that form actions can be used to send submitted information to third-party platforms.

Do You Need Elementor Pro?

For the form functionality and developer hooks discussed in this tutorial, you'll generally want Elementor Pro, because Elementor Pro provides the advanced Forms API and form actions used for custom integrations.

What Is Brevo?

Brevo is an email marketing and customer communication platform that can store contacts, manage lists, and support automated marketing workflows.

Its API allows your WordPress website to communicate directly with Brevo.

Brevo API Overview

The Brevo API uses REST over HTTPS and its current API endpoints use the /v3/ API structure. Requests are authenticated using an API key sent in the api-key HTTP header.

For this integration, the important endpoint is:

POST /v3/contacts

This endpoint allows your website to create a contact in Brevo and optionally add that contact to one or more lists.

Why Connect Elementor Forms to Brevo?

Imagine receiving 50 leads from your website in one day.

Without automation, someone has to open the submissions, copy each email address, find the right Brevo list, and add the contacts manually.

That's a tedious process and, more importantly, it's easy to make mistakes.

With an API integration, the workflow becomes:

Visitor → Elementor Form → WordPress → Brevo API → Brevo Contact List

Automatic Contact Synchronization

Every valid form submission can be sent directly to Brevo.

This means your marketing list can stay synchronized without requiring someone to manually transfer every lead.

Less Manual Work

Automation acts like a conveyor belt. Once the system is configured correctly, the lead enters at one end and reaches Brevo at the other with very little human intervention.

The biggest advantage is consistency: every submission follows the same process.

How the Integration Works

Before writing any code, it helps to understand the architecture.

Form Submission Flow

A visitor fills out your Elementor form and clicks Submit.

Elementor processes the submission. A WordPress-side handler then reads the submitted fields and prepares a JSON request for Brevo.

The request is sent to the Brevo API with your API key.

Brevo validates the request and creates or updates the contact.

WordPress-to-Brevo Communication

The connection essentially looks like this:

Elementor Form → Elementor Forms API → WordPress PHP → Brevo REST API

Elementor provides hooks that allow developers to execute custom code when forms are submitted. The elementor_pro/forms/new_record hook is specifically designed for processing submitted form data after form actions have run.

What You Need Before Starting

Make sure you have the following:

You should also have administrator or developer access to the WordPress website.

Create a Brevo API Key

The first technical step is creating an API key.

Open Brevo API Settings

Log in to your Brevo account and open the account settings area containing SMTP & API settings.

Brevo's official documentation explains that API keys are generated from the API keys section of your account settings.

Keep the API Key Private

When Brevo generates the key, save it securely.

Treat your Brevo API key like a password. Never place it directly into publicly visible JavaScript or publish it in a GitHub repository.

Brevo specifically recommends storing API keys securely because the key authorizes API requests to your account.

Create a Brevo Contact List

Next, create the list where you want your Elementor leads to be stored.

For example, you might create a list called:

Website Leads

You can organize your contacts into different lists depending on your marketing strategy.

Find the List ID

Your API request will need the numeric ID of the Brevo list.

You can retrieve or identify the relevant list through Brevo's contact/list management system.

The Brevo contact creation API supports a listIds parameter, allowing a newly created contact to be added to selected lists.

Prepare Your Elementor Form

Now open the page containing your Elementor Form widget.

Add the fields you want to send to Brevo.

A basic lead-generation form might contain:

• First Name
• Last Name
• Email
• Phone
• Company

Assign Useful Field IDs

This is an important step.

For example, configure your Elementor fields with IDs such as:

first_name

last_name

email

phone

company

These IDs make it easier for your PHP integration to identify the submitted values.

Create Matching Brevo Attributes

Your Elementor field IDs and Brevo attributes don't have to have identical names, but matching them makes the integration much easier to maintain.

For example:

Brevo's API expects contact attributes to correspond to attributes that exist in your Brevo account. The documentation also notes that attribute names should be passed in the appropriate format, such as FNAME and LNAME.

Add Custom Attributes When Necessary

Suppose your Elementor form collects a field called service.

You could create a corresponding custom attribute in Brevo, such as:

SERVICE

Then your WordPress integration can send the submitted service value to that attribute.

Choose an Integration Method

There are several ways to connect Elementor with an external service.

Webhook Approach

Elementor supports a Webhook action that can send form data to an external URL.

This is useful when the receiving service accepts a straightforward webhook request.

However, Brevo's API requires authentication through the api-key header, so a simple generic webhook is not always enough for a direct Elementor-to-Brevo connection.

Custom WordPress/PHP Approach

A custom PHP integration gives you much more control.

You can:

• Read Elementor fields.
• Validate the email.
• Build the Brevo JSON payload.
• Add the required API header.
• Send the request securely.
• Handle API errors.
• Add contacts to a specific list.

For a direct API integration, this is often the cleaner technical approach.

Why a Direct Elementor Webhook May Not Be Enough

This is where many beginners get stuck.

Brevo expects authenticated API requests.

Its API documentation specifies that the API key must be sent using the api-key header.

A generic webhook may send the form data but not provide the exact authentication and JSON structure required by the Brevo endpoint.

Think of it like sending a package.

The Elementor form has the package contents, but Brevo also needs the correct shipping label and authorization before accepting it.

The custom WordPress integration gives you control over both the data and the authentication.

Connect Elementor to Brevo With Custom PHP

One practical approach is to use Elementor's elementor_pro/forms/new_record hook.

Elementor documents this hook as a place where developers can process form submissions and execute custom logic.

The basic workflow is:

1. Detect the submitted Elementor form.
2. Check the form name.
3. Read the submitted fields.
4. Validate the email.
5. Build the Brevo request.
6. Send the request.
7. Handle the response.

Build the API Request

Brevo's contact endpoint is:

https://api.brevo.com/v3/contacts

The request should use JSON and include the API key.

A simplified request structure looks like this:

POST https://api.brevo.com/v3/contacts

Headers:
Content-Type: application/json
api-key: YOUR_BREVO_API_KEY

The JSON body can contain the email, attributes, and list ID.

For example:

{
  "email": "john@example.com",
  "attributes": {
    "FNAME": "John",
    "LNAME": "Smith"
  },
  "listIds": [12],
  "updateEnabled": true
}

Brevo's official Create a contact endpoint supports attributes, listIds, and updateEnabled.

Use updateEnabled Carefully

One useful option is:

"updateEnabled": true

This allows the request to update an existing contact instead of failing simply because the email already exists.

That can be particularly useful for lead forms where returning visitors may submit their information again.

Add the Contact to a Brevo List

The listIds parameter tells Brevo which list should receive the contact.

For example:

"listIds": [12]

Here, 12 represents the Brevo list ID.

You can also manage list membership separately through Brevo's contact-list endpoints.

Handle Existing Contacts

Duplicate contacts are another common issue.

If a contact already exists, your API request needs to be designed accordingly.

Using the appropriate update behavior can prevent your form from appearing broken simply because someone already exists in your Brevo database.

Test the Elementor-to-Brevo Connection

Never assume an integration works just because the PHP code has no visible errors.

Run a real test.

Submit a Test Lead

Open the published page and submit the Elementor form using a test email address.

Use realistic information:

• First name
• Last name
• Email
• Phone
• Company

Then check the form response.

Check Brevo

Log in to Brevo and open your contacts.

Search for the test email.

Confirm that:

• The contact exists.
• The email is correct.
• The first name is correct.
• Other attributes are mapped correctly.
• The contact appears in the intended list.

Testing both sides is important because a successful Elementor submission does not automatically mean Brevo accepted the API request.

Common Elementor and Brevo API Errors

API integrations usually fail for predictable reasons.

Invalid API Key

If the API key is missing, incorrect, revoked, or incorrectly passed, Brevo will reject the request.

Brevo requires the key in the api-key header.

Incorrect Attribute Names

Suppose your Brevo account has:

FNAME

but your request sends:

FIRST_NAME

The data may not map as expected.

Make sure your API attributes match the attributes configured in Brevo.

Wrong List ID

A valid API request can still fail if you provide an invalid list ID.

Always verify that the ID belongs to the intended Brevo list.

Invalid Email Address

Email validation should happen before sending the request.

There is no reason to send obviously invalid data to your marketing platform.

Security Best Practices

The most important security rule is simple:

Never expose your Brevo API key in frontend JavaScript or inside Elementor's visible form HTML.

The API request should be made server-side.

Protect API Credentials

Store sensitive credentials in a secure server-side location.

For larger WordPress projects, you may consider using environment variables or a secure configuration mechanism rather than hard-coding credentials directly into a theme file.

Validate Submitted Data

Don't blindly trust form input.

At minimum, validate the email address and sanitize values before sending them to an external API.

This protects both your WordPress website and your Brevo account from unnecessary malformed requests.

Troubleshooting Checklist

If the integration isn't working, go through this list:

1. Confirm Elementor Pro is active.
2. Confirm the Elementor form is actually submitting.
3. Check the form name used by your PHP condition.
4. Verify every Elementor field ID.
5. Verify Brevo attribute names.
6. Verify the Brevo API key.
7. Verify the API key is being sent in the api-key header.
8. Check the Brevo list ID.
9. Confirm the request uses JSON.
10. Check the WordPress/PHP error log.
11. Check the HTTP response returned by Brevo.
12. Test with a fresh email address.

Brevo's API returns structured JSON responses and errors, which can help identify whether the problem is authentication, validation, or the request itself.

When Should You Use a Custom Plugin?

For a simple website, a small custom integration may be sufficient.

But if you're building several websites or need advanced functionality, a dedicated WordPress plugin can be a better long-term solution.

For example, a custom plugin could provide:

• Brevo API key settings
• List selection
• Elementor form selection
• Field mapping
• Logging
• Retry handling
• API connection testing
• Multiple Brevo lists
• Custom attributes

Elementor itself provides an extensible Forms API and supports custom form actions, making deeper integrations possible.

Conclusion

Connecting an Elementor Form with the Brevo API can turn a basic WordPress contact form into a useful lead-generation automation system.

The key is understanding that the integration isn't simply about moving an email address from one place to another. Your website needs to collect the form data, authenticate with Brevo, format the API request correctly, map the fields to Brevo attributes, and handle the response.

Once configured correctly, a visitor can submit your Elementor form and have their information automatically sent to the appropriate Brevo contact list.

For a direct API connection, a server-side WordPress/PHP approach gives you the control needed to manage authentication, field mapping, validation, and duplicate contacts properly.

For additional technical details, you can refer to Elementor's Forms API documentation and Brevo's official API documentation.

Frequently Asked Questions

1. Can I connect Elementor Forms to Brevo without coding?

Yes, depending on your setup, you can use an automation platform or a third-party integration. Elementor also provides webhook functionality for sending form data to external services. However, a direct Brevo API integration may require server-side code because Brevo requires API authentication.

2. Do I need Elementor Pro for this integration?

For the Elementor Forms functionality and developer hooks used in this guide, Elementor Pro is the appropriate version. Elementor Pro provides the Forms API and advanced form actions required for custom integrations.

3. Where do I get my Brevo API key?

You can generate an API key from your Brevo account's SMTP & API settings. Brevo recommends treating the API key as confidential and storing it securely.

4. Can I add Elementor form submissions directly to a Brevo list?

Yes. Brevo's contact creation API supports the listIds parameter, allowing a newly created contact to be added to selected lists.

5. What happens if the contact already exists in Brevo?

You can configure the contact request to update an existing contact using Brevo's updateEnabled option. This can be useful when the same visitor submits your form more than once.

6. Is it safe to put the Brevo API key in Elementor JavaScript?

No. An API key should not be exposed in frontend code. Keep the credential server-side and send the API request from WordPress or another secure backend.

7. Can I send custom Elementor fields to Brevo?

Yes. Brevo supports contact attributes, provided the corresponding attributes exist in your Brevo account and the API payload uses the correct attribute names and data types.