How to Integrate Sendinblue with Elementor Forms

In this article, you will learn how to integrate Sendinblue with Elementor forms for free.

Sendinblue is one of the most affordable email marketing services out there. This software lets you send emails, SMS, and build from simple to advanced email templates at a fraction of the cost when compared to other Email service providers in the market.

How to Integrate Sendinblue with Elementor Forms

One problem that comes with using Sendinblue is its lack of integration with some important services.

Elementor is a WordPress page builder with over 5 million downloads on the WordPress plugin repository.

If you have the Elementor pro version, you do not need a separate opt-in form plugin that integrates with Sendinblue.

Elementor pro comes with a form widget that can be used to create contact forms, email opt-in forms, pop-ups, product enquiry forms etc.

The Elementor Pro will cost you $49 per year for a single licence while the cheapest opt-in form plugin is priced from $69. So it’s smarter to have one plugin that can solve multiple problems right?

Why you Should Use Elementor Forms with Sendinblue

Most email marketing service providers spend time making sure that their delivery rate is top-notch and brainstorming for new features to include. They pay less attention to what their opt-in forms look like.

I have never seen an email marketing service provider with great opt-in forms.

On the bright side, Elementor has beautiful Pop-up templates that you can easily import and integrate with Sendinblue. There are many opt-in formats and templates to choose from. Even if you are not great with designs, there’s a nice template that you can import instantly.

If you are good with designs, there is no limitation to what you can design with Elementor.

When not to use Elementor Form with Sendinblue

Elementor form is not an opt-in plugin per se. Hence, its features are a bit limited.

If you want advance reporting of how your opt-in form is performing, you cannot get that with Elementor. You cannot also get A/B testing, Geolocation targeting, and onsite retargeting.

How to Integrate Sendinblue with Elementor Forms

For this tutorial, we will use a plugin called Sendinblue integration for Elementor forms by Webtica. This plugin does one job and it does it perfectly well.

Sendinblue integration for Elementor form helps you to connect Elementor to your Sendinblue account through an API.

You will need the following for this to work;

  1. A Sendinblue account.
  2. Elementor Pro installed on your website.
  3. Sendinblue Integration for Elementor plugin.

I assume that you already have a Sendinblue account and Elementor pro installed on your website. So we will skip those parts and go to the main thing.

Step 1: Install the Sendinblue Integration for Elementor Plugin

Go to the plugin section of your website and search for “Integration for Elementor Forms” without the quotes.

Sendinblue Integration for elementor forms

Install and activate the plugin on your website.

After activation, go to your Installed plugins page and locate the Sendinblue Integration for Elementor plugin, click on settings.

sendinblue integration for elementor forms settings

Step 2: Sign in to Sendinblue and Copy your  API Key

The Sendinblue API key connects third party plugins or software to your Sendinblue account.

Sign in to your Sendinblue account.

Click on the drop-down icon under the account name to reveal the account settings.

sendinblue profile settings

Click on SMTP and API. You can access the Sendinblue API page directly here.

Sendinblue SMTP Settings

Select create a new API key.

Give the API key a simple name. You can name it “Elementor forms connect”.

Once you are done with creating the API key, copy it somewhere safe as you may need it for more than one purpose or at different intervals.

Step 3: Paste the API key Inside the Sendinblue Integration Plugin

Go back to your website and paste the code you just copied inside the Sendinblue Integration for Elementor plugin and save the settings.

Integration for sendiblue elementor API

Step 4: Drag and drop Elementor Form Widget

While designing your web page or pop up with Elementor, drag and drop the form element into your design.

elementor form drag and drop

The form widget/element is only available to Elementor pro users.

Step 5: Choose Form Fields

When you drag and drop the elementor form widget, three fields will appear; the Name, Email and Message fields.

I’m designing an opt-in form so I do not need the message field.

I will delete the message field by clicking the cancel icon.

elementor cancel icon

If you need more fields for what you are designing, click the add item button. 

Step 6: Setup actions after submit

This is where you will enable the Sendinblue elementor integration.

Go to the “Actions after submit” tab and click it.

Click the plus icon and select Sendinblue from the list of options.

Elementor forms sendinblue selection

The Sendinblue widget will appear below immediately after you do this.

Step 7: Configure the Sendinblue widget

Copy and paste your Sendinblue API key into the Sendinblue API key tab.

Enable double opt-in if you want. You must have created a Double opt-in template in your Sendinblue account.

If you enabled double opt-in, go to Sendinblue and copy the double opt-in template ID. You can access all your Sendinblue templates here.

See the image below for what the template ID looks like.

Sendinblue template ID

In the double opt-in redirect URL tab, enter the URL you want your visitors to land after they click on the Sendinblue double opt-in link in their emails.

Sendinblue allows you to create multiple lists in your account. You need to enter the ID of the list where you want to save the subscribers’ details.

You can find all your Sendinblue lists here. Copy the ID and paste into the appropriate tab.

Now, you need to map each field on the form correctly.

I have only two fields on my form; the Name and Email field.

The email field is mapped as “email” by default unless you changed it. Type in email in small letters.

If you are not sure what the field ID is, go to the form field tab, click on any field you want to map and select advance.

Elementor form ID

You can change the field ID to anything you want but make sure you put the same field ID in the appropriate tab while mapping.

Click on publish if you are satisfied with your form.

Step 8: Test your Form

You definitely need to test your form to confirm if everything goes well. Open the page containing your form, fill it out and check your Sendinblue account to see if the contacts are in there.

The free version of this plugin allows you to map only the email and name field, if you want to map unlimited attributes, you need to get the pro version of the plugin. You can also automatically add users to one or more lists based on checkboxes and dropdowns. This helps you to segment your lists.

The premium version costs 49€ per year for unlimited installs.

Do you have issues integrating Sendinblue to Elementor forms? Drop your comments in the comment section. Let me help you out.

Share

Similar Posts

Leave a Reply

You have to agree to the comment policy.