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

  1. Navigate to your website and login to the site
  2. 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
  3. Navigate to the page you want to add a form to and edit it with Elementor
  4. Drag over a Heading widget and label the section header for the Newsletter
  5.  In the Elementor Widget area in search bar area type in mail and use the Form widget that will become available
  6. Drag and drop it under the Heading widget you had created earlier
  7. Rename Name to First Name and replace the place holder field as well
  8. Duplicate the first field
  9. Rename First to Last so that it now reads Last Name then copy and past Last Name into the place holder field
  10. Delete Message by clicking on the X
  11. Add new item Acceptance
  12. Name Acceptance field Authorization, make it required, then add your authorization text.
  13. Change send button label to Sign Up and center the button
  14. Go to Action After Submit and add Mailchimp
  15. Go to email and change email information
  16. Next setup Mailchimp
  17. Select Audience
  18. Select Group
  19. Make sure double opt in is selected
  20. Map the fields to the proper form field
  21. Next Additional Options make sure caution messages is turned on and change any language to reflect what you want to use
  22. Make sure all required fields are set to required
  23. 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.
  24. 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
  25. Update page

CSS code

.ngops-newsletter label {
font-size: 14px;
}

Font Resize
Contrast