Snazz Up Your Current WordPress Optin Box

If you are like me you have probably had an optin form in a widget on your sidebar to capture emails and it hasn’t changed in 6+ months. While keeping consistency is a good thing, becoming outdated is a problem. I have had my eyes out for a modern looking optin box for months now. Even most of the premium optin box plugins for WordPress look horrible in my opinion. Follow my CSS tutorial below to snazz your optin box up a little bit and stand out from the crowd! No need to install a plugin or buy anything.

Update: The morning after writing this MyThemeShop, being the awesome company that they are, released this as a WordPress plugin for free: WP Subscribe. Check it out!

This optin box design was inspired 100% from the new SociallyViral WordPress theme from MyThemeShop and simply modified. I use them for all of my themes and I highly recommend them. They have some amazing developers over there as well as a great eye for design.

Implementing the New Optin Box Design

This should work with whatever provider you are using. Aweber, GetResponse, MailChimp, etc. It is simply a form, nothing special. In my example below I will be using MailChimp.

Step 1

We need to copy the HTML for our WordPress widget optin box. Simply paste the code below into a “text” widget.

<div id="wp_subscribe-2" class="widget-header"><div class="wp-subscribe" id="wp-subscribe"><h4 class="title">Get more stuff like this<br> <span>in your inbox</span></h4><p class="text">Join my newsletter and get cool stuff <u>once a week</u>.</p><form action="http://domain.us7.list-manage1.com/subscribe/post?u=XXXXXXXXXXXX" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate nice custom" target="_blank" novalidate="" style="margin-bottom:0px;">
<div style="display: none;">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input value="" name="EMAIL" id="mce-EMAIL" placeholder="Enter your email here" class="email-field" type="email" style="padding:5px; width:100%; font-size:15px; color:#fff; opacity: 0.8;">
<input value="Subscribe" name="subscribe" class="submit" id="emailsubscribe" type="submit">
</form><div class="clear"></div><p class="footer-text">I hate spam too. Unsubscribe at any time.</p></div></div>

Note: you will want to change the form action URL to point to yours. In MailChimp you can find your form action URL by going into your list, go to signup forms and then click on embedded forms. You will then see a box which will contain your form action URL.

For other providers such as Aweber, GetResponse, etc… it will probably vary slightly but they all have documentation on how to setup an optin box. If not you should be able to find a tutorial online.

Then press “Save” to save your widget.

Step 2

Now that we have your optin box setup, we need to style it. I have three preset colors you can choose from. Peach, Black, and Blue. You can of course change the CSS to whatever color you want.

[toggle title=”Grab the Peach CSS Here”]

#wp-subscribe {
padding: 26px;
background: #f47555;
}
#wp-subscribe h4.title {
font-size: 18px;
color: #FFF;
line-height: 1;
text-align: center;
text-transform: uppercase;
margin-bottom: 0;
}
#wp-subscribe h4.title span {
display: inline-block;
font-weight: bold;
font-size: 32px;
margin-top: 15px;
}
#wp-subscribe p.text {
margin: 15px 0;
opacity: 0.8;
text-align: center;
color:#fff;
}
#wp-subscribe input.email-field {
color: #FFF;
background: #d56144;
}
#wp-subscribe input {
border: none;
width: 100%;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
margin: 0;
box-shadow: none;
border-radius: 0;
height: 45px;
font-size: 14px;
color:#fff;
}
#wp-subscribe input.submit {
background: #FFF;
color: #f47555;
margin-top: 20px;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
#wp-subscribe p.footer-text {
margin-top: 10px;
margin-bottom: 5px;
font-size: 12px;
color:#fff;
text-align:center;
}
#wp-subscribe input.email-field::-webkit-input-placeholder {
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field:-moz-placeholder { /* Firefox 18- */
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field::-moz-placeholder { /* Firefox 19+ */
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field:-ms-input-placeholder {
color: #FFFFFF;
opacity:1;
}

[/toggle]

[toggle title=”Grab the Black CSS Here”]

#wp-subscribe {
padding: 26px;
background: #333333;
}
#wp-subscribe h4.title {
font-size: 18px;
color: #FFF;
line-height: 1;
text-align: center;
text-transform: uppercase;
margin-bottom: 0;
}
#wp-subscribe h4.title span {
display: inline-block;
font-weight: bold;
font-size: 32px;
margin-top: 15px;
}
#wp-subscribe p.text {
margin: 15px 0;
opacity: 0.8;
text-align: center;
color:#fff;
}
#wp-subscribe input.email-field {
color: #FFF;
background: #999999;
}
#wp-subscribe input {
border: none;
width: 100%;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
margin: 0;
box-shadow: none;
border-radius: 0;
height: 45px;
font-size: 14px;
color:#fff;
}
#wp-subscribe input.submit {
background: #FFF;
color: #333333;
margin-top: 20px;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
#wp-subscribe p.footer-text {
margin-top: 10px;
margin-bottom: 5px;
font-size: 12px;
color:#fff;
text-align:center;
}
#wp-subscribe input.email-field::-webkit-input-placeholder {
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field:-moz-placeholder { /* Firefox 18- */
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field::-moz-placeholder { /* Firefox 19+ */
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field:-ms-input-placeholder {
color: #FFFFFF;
opacity:1;
}

[/toggle]

[toggle title=”Grab the Blue CSS Here”]

#wp-subscribe {
padding: 26px;
background: #4292c4;
}
#wp-subscribe h4.title {
font-size: 18px;
color: #FFF;
line-height: 1;
text-align: center;
text-transform: uppercase;
margin-bottom: 0;
}
#wp-subscribe h4.title span {
display: inline-block;
font-weight: bold;
font-size: 32px;
margin-top: 15px;
}
#wp-subscribe p.text {
margin: 15px 0;
opacity: 0.8;
text-align: center;
color:#fff;
}
#wp-subscribe input.email-field {
color: #FFF;
background: #2e688c;
}
#wp-subscribe input {
border: none;
width: 100%;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
margin: 0;
box-shadow: none;
border-radius: 0;
height: 45px;
font-size: 14px;
color:#fff;
}
#wp-subscribe input.submit {
background: #FFF;
color: #2e688c;
margin-top: 20px;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
#wp-subscribe p.footer-text {
margin-top: 10px;
margin-bottom: 5px;
font-size: 12px;
color:#fff;
text-align:center;
}
#wp-subscribe input.email-field::-webkit-input-placeholder {
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field:-moz-placeholder { /* Firefox 18- */
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field::-moz-placeholder { /* Firefox 19+ */
color: #FFFFFF;
opacity:1;
}
#wp-subscribe input.email-field:-ms-input-placeholder {
color: #FFFFFF;
opacity:1;
}

[/toggle]

optin boxes

If you are tweaking the colors to something else there are really only three classes you have to worry about.

  • #wp-subscribe
    • background: (the color of the entire box)
  • #wp-subscribe input.email-field
    • background:  (the darker color within the input field)
  • #wp-subscribe input.submit
    • color: (the color of the text on top of the submit button)

Step 3

After you have copied the CSS above you need to either add this to your stylesheet, child theme, or within a custom CSS plugin. I recommend one of the last two. If you directly edit your main stylesheet you will most likely forget to back these changes up and override them when you update your WordPress theme. If you don’t know how to use child themes and your WordPress theme admin doesn’t have a separate box for additional CSS then I recommend the free WordPress plugin: Simple Custom CSS.

And that is it! Once you save the CSS your optin box should be ready to go. Depending upon the classes of your native WordPress theme you might have to tweak the font sizes, padding, etc… to clean it up a little bit.

This also makes a great simple Optin box to throw into a widget in your footer as well. See my stripped down down version.

footer optin widget

Again, big props to MyThemeShop on this design (which I simply modified). Buy that designer a coffee!

Let me know what you think below in the comments!

Get More Stuff Like This

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

13 thoughts on “Snazz Up Your Current WordPress Optin Box”

  1. Pingback: Snazz Up Your Current WordPress Optin Box for F...
  2. Thanks for this post, Brian. Until now, I was using a form from getresponse, but this looks much better. The problem right now, though is, GetResponse.com is down for everyone. Yep, that’s bad. So, can’t test this with GetResponse till they’re back online.

    Have used MailChimp for now. The WP-Subscribe plugin doesn’t seem to support GetResponse, though. Did they copy the three colors for the plugin, from this post?

    • The borders in my image above is actually just from my screenshot on a grey background. It doesn’t actually have a border. Hopefully that answers your question. Thanks!

  3. I had installed it and did all the styling to fit the site, however, I have noticed you also have the same plugin displaying below your articles. I have not found the snippet that allows me to add it like you do. Can you be kind to explain me how have you done it?

    Thank you.

  4. Thank you for this great article. I am so proud of myself for following your directions. I plan to change the colors later, but my main concern right now is that I want to add a field for Name, too. Is that possible?

    • Hey Heather, hopefully you saw the box at the top that there is now a plugin for this :) The Pro version of the plugin does let you add a name field: https://woorkup.com/go/subscribe-pro This is what I am using on this site and all my others. I could get the name field working in the above code too, but it would take adding another field. Don’t have time at the moment. Would need to test it.

      • Thanks, Brian! I did get the plugin at first, but somehow I hit a snag.. oh, partly that it was orange, so I got rid of that and just did it the way you described. Maybe I’ll get the pro version though. :)

Leave a Comment

shares