Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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.

Note that Elementor PRO has built-in integration with MailChimp and MailPoet email services. MailOptin is required if your email service provider is none of the mentioned two.

Connecting MailOptin to your Email Service Provider

Before I show us how to customize and embed optin forms to your website using Elementor, you need to install and activate MailOptin plugin. Go ahead and do that now.

MailOptin WordPress Plugin

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.

MailChimp Connection

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.

enter image description here

Sendy Connection

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.

Sendy connection settings

Not sure where to find your List ID and name? Log into your Sendy installation and select the brand your email list is in.

Sendy dashboard

Click on "View all lists" sidebar menu to reveal email lists under your selected brand. There you will find your list IDs and name.

Sendy email listing

Constant Contact Connection

Go to the ConstantContact connection and click the “Authorize” button.

Constant contact settings

You will then be redirected to login and allow MailOptin access to your Constant Contact account.

Constant Contact authorization page

After which, you will then be redirected back to MailOptin settings page with the button color now green indicating successful connection.

Constant Contact connection successful

Aweber 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.

Aweber connection settings

Aweber authorization page

After successful authorization, you will be redirected back to MailOptin settings page.

Aweber connection successful

MailerLite Connection

Similar to MailChimp, connecting MailerLite is easy as pasting your account API key to it form text field and save.

MailerLite connection settings

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.

Edit page with Elementor

Drag and drop the Form element to the section or area of your site you want the optin form to be shown.

Drag and drop elementor's form widget

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.

Conclusion

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.

The fine folks at MailOptin gave us a 25% discount coupon off their PRO version. Use the coupon ELEMENTOR on checkout.

If you have any question or contribution, let us know in the comment section.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.