How to Connect Elementor Form With Brevo API

 

Connecting an Elementor form to Brevo lets you move new leads into your email marketing system automatically. Instead of downloading form submissions and importing them manually, every valid contact can be added to a selected Brevo list as soon as the form is submitted.

In this guide, you will learn how to connect Elementor Form with Brevo API, map form fields, protect your API key, test the connection, and solve common errors. This method uses Elementor Pro and a small WordPress code snippet, giving you full control over your form integration.

Quick definition: Connecting Elementor Form with Brevo API means sending submitted form data from WordPress directly to Brevo through a secure server-to-server request. The integration can create or update a Brevo contact, assign it to a subscriber list, and transfer details such as name, email address, and phone number.

Why Connect Elementor Form With Brevo API

A direct Brevo integration improves your lead-generation workflow in several ways:

• New subscribers are collected automatically.
• Contacts can enter email automation workflows immediately.
• Lead information stays organized inside Brevo.
• You do not need to export and import CSV files.
• Existing contacts can be updated instead of duplicated.
• Different forms can send leads to different subscriber lists.

This setup is useful for newsletter forms, contact forms, quote requests, lead magnets, webinar registrations, and service enquiries.

Requirements Before Connecting Elementor Form With Brevo API

Before starting, make sure you have:

• A working WordPress website
• Elementor Pro with the Form widget
• An active Brevo account
• A Brevo API v3 key
• A Brevo contact list
• WordPress administrator access
• An active internet connection
• Access to wp-config.php

Elementor currently does not include Brevo as a built-in Actions After Submit option. Therefore, this tutorial uses Elementor Pro’s form-submission hook and Brevo’s official contacts API.

Never paste a private API key into page content, browser-side JavaScript, or a public code block.

How to Connect Elementor Form With Brevo API

1. Create a Brevo account and contact list

Create a Brevo account or sign in to your existing account.

Open Contacts and create a new list. Give it a clear name, such as:

Website Leads

Open the list and find its numeric list ID. You will add this ID to your WordPress configuration later.

2. Generate a Brevo API key

In your Brevo account:

1. Open SMTP & API.
2. Select the API Keys tab.
3. Click Generate a New API Key.
4. Enter a descriptive name, such as Elementor Website Integration.
5. Generate and copy the key.

Brevo displays a newly generated API key only once. Copy it immediately and store it securely. Treat your API key like a password and never share it publicly.

3. How to Connect Elementor Form With Brevo API Securely

Open your WordPress wp-config.php file and add the following lines above the comment that says:

That's all, stop editing! Happy publishing.

define( 'BREVO_API_KEY', 'xkeysib-REPLACE-WITH-YOUR-KEY' );
define( 'BREVO_LIST_ID', 2 );

Replace:

• xkeysib-REPLACE-WITH-YOUR-KEY with your real Brevo API key.
• 2 with the numeric ID of your Brevo contact list.

Storing the key in wp-config.php is safer than placing it directly inside a theme template or Elementor page.

4. Create the Elementor form

Edit your page with Elementor and add the Form widget.

Set the form name to:

Brevo Lead Form

Add the fields you need. For this example, use these exact field IDs:

Form field	Elementor Field ID
First Name	first_name
Last Name	last_name
Email	email
Phone	phone

To change a field ID:

1. Open the form field.
2. Select the Advanced tab.
3. Enter the required value in the ID field.

Make the email field required. You should also add a consent checkbox when visitors are subscribing to marketing emails.

5. Configure Actions After Submit

Open Actions After Submit in the Elementor Form widget.

Keep Collect Submissions enabled so WordPress stores a backup of each form entry. Elementor lets you access collected entries from WordPress Dashboard → Elementor → Submissions.

You can also keep Email enabled when you want the website owner to receive a notification.

The Brevo API connection will run separately through the PHP hook.

6. Add the Brevo API connection code

Add the following snippet to your child theme’s functions.php file or through a trusted code-snippet plugin:

add_action(
	'elementor_pro/forms/new_record',
	'wpag_send_elementor_contact_to_brevo',
	10,
	2
);

function wpag_send_elementor_contact_to_brevo( $record, $ajax_handler ) {
	$form_name = $record->get_form_settings( 'form_name' );

	// Run this integration only for the selected Elementor form.
	if ( 'Brevo Lead Form' !== $form_name ) {
		return;
	}

	$raw_fields = $record->get( 'fields' );
	$fields     = array();

	foreach ( $raw_fields as $field_id => $field ) {
		$fields[ $field_id ] = isset( $field['value'] )
			? $field['value']
			: '';
	}

	$email = sanitize_email( $fields['email'] ?? '' );

	if (
		! $email ||
		! defined( 'BREVO_API_KEY' ) ||
		! defined( 'BREVO_LIST_ID' )
	) {
		$ajax_handler->add_error_message(
			'The form could not be connected to our mailing system.'
		);

		return;
	}

	$attributes = array();

	if ( ! empty( $fields['first_name'] ) ) {
		$attributes['FNAME'] = sanitize_text_field(
			$fields['first_name']
		);
	}

	if ( ! empty( $fields['last_name'] ) ) {
		$attributes['LNAME'] = sanitize_text_field(
			$fields['last_name']
		);
	}

	if ( ! empty( $fields['phone'] ) ) {
		$attributes['SMS'] = preg_replace(
			'/[^\d+]/',
			'',
			$fields['phone']
		);
	}

	$response = wp_remote_post(
		'https://api.brevo.com/v3/contacts',
		array(
			'timeout' => 20,
			'headers' => array(
				'accept'       => 'application/json',
				'api-key'      => BREVO_API_KEY,
				'content-type' => 'application/json',
			),
			'body' => wp_json_encode(
				array(
					'email'         => $email,
					'attributes'    => $attributes,
					'listIds'       => array(
						(int) BREVO_LIST_ID,
					),
					'updateEnabled' => true,
				)
			),
		)
	);

	if ( is_wp_error( $response ) ) {
		error_log(
			'Brevo API error: ' .
			$response->get_error_message()
		);

		$ajax_handler->add_error_message(
			'Your form was received, but the contact could not be synchronized.'
		);

		return;
	}

	$status_code = wp_remote_retrieve_response_code(
		$response
	);

	if ( $status_code < 200 || $status_code >= 300 ) {
		error_log(
			'Brevo API response: ' .
			wp_remote_retrieve_body( $response )
		);

		$ajax_handler->add_error_message(
			'Your form was received, but the contact could not be synchronized.'
		);
	}
}

Brevo’s official contact endpoint is:

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

It accepts contact information, attributes, contact list IDs, and an option to update an existing contact. Attribute names such as FNAME, LNAME, and SMS must exist in your Brevo account.

7. Update and publish the page

Save or update your Elementor page.

Clear the following caches before testing:

• WordPress cache
• Hosting or server cache
• CDN cache
• Browser cache

Your Elementor form should now send valid submissions directly to your Brevo contacts list.

How to Test the Brevo Integration

Submit the live form using a test email address that is not already in your Brevo list.

Check the following:

1. Elementor displays a successful submission message.
2. The entry appears under Elementor → Submissions.
3. The new contact appears under Brevo → Contacts.
4. The contact is assigned to the correct list.
5. First name, last name, email, and phone values appear correctly.
6. Any welcome automation or confirmation email starts as expected.

Test the form once with a new email address and then submit it again using the same email address.

The second submission should update the existing contact because the code uses Brevo’s updateEnabled option.

Common Problems and Their Solutions

Problem	Likely cause	Practical solution
Invalid API key	Incorrect, incomplete, inactive, or SMTP key	Generate a new API v3 key and copy it without spaces
Subscriber not added	Incorrect form name or list ID	Confirm the form name and numeric Brevo list ID
Form submission failed	PHP error or blocked API request	Check the WordPress debug log and hosting firewall
Email not received	Sender or automation is not configured	Verify the sender, template, automation trigger, and Brevo logs
Contact fields are empty	Elementor field IDs do not match the code	Use the exact IDs shown in the tutorial
Phone number is rejected	The number has an invalid format	Use an international number with its country code
Changes do not appear	A cached version of the page is loading	Clear WordPress, server, browser, and CDN caches
Integration works after disabling a plugin	A plugin conflict is blocking the request	Reactivate plugins individually to find the conflict

Brevo requires an API v3 key rather than an SMTP key. An incomplete, deleted, inactive, or incorrectly copied key can prevent the connection from working.

If your Elementor form isn't sending emails before integrating Brevo, read our complete guide: How to Fix Elementor Form Not Sending Email.

Best Practices for Elementor and Brevo

• Keep the Brevo API key outside public theme files.
• Never expose the key in JavaScript or frontend HTML.
• Create a separate API key for each website.
• Add a clear marketing consent checkbox.
• Use double opt-in when required for your audience.
• Organize subscribers into relevant Brevo lists.
• Keep Elementor, Elementor Pro, and WordPress updated.
• Keep Elementor submissions temporarily as a backup.
• Monitor Brevo contacts and WordPress error logs.
• Test the form after updates, migrations, or server changes.
• Revoke and replace an API key immediately if it becomes exposed.

Elementor-to-Brevo Connection Options

Integration method	Coding required	Best use
Direct Brevo API	Small PHP snippet	Full control with fewer third-party dependencies
Webhook and automation platform	Low or no code	Connecting the form to several applications
Brevo-created signup form	No code	Basic newsletter subscription forms

The direct API method is a good option when you want a lightweight connection and complete control over field mapping.

Frequently Asked Questions

The following questions use a clear, schema-friendly format. Structured data may help search engines understand the content, but Google does not guarantee that correctly marked-up content will appear as a rich result.

Is Brevo free?

Brevo offers a Free plan. However, sending limits and available features may change, so check the current Brevo pricing page before planning a large email campaign. Brevo currently states that its Free plan can send up to 300 emails per day after the account is approved for sending.

Does Elementor Free support this Brevo integration?

No. This tutorial uses the Elementor Pro Form widget and its form-submission hook. Elementor Free does not include the Elementor Pro Form widget.

Where can I find the Brevo API key?

Sign in to Brevo and open SMTP & API → API Keys. Generate a new API v3 key, copy it immediately, and store it securely.

Why is my Elementor form not sending contacts to Brevo?

The most common causes are an incorrect API key, wrong contact list ID, mismatched Elementor field IDs, a different form name, or a hosting firewall blocking outgoing API requests.

Can I connect multiple Elementor forms to Brevo?

Yes. Give each form a unique name and route it to a different Brevo contact list. You can add more form-name conditions to the PHP function or create a clear form-to-list mapping.

How do I test the integration?

Submit the live form using a new email address. Confirm that Elementor records the submission and Brevo creates the contact in the correct subscriber list with the expected field values.

What is the safest way to connect Elementor Form With Brevo API?

Store the API key in wp-config.php and send form data through a server-side PHP request. Do not place the API key in Elementor HTML widgets, frontend scripts, screenshots, public repositories, or tutorial examples.

Conclusion

A direct API connection removes the need for manual lead importing and creates a reliable path from your WordPress form to your Brevo subscriber list.

Once the API key, contact list ID, form name, and field IDs are configured, test both new and existing contacts. You should also monitor your submissions and Brevo contact activity regularly.

By following this guide on how to connect Elementor Form with Brevo API, you can automate lead collection, improve your email marketing workflow, and keep subscriber information organized.