MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add a newsletter sign-up form widget to Rosemary

With the help of the Mailchimp for WordPress plugin, we can add a beautiful and functional newsletter sign-up form to Rosemary. 

In order to add a MailChimp newsletter sign-up form widget to your sidebar, you can follow the instructions below. We'll need to create a MailChimp Account, install the necessary plugin, and then set up your newsletter widget. 




1 ) SIGN-UP FOR MAILCHIMP

First, please ensure you have signed up and created an account with MailChimp ( https://mailchimp.com ). 

The first step you'll want to do is to create an "Audience" within your MailChimp account. This is where all of your subscribers' information will be kept. 

To create a MailChimp Audience:  Log into your MailChimp account > In the top menu area, click "Audience" > Click the "Current audience" drop-down > Click the "View audiences" option > and click the "Create Audience" button. Fill in the requested information like List name & the email address you will be sending your newsletter from, etc. > finalize creating your Audience. 

Next you will need to have your MailChimp account generate a unique "API Key" number. This API Key is used to link your MailChimp account to your WordPress "MailChimp for WordPress" plugin which is collecting your newsletter sign-ups.

To find your MailChimp API Key: 
Log into your MailChimp account > Your Account Page > Extras > API Keys > Create a key.


2 ) INSTALL THE PLUGIN

Next, you'll need to install the MailChimp for WordPress plugin onto your WordPress.

Installing the Mailchimp for WordPress plugin:
Log into your WordPress Dashboard > Plugins > Add New > Search for term "MailChimp for WordPress" > Install Now > Activate Plugin.

Once installed, navigate to the plugin's Settings page.  Here, you'll want to copy and paste your MailChimp account's API Key into the form and click "Save changes".


3 ) SETTING UP THE NEWSLETTER WIDGET

To customize your newsletter form, you can navigate to WP Dashboard > MC4WP > Forms.  On this screen, you can determine just how your newsletter form displays.

Copy and paste the following HTML code into the box on this page:

<p>
    <label>Subscribe to my Newsletter</label>
    <input type="email" id="mc4wp_email" name="EMAIL" placeholder="Your email address" required="">
</p>
<p>
    <input type="submit" value="Subscribe">
</p>


This will have your widget display a heading of "Subscribe to my Newsletter", an email input field, and a submit button. Save changes when finished. 

Then, navigate to WP Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following code which will style the new widget:

/*MAILCHIMP FORM STYLINGS*/
.widget .mc4wp-form {
border: 1px solid #efefef;
padding: 15px 10px;
background-color:#efefef;
}
.mc4wp-form label {
font-size: 18px;
font-style: italic;
font-family: 'Playfair Display';
display: block;
text-align: center;
margin-bottom: 18px;
}
.mc4wp-form input {
margin-bottom: 15px;
width: 95%;
}
.mc4wp-form input[type=email]  {
font-style: italic;
font-size: 12px;
display: block;
margin-left: auto;
margin-right: auto;
}
.mc4wp-form input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
font-family:'Lato';
background: #000;
color: #fff;
}
.mc4wp-form button:hover, .mc4wp-form input[type=button]:hover, .mc4wp-form input[type=submit]:hover {
background:#C39F76;
color: #000;
}
.mc4wp-form input[type=email]::placeholder {
font-family:'Lato';
font-size:9px;
font-style:normal;
text-transform:uppercase;
letter-spacing:1px;
}


Save changes when finished. 


4 ) INSERT THE WIDGET

Lastly, navigate to WP Dashboard > Appearance > Widgets.

A new widget titled "MailChimp Sign-Up Form" will have appeared. Drag and drop this widget into your Sidebar area.


If you'd like help changing the colors or styling of the newsletter widget, feel free to open up a new support ticket and let us know!