MailChimp Newsletter Widget

Before you can take advantage of the built-in styling for a newsletter widget (plugin) called Mailchimp for WP, you need to create an account on the MailChimp website. We will let you handle that part before continuing on with our tutorial.

We are going to make this:

Creating a Form

1. Navigate to the MailChimp for WP -> Forms menu.
2. Enter the form title to the What is the name of this form? field. Check the box next to the name of the created email list.
3. Click the Add New Form button.
4. You will see the HTML editor for editing the subscription form shown further down the page. You can add additional form fields, text and other HTML tags. If you want to use the form like on the demo site, enter this HTML code:

<h3 style="text-align: center;">Get My Newsletter</h3><p style="text-align: center;">Using the Mailchimp for WordPress plugin, you can subscribe to my email newsletter for a look at the top stories in travel, design and photography.</p>
<div class="natured-newsletter-form">
  <div class="natured-newsletter-form-wrap">
  <input type="text" name="NAME" placeholder="Your name" required />
  <input type="email" name="EMAIL" placeholder="Your email address" required />
  <input type="submit" value="Sign up" />
  </div>
</div>

Using the Mailchimp Widget

For this tutorial, we will add it using a widget like the live demo site shows.

1. Go to Appearance > Widgets.
2. Drag a Mailchimp Sign-up Form widget into the sidebar position of choice (we recommend a Bottom sidebar position).
3. Click the Save button

Using the Mailchimp Shortcode

For this tutorial, we will add our newsletter form with the Mailchimp shortcode. For this, we will use the Block editor method to add the shortcode.

1. Navigate to the MailChimp for WP -> Forms menu.
2. At the bottom of the forms page, copy & paste the shortcode (yours might have a different id number).
3. Open a page or post and using a shortcode block, paste your Mailchimp shortcode into it
   
4. Click Publish or Update