If you use Elementor on your WordPress site, you have lots of ways to connect your Mailchimp account with the aim to collect email addresses of your visitors. If you use Elementor Pro, you can use the Form widget to create a form and connect the form with Mailchimp. Alternatively, you can also use an add-on to do the same thing. One of the add-ons you can use is JetEngine.
What is JetEngine?
JetEngine is a premium Elementor add-on developed by Crocoblock. JetEngine is actually an add-on that is designed to create custom fields and custom post types, much like Advanced Custom Fields (ACF). Even so, you can also use it to create forms thanks to its Forms module. You can use JetEngine to create a wide range of form types. From a complex form like a booking form to a simple form like an email opt-in form. In JetEngine, form is created in the backend. You can then style up the form via Elementor editor.
In case you are new to JetEngine and want to create a form and connect it to your Mailchimp account, here is how to do so.
Step 1: Create a Mailchimp API key
You need an API key to connect your Mailchimp account with JetEngine. To get one, visit the Mailchimp website and login with your account. Once logged in, visit your profile by clicking the profile picture on the bottom-left corner and select Profile.
On your profile page, click the Extras menu 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. Once the key is created, simply copy it from the table. You can also set the label of the newly created key to making it easier for you to identify it later.
Step 2: Create the form
Once done creating the new Mailchimp API key, you can start creating a new form with JetEngine. But first, make sure the Forms module is enabled. To do so, go to JetEngine -> JetEngine on your WordPress dashboard. On the Modules tab, make sure the Forms option is checked. Click the Save button to apply the change.
To start creating a new form, go to JetEngine -> Forms and click the Add New button on the top side.
Give your form a name and go to the Field Settings block to set the form fields. By default, your form has a field and a submit button. To add a new field, you can simply click the Add Field button. To edit an existing field, you can click the pencil icon on the associated field. In this example, we will edit the existing field and set the field type to email.
Set the Type to Text and Field Type to Email and make sure the Required option is checked. Click the Apply Changes button to apply the changes.
Again, you can click the Add Field button if you want to add more fields. To edit the submit button, you can click the pencil icon on the existing submit button (or click the Add Submit Button to add new one).
Switch to the Post-submit Actions block to set the form action. By default, the form action is set to Send Email. You can change it to Mailchimp. By default, the form action is set to Send Email. You can change it to Mailchimp. Click the pencil icon to edit the action.
Change the action type to MailChimp and enter the API key you have created on step 1 above and click the Validate API Key button.
Select a Mailchimp audience (formerly list) where you want to send the submissions to and set the field map on the Fields Map section. Click the Apply Changes button to apply the changes.
Once done creating the form, you can click the Publish button to publish it.
Once the form is published, create a new page and edit it with Elementor (sure, you can also edit an existing page). On the Elementor editor, add the Form widget from the LISTING ELEMENTS widgets block to the canvas area.
Go to the left panel and select the form you have just created on the Content block.
To style up the form, you can go to the Style tab on on the Elementor settings panel. You can set things like the typography (font family, font size, font style, and so on), background color, text color, and so on.
Until here, you have successfully connected your JetEngine with your Mailchimp account. Once you are done editing the page, you can click the PUBLISH button to publish it.
