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.
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?
Table of Contents
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;
- A Sendinblue account.
- Elementor Pro installed on your website.
- 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.
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.
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.
Click on SMTP and API. You can access the Sendinblue API page directly here.
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.
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.
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.
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.
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.
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.
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.