Before you create a newsletter sign-up form on your site, you need to create an account on the MailChimp website. MailChimp is an email marketing platform that is used for creating email newsletters that people opt-in to receive from your website.
With most of our themes that offer custom styling for the MailChimp newsletter service, we demo the WordPress for MailChimp plugin which is what this theme uses.
For this tutorial, we are going to make this:
First, You Need the Plugin and an API key
- If you already have a MailChimp account, you can skip ahead, otherwise, you will need to visit the MailChimp website and create a user account.
- You will need to generate a MailChimp API key to enter into the plugin you will be using. How to generate API key.
- Install and activate the MailChimp for WordPress plugin.
Creating a Form
- Go to the
MailChimp for WP -> MailChimpmenu tab in the Admin area.
- Enter the generated API key to the API Key field and click Save Changes button.
- Once the API key is added and the changes saved, your list information will populate and show that you are Connected.
- Go to the
MailChimp for WP > Forms
- Enter a title for the form title field.
- After you enter your form title, you will see two boxes further below, one being the Form field which will be blank, the other is a preview of your form. To make this easier, we have some form code for you already:
In the field, we are going to copy and paste this code snippet which will give us our newsletter sign-up form:
<h3 style="text-align: center;">Newsletter</h3><p style="text-align: center;">Subscribe to our email newsletter for a weekly 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>
- Click the Save Changes button.
Adding the form to the site
The last step is to add your form to the front of your website. In our case, we will place it into the bottom area of our pages with a widget.
First Method – Using Shortcode
- Go to
MailChimp for WP -> Form
- Just below the form title field you will see the shortcode to copy
- After you copy this shortcode, go to
Appearance > Widgetsand then drag a Text Widget into the Bottom sidebar position.
- Paste the shortcode you copied into the text widget and save it.
Second Method – Using the Mailchimp Widget
- Go to
Appearance > Widgets
- Drag a Mailchimp Sign Up Form widget into the Bottom sidebar position
- Click Save.