Setting up Subscribe form

Mailchimp is a marketing automation platform and an email marketing service, you can import, manage contacts easily.

Newsbeat integrates Mailchimp to your site using popular plugin Mailchimp for WordPress, allow visitors subscribe to your newsletter. To enable this feature, Mailchimp for WordPress is required to be installed and activated.

Step 1: Setting up Mailchimp.

From Backend Admin side menu, navigate to MailChimp for WP and click Get your API key link to get your API for integration, if you are new to MailChimp, you are required to create a new account.

After having API key, go back to your site admin backend and put API key to text field as above figure, then hit save changes to update.

For more information checkout: https://mailchimp.com/help/getting-started-with-mailchimp/

If you are familiar to MailChimp, skip to step 2.

Now go back to your mailchimp account to create audience called Weekly Newsletter so we can tell MailChimp for WordPress where subscribed emails will be added to:

After done creating audience, you can also import contacts or add a subscriber manually. Alright, now go back to your MailChimp for WP setting page then refresh and update MailChimp lists.

Step 2: Creating MailChimp Form.

Here’s a preview:

If you start with demo content from Newsbeat, subscribe form will be installed automatically for you. If you start with fresh form, you can customize the following templates we made for our demos:

Demo default:

<div class="main-subscribe-form" style="max-width: 660px; margin-left: auto; margin-right: auto;">
	<p>Subscribe to our email newsletter for useful tips and valuable resources, sent out every Tuesday.</p>
	<div class="input-group">
		<input type="email" name="email" placeholder="Your email address" class="form-control" required>
		<span class="input-group-btn">
			<button type="submit" class="btn btn-primary"><i class="ti__send"></i></button>
		</span>
	</div>
	<br><p><label><input name="AGREE_TO_TERMS" type="checkbox" value="1" required=""> I have read and agree to the <a href="#" target="_blank" rel="noopener noreferrer">terms & conditions</a></label></p>
</div>

Demo Newspaper:

<div class="main-subscribe-form">
  <h3>Subscribe to The New York Times</h3>
	<p>Subscribe to our email newsletter for useful tips and valuable resources, sent out every Tuesday.</p>
	<div class="input-group">
      <input type="email" name="EMAIL" placeholder="Your email address..." class="form-control" required >
      <span class="input-group-btn">
        <input type="submit" value="Sign up" class="btn btn-primary"/>
      </span>
  	</div>
</div>

Custom CSS:

.main-subscribe-form{
	padding: 30px;
	max-width: 720px;
	margin: 30px auto;
	box-shadow: 0px 5px 45px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	border-top: 3px solid #cfd8dc;
}
.main-subscribe-form [type=submit]{
	min-width: 120px !important;
}

custom css for styling can be placed in Customizer -> Styling -> Additional CSS or append directly to MailChimp form content (you must put custom css inside <style>your_custom_css</style> ).

After customizing the form, switch to tab Settings & Message to finish your configuration.

Alright we almost done.

Step 3: enable Subscribe form.

Navigate to Customizer -> General Settings -> General -> Subscribe form to enable and specify your form.

And final result:

Subscribe form can be freely placed anywhere you want with shortcode. If you want to place it in sidebar, use a widget!

In demo Newspaper, Subscribe form is displayed right after post content not above site footer as demo default because we placed subscribe form shortcode to Customizer -> Ads Manager -> After single post