If you have a WordPress site and use Elementor to style up some pages or even the entire website, you might want to give JetEngine a try. It is an Elementor add-on to allow you to create and add dynamic custom content types such as custom fields, custom post types, and custom taxonomies. In addition, you can also use JetEngine as a form builder plugin thanks to its Forms module. The module allows you to create a wide range of forms. From a simple contact form, an email opt-in form, to a complex front-end post submission.

In this article, we will show you to use JetEngine to create an email opt-in form to collect email addresses. You can connect your form with an email marketing tool such as Mailchimp, ActiveCampaign, and GetRensponse.

For your information, JetEngine is a paid plugin. You can get it for $26 per year. This plugin is developed by Crocoblock so you can get it on the official website of Crocoblock.

Creating an email opt-in form with JetEngine

Before getting started, make sure you have installed and activated both Elementor and JetEngine (you can use JetEngine on Elementor free). To connect your form with your Mailchimp account, you need a Mailchimp API key.

Step 1: Getting the Mailchimp API key

To get a Mailchimp API, visit the Mailchimp website and login with your account. Once logged in, go to your profile by clicking your icon profile and select Profile.

Next, click the Extras tab and select API keys.

Scroll down to the Your API keys section and click the Create A Key button to create a new API key.

Copy the generated API key. You can temporarily save it to a text editor like Notepad or Gedit.

Step 2: Creating the form

Login to your WordPress dashboard and go to JetEngine -> JetEngine. Make sure the Forms module is enabled.

After making sure that the Forms module is enabled, go to JetEngine -> Forms. Click the Add New button to create a new form.

Give your form a name. In this example, we will create the form from scratch so you can remove the existing default fields by clicking the X icon on each field.

We will create an email opt-in form that consists of 3 fields:

• First name
• Last name
• Email address

To add a new field, you can click the Add Field button.

• First name field

Add a new field by clicking the Add Field button as we have just mentioned above. Click the pencil icon to configure the field.

Set the Type option to Text and Field Type to Text as well. Also set the field name. If you want to set this field as a required field, make sure the Required option is checked. Click the Apply Changes button to save the field configuration.

• Last name field

Add a new field by clicking the Add Field button and click the pencil icon to configure the field. Set the Type option to Text and Field Type to Text as well. Also set the field name. If you want to set this field as a required field, make sure the Required option is checked. Don’t forget to click the Apply Changes button to save the configuration.

• Email address field

Add a new field by clicking the Add Field button and click the pencil icon to configure the field. Set the Type option to Text and Field Type to Email. Also set the form name and make sure the Required option is checked. Click the Apply Changes button to save the configuration.

Once done with the fields, add a submit button by clicking the Add Submit Button button.

Same as fields, you can also click the pencil icon to configure the submit button. You can set the button label. Don’t forget to click the Apply Changes button.

Next, switch to the Post-submit Actions / Notifications Settings section to set the form action. By default, the form action is set to Send Email. You can click the pencil icon to change it.

Set the Type option to Mailchimp and paste the API key you have just created on step 1 above. Click the Validate API Key button to validate the API key. Once validated, you can select a Mailchimp audience. To set the fields mapping, you can go to the Fields Map section. Don’t forget to click the Apply Changes button.

Click the Publish button to publish the form.

Step 3: Adding the form to an Elementor page

After creating the opt-in on the JetEngine backend, you can then add it to an Elementor page or template. If you are new to Elementor, you can read this guide to learn how to use Elementor.

Create a new page or template and edit it with Elementor. On the Elementor editor, add the Form widget from the LISTING ELEMENTS block to the canvas area.

Go to the left panel. Select the form you have just created on the Select form dropdown menu under the Content block. You can also set fields layout if you want to.

Switch to the Style tab to style up the form. You can set things like the typography of the form labels, the typography of the submit button label, background color, and so on.

Publish/update your page/template once you are done editing it. You can test your email opt-in form by entering your email address.

The bottom line

JetEngine is an Elementor that allows you to create and add custom content types like custom fields, custom post types, custom taxonomies, and so on. It also comes with a Forms module that allows you to create a wide range of forms, including a user registration form and email opt-on as we have just covered. JetEngine is a great plugin to unlock the power of both WordPress and Elementor.