Building Email Opt-in Forms with Elementor PRO & MailOptin
You might have heard people say countless number of times that email list building is dead. But the money is still in the list and that’s why large, medium and even small business still build email list.
Do you know visitors to your site are likely to opt-in to your email list if you offer them something of value and interest? And if your site happens to be ecommerce, such visitors may not be ready to buy just yet; they probably need more convincing to make a buying decision. If you do not have an opt-in or lead capture form on your site, how then do you capture them for further communicate? Never underestimate the importance of building email list for your business.
In this tutorial, I will show us how to customize and embed an email optin form to WordPress posts and pages using the form element in Elementor PRO and afterward, connect the form to your favorite email service provider(ESP) such as Aweber, Campaign Monitor, MailChimp, Sendy, Mailerlite via the free MailOptin plugin.
Connecting MailOptin to your Email Service Provider
Next, go to the
Connections settings page where you will connect your email service provider(s) by either clicking the sidebar menu link or top menu tabs. Let's see how to connect to some ESP in MailOptin.
Like I aforementioned, Elementor form element has MailChimp integration. But if you prefer to capture leads via MailOptin, enter your API key in the MailChimp Connection metabox and save.
Sendy is a self-hosted email newsletter application that lets you send emails via Amazon Simple Email Service (SES). It is popular among a lot of small businesses and internet marketer because it's cheaper compare to cloud providers like MailChimp.
To connect Sendy to MailOptin, go to the Sendy Connection section, enter the URL of your Sendy installation URL, your API key which you can get from
http://your-installation-domain-name.com/settings, name and ID of your email lists.
Not sure where to find your List ID and name? Log into your Sendy installation and select the brand your email list is in.
Click on "View all lists" sidebar menu to reveal email lists under your selected brand. There you will find your list IDs and name.
Constant Contact Connection
Go to the ConstantContact connection and click the “Authorize” button.
You will then be redirected to login and allow MailOptin access to your Constant Contact account.
After which, you will then be redirected back to MailOptin settings page with the button color now green indicating successful connection.
Similar to Constant Contact, click the "Authorize" button at Aweber connection where you will be redirected to login and allow MailOptin access to your Aweber account.
After successful authorization, you will be redirected back to MailOptin settings page.
Similar to MailChimp, connecting MailerLite is easy as pasting your account API key to it form text field and save.
If you use Campaign Monitor and others not I didn't mention, refer to MailOptin documentation.
Having connected your email service provider to MailOptin, up next is building the email optin forms with Elementor Form element.
Building an Email Opt-In Form Connected to Your Email Service Provider
Edit the post, page or custom post type you wish to include an optin form to with Elementor.
Drag and drop the Form element to the section or area of your site you want the optin form to be shown.
Remove the default
Message textarea field leaving just the name and email fields. We don't need it because we are not building a contact or feedback form.
Your optin form should now look similar to the screenshot below.
In order for all captured leads to be sent to your email service provider, go to
Actions After Submit section and select MailOptin.
Select your MailOptin connected email service and list.
Finally, save the changes.
And remember to use the ** Style** and Advanced tabs to customize the optin form to your heart content.
If you haven't upgraded to Elementor PRO, I implore you to do so now, if for no reason but for the rad and powerful form element.
If you have any question or contribution, let us know in the comment section.