Creating an Opt-in Bar with Newsletter Sign-Up & Mailchimp

“List-Building” is still all the rage in online marketing, and having a place on your website where potential clients and customers can sign up for your email list is essential. Making sure your site visitors see this magical place to “opt-in” is critical. Some sites have it at the top of a sidebar, some have a pop-up or a sliding form like Slide In from the WPMU folks. Another option that displays the form on every page, but is not in your visitor’s way is a “bar” somewhere near the header of the site, sometimes referred to as an “Opt-In Bar”.

This tutorial covers adding an “Opt-in Bar” on a WordPress site using a Mailchimp as your email subscription solution. It describes how to add an Opt-in bar to collect first name and email address while subscribing someone to your Mailchimp list. You’ll want to have a self-hosted WordPress site, a Mailchimp account, the Newsletter Sign-Up plugin and some CSS knowledge.

I borrowed some styling from MarieForleo.com for demonstration purposes.

Marie Forleo's Website with Opt-in Bar. Have you checked her out yet? She's great.

Marie Forleo’s Website with Opt-in Bar. Have you checked her out yet? She’s great.

When I was first asked about using a Mailchimp sign-up form in a theme, but not as a widget…I thought about just using the embed code that you can generate at Mailchimp for your list.  But basic copy & paste would leave some javascript code right in the middle of my page, and even if I pasted the form into the right place in the template file and put the javascript in the footer template file…I still thought it could be easier while being more flexible on the form end of things.  Enter the Newsletter Sign-Up plugin! With that and some custom CSS we were in business.

Install Newsletter Sign-Up

Install the Newsletter Sign-Up plugin and activate it.

Configure the Mailchimp API Settings

In your WordPress dashboard, you will now have a Newsl. Sign-Up menu option below Settings. Choose List Settings from underneath Newsl. Sign-Up

Choose List Settings from underneath Newsl. Sign-Up from the Dashboard

In your WordPress dashboard, you will now have a Newsl. Sign-Up menu option below Settings. Choose List Settings from underneath Newsl. Sign-Up or Settings from under Newsletter Sign-Up on the plugins page.

This settings panel is dynamically populated, so once you choose “Mailchimp” from the dropdown as your mailing list provider, then a checkbox called “Use Mailchimp API?” appears and you can select it.  Then fields for your Mailchimp API Key and List ID appear along with some Mailchimp specific options.  The plugin author has posted a definitive guide to configuring Newsletter Sign-Up that you can reference.

Sample Newsletter Sign-Up Mailchimp Settings

Sample Newsletter Sign-Up Mailchimp Settings

Since I am going for a streamlined first name + email sign-up form, I only select “Subscribe with name?” and within my Mailchimp list, “FNAME” is the name identifier for the FIRST NAME field.

Configure Form Settings

Since we want the name and email fields right next to each other, we leave the two label fields blank (later we will hide the default with CSS) but enter in default values that appear inside the input fields to indicate to your subscriber what to enter.  Also just to mimic our chosen sample design, I used “Get it!” for a submit button value.  This is where you’d also customize the text that appears in-place after sign-up or redirect to a custom thank you page, but I didn’t play with any of that.

Form Settings

Form Settings showing blank labels but default values for each input field and a custom submit button value

 

Add the Newsletter Sign-Up Function to Your Theme

I wanted the bar to show up right under the menu of my Twenty Twelve Child Theme, so I put the function call in header.php right before the </header> closing tag. You can find the best placement for your theme. It’s always best to check if a plugin exists before calling it, so that if that plugin is deactivated or deleted you won’t get an undesired result. Place the following PHP in your header template file:

<?php if(function_exists('nsu_signup_form')) nsu_signup_form();?>

I wrapped that call and some text in a <div> with a custom class so we could color in the bar for our demo. I wrapped the word “Free” in a span tag with an italic inline style just to mimic our sample design. So all put together I used:

<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Create a Business &amp; Life you Love</p><?php if(function_exists('nsu_signup_form')) nsu_signup_form();?>
</div>

Style the Form Using CSS

I styled the form to make it look similar to Marie’s green bar, with uppercase text inviting a visitor to sign up by typing in first name and email address and hitting that cute “Get it!” button using this CSS:


/* this would be the color and size of the main bar */
#nsu-head {
	background-color: #3CB878;
	padding: 34px;
}
/* basic text color and placement */
#nsu-head p { 
	float:left; 
	color: whiteSmoke; 
	margin-top:-15px;
	padding-right:10px;
}
/* placement of the invitation text */
#nsu-head p.form_label { 
	text-transform:uppercase;
	padding-left: 50px;
	padding-right: 30px;
	margin-top: -5px;
}
#nsu-form-1 label {display:none;} /* hides the input field labels */

/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 { 
	border-radius: 100%;
	padding: 10px 15px 5px 15px;
	margin-top: -8px;
	width:80%;	
	font-size: 1.3rem;
	word-wrap:break-word;
	font-weight: bold;
	color:whitesmoke;
	font-family:'Satisfy';
	-moz-box-shadow: 1px 2px 4px #555;
	-webkit-box-shadow: 1px 2px 4px #555;
	box-shadow: 1px 2px 4px #555;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit { 
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover { 
background: no-repeat black;
border: 1px solid black;
}

/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
float: right;
font-size: .9rem;
color: #DDD;
padding-right: 0;
margin-top: -18px;
width: 45%;
}

I used several of Newsletter Sign-Up’s IDs in order to style a specific form on the page if there were multiples, but I didn’t actually see a way to have more than one NSU form on the site, so that may be a limitation. Also note I didn’t test this on multiple browsers, so consider this CSS to be basic and not finished for a production site.

Take a look at the demo site and let me know how I can improve this tutorial below.

Caitlin Dean

12 Comments

  1. Thank you! This totally helped me out of a jam. I did a little restyling for the site I was working on, but this definitely saved me some time :)

  2. How can I create an opt in like that for a website not hosted on WordPress. Something like Weebly for instance or a Blogger blog.

    • There’s really two parts covered in the above post, one is the way it looks and the other is hooking it up to a subscription management service (Mailchimp was used in the example). You can use the example here as a guideline for changing your HTML and CSS in Blogger (I don’t know what kind of freedom Weebly gives you to do this) but you would still need the fields (Email, name, “go” button) to match whatever email service you use (Constant Contact? Infusionsoft? Mailchimp? etc). Sorry there is no easy answer here, WordPress is the easiest IMO and even so you’ll need some pretty strong HTML and CSS skills to do it.

  3. Awesome that I have stumbled across your site, typed Like Marie forleo optin form and voila!
    It works wonderfully only my genesis theme layout puts the form right at the top as the banner is very small- just wondering if I put it in the function.php file will it work and works with aweber?

    thank you

    • Hi Suzie, the plugin I use in this post does have aWeber as an option, so if you follow their instructions for setting up your aWeber account, all the other instructions should just work with that. I’ve just recently done some work on a Genesis framework site, so I think you can add this to the Genesis -> Custom Code -> PHP area in the dashboard (or directly in the functions.php file depending on your child theme) but I *think* you’ll need to add the correct “hooks” to get it in the proper place in the header. I’ve had great response from their community support forums, so make sure to get some help from the Genesis experts on that…It’s totally do-able! Good luck!

      • Thanks Caitlin, I have it installed, only have a white gap, Going to redo the whole process and see if it will work. Yes with Genesis i am using hooks rather than playing with code.
        will share with you when i get it working

  4. Hey Caitlin,

    Awesome tutorial, would you happen to know what file I would look for if I want the bar to go under the slider? I have been searching for this tip for months.

    Thank you!
    Alex

    • Hi Alex – Without being able to see your theme’s files, I’m not sure which file exactly. I looked at your page source and assuming you are talking about right under the top most slider, you’d want to put this code right under the HTML comment in your theme “” (or right before, that’s a comment, so there’s no difference before or after) So if that’s not in header.php, you can do a search in your theme’s files (in the same directory) for that to figure out where to put the code for the sign-up bar. This will place it right under the gray that defines your current header, so spaced a bit below that slider to maintain the 3D look. Thanks for visiting, I hope that helps!

  5. Hi Caitlin!
    I am new to web building, but so thankful for your tutorial! I happen to be using both WP and Mailchimp. I followed your instructions to the letter and they worked -mostly. I wasn’t able to get the circle sign in button. My main concern is that after a subscriber completes the opt in, the Thank you message and opt in message both appear in the bar. I want the original opt invite to “no repeat”, but I’m not sure how to do this. Please, help. Thank you.

    • I’m glad you found it useful! I don’t think you can handle it the way you prefer, as the plugin doesn’t change the style of the original opt-in message (that is static/same before and after signing up). So the input form (name + email + button) is what changes…to the thank you message…after signing up. Your only option within the plugin’s ability is to play with the styling for the nsu-signed-up class as that is what wraps the “thank you message”. Even assigning some margin to that class will at least make the result more readable. I hope that gives you some direction :)

  6. Hi Caitlin!
    I would love to have the “Thank you” message across from the invite title once the form is submitted by subscriber. How did you make that work? There is a thank you message posted on my WP newsletter plugin…

Leave a Reply

Your email address will not be published. Required fields are marked *