Written by Editorial Team on June 5, 2020

How To Integrate AWeber with Elementor?

The Elementor page builder is one of the most popular WordPress builders in the market. With over 5 million active installs, Elementor is used by both professionals and WordPress enthusiasts. On the other hand, AWeber is a well-renown email marketing solution for affiliate marketers, bloggers and business owners.

In this tutorial, you will learn how to integrate AWeber with WordPress. To be exact, you will learn the exact steps to integrate AWeber with Elementor Free and Elementor Pro. Before this, there was no direct integration between AWeber and Elementor.

There are two ways you can integrate AWeber with Elementor.

Plugin Method

Integration via AWeber for WordPress plugin

This option is best for users using the free Elementor version with drag and drop builder anywhere within your site.

Elementor Pro

Integration by adding AWeber into Elementor pro plugin

This option is best for website developers and Elementor Pro users. Easily add AWeber forms directly using Elementor Pro.

What is AWeber for WordPress plugin?

The AWeber for WordPress plugin allows you to easily drag and drop forms that you have created in your AWeber account onto your WordPress page. 

In order to achieve this, all you need is your AWeber account and a completed sign up form. This is a great way to provide your website visitors with a way to join your email list. Since Elementor Free is a free plugin, it doesn't come with direct integration with AWeber.

AWeber for WordPress Plugin
~AWeber for WordPress plugin

Therefore, you would need to connect AWeber to Elementor using AWeber WordPress plugin. Once that is done, you can now include one or more AWeber forms on your WordPress page/post.

Don't forget that in order to accomplish this, you must have both plugins installed. If you have not already done so, please take the time to install and connect the AWeber for WordPress plugin

How to add an AWeber form into Elementor free plugin?

Here's how you can connect an AWeber form into Elementor Free.

The first step is to install AWeber plugin to your WordPress website. If you have not created an account with AWeber, you can do it here. After registering, you can try it for 30-days free without any credit card.

Start by editing the page with Elementor visual builder. You'll find an AWeber widget in the left-hand sidebar menu. Drag this widget into your page where you would like it displayed.

Adding AWeber Forms into Elementor Free
~Adding AWeber forms into Elementor Free

Elementor makes it easy to drag and drop the AWeber form to any location of your choice without using any codes.

Upon placing your widget in the desired location, you'll find an option to select the list and sign up form (that you had previously created in AWeber) that you would like displayed on your page.

Configuring AWeber lists with Elementor free
~Configuring AWeber lists with Elementor Free

Please Note: Your sign up forms will have a prefix of "Form -", while any sign up forms that you have configured in a Split Test will have a prefix of "Split -".

Finally, you will see your AWeber form beautifully embedded on the page. Once you publish the post or page, the form will load automatically.

AWeber Form display on Elementor Free
~AWeber Form display on Elementor Free

Did you know?

The AWeber for WordPress plugin is a decent tool to build an email list with a handful of ready-made designs. Thrive Leads is an excellent plugin that comes with over 200+ ready-made templates to help you put email list building on automation.

How to integrate AWeber with Elementor Pro?

Prior to this, adding AWeber into Elementor Pro can be challenging as there is no direct integration. In order to solve this, most WordPress users use third party plugins such as Thrive Leads or OptinMonster to manage the integration between AWeber and Elementor Pro.

This is be frustrating at times to get everything working right.

Integrate AWeber with Elementor Pro
~Integrate AWeber with Elementor Pro
Great news! You can now easily integrate AWeber to Elementor without any crazy codes.

Follow these steps to integrate AWeber directly to Elementor Pro inn just a few clicks.

You need an active Elementor Pro account (which you can get it here). After you create your Elementor Pro account, you will have access to the additional Elementor widgets that are only included in the Pro version.

Click and drag the Form widget from the menu options on the left-hand side of the page to anywhere on the page.

Integrating AWeber with Elementor Pro
~Integrating AWeber with Elementor Pro

Next, you can check and modify any fields under the "Form Fields" tab. Here, you can also adjust the styling of the form.

Typically, we recommend going with just the Name and/or Email fields to maximize the chance of conversion.

AWeber Form Fields in Elementor Pro
~AWeber Form Fields in Elementor Pro

Once the form is designed how you would like, click the "Actions After Submit" tab.

Setting up AWeber forms properly
~Setting up AWeber forms properly

If you're sending a message through Elementor after the subscriber submits their information, then you do not have to remove the "Email" selection from this tab. Simply select AWeber from the list of available options.

Actions After Submit for AWeber Forms
~Actions After Submit for AWeber Forms

Once you do this, a new "AWeber" tab will appear. Click this tab.

AWeber on Elementor Pro
~AWeber on Elementor Pro

Here, choose the list the email subscribers will be imported to once the sign up is successful.

Select lists for integration with AWeber
~Select lists for integration with AWeber

We also recommend you to add tags (using the "Tags" field). You can add multiple tags separated by commas.

Add any suitable AWeber tags with Elementor Pro
~Add any suitable AWeber tags with Elementor Pro

Last but not least, you need to map all of the Elementor fields with the corresponding field in AWeber. You must at least map the email field for the information to be sent to AWeber. If you have any custom fields, you can map those as well.

Always double check this part to ensure that the integration between both AWeber and Elementor are correct.

Mapping AWeber fields with Elementor Pro forms
~Mapping AWeber fields with Elementor Pro forms

The final step is to publish your changes when you're finished. And that's it!

Summary: Integrate AWeber with website

You had successfully integrated AWeber with Elementor. Now, subscribers who visit your WordPress site that is built with Elementor will have the option to subscribe to your AWeber list!

Are you ready to integrate AWeber with website? Leave a comment and tell us what you think!

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts