Mailchimp Step 5: Using Elementor Pro Form to Create a Newsletter Sign Up Form
This tutorial covers the steps to set up the WordPress Easy Forms plugin to create an Email Alerts mailing list through Mailchimp.
The steps are for this tutorial are
- Navigate to your website and login to the site
- Navigate to Elementor, Setting, Integration and the mailchimp API section make sure the API key is filled in. If not this link will explain how to find and add your API Key
- Navigate to the page you want to add a form to and edit it with Elementor
- Drag over a Heading widget and label the section header for the Newsletter
- In the Elementor Widget area in search bar area type in mail and use the Form widget that will become available
- Drag and drop it under the Heading widget you had created earlier
- Rename Name to First Name and replace the place holder field as well
- Duplicate the first field
- Rename First to Last so that it now reads Last Name then copy and past Last Name into the place holder field
- Delete Message by clicking on the X
- Add new item Acceptance
- Name Acceptance field Authorization, make it required, then add your authorization text.
- Change send button label to Sign Up and center the button
- Go to Action After Submit and add Mailchimp
- Go to email and change email information
- Next setup Mailchimp
- Select Audience
- Select Group
- Make sure double opt in is selected
- Map the fields to the proper form field
- Next Additional Options make sure caution messages is turned on and change any language to reflect what you want to use
- Make sure all required fields are set to required
- Go back to Form Field section and open each field and make sure the required flag is turned on for all fields that you want to require it be filled out before the form is submitted.
- To control the font size of the Authorization text so its smaller than the rest of the text click on the form to open the widget’s editor Click on Advanced, in Class Classes add ngops-newsletter then click on Custom CSS and add CSS code
- Update page
CSS code
.ngops-newsletter label {
font-size: 14px;
}
Mailchimp
Menu