Add Subscribe Button at right side of the Logo

Adding the “Subscribe” button at right side of the logo and opening the MailChimp signup on lightbox popup.

See the Setps

First install the Easy Fancybox plugin and setup the plugin like this way:

Next go to Widget page (Appearance -> widgets) and put the Text Widget in Header Right Widget Area. Add the following code in the text box and create a “SUBSCRIBE” button:

[code lang=”HTML”]
<a href="#mc_embed_signup" class="fancybox-inline">
<span class="btn-subscribe">SUBSCRIBE</span>
<span class="dashicons dashicons-arrow-right-alt2"></span>
</a>

For better design You can add the following CSS in your style.css file

[code lang=”CSS”]
a.fancybox-inline{
background: #f4603d;
color: #FFF;
display: inline-block
}

a.fancybox-inline:hover{ background: #11bf0d; }
a.fancybox-inline:hover .btn-subscribe{ border-color: #0cb008 }
a.fancybox-inline:hover span.dashicons { border-color: #22c61e }
.btn-subscribe {
border-right: 1px solid #e54e2b;
display: inline-block;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
padding: 8px 19px 8px 24px;
}

a span.dashicons{
border-left: 1px solid #ff7350;
display: block;
float: right;
height: auto;
line-height: 23px;
margin: 0 25px 0 0;
padding: 14px 0 11px 13px;
}

Button will be looking this way

If you check the code then you will see that I added the “fancybox-inline” class and link with HASH tag “#mc_embed_signup” ( To make inline content open in an overlay, wrap that content in a div with a unique ID, create a link with target “#uniqueID” and give it a class “fancybox-inline” attribute).

Now login to Mailchimp account and create a list. Then Click on Signup Form link, go to “Embed Form” page and setup the Signup Form. Therefore copied the Mailchimp Signup form code and paste it inside the “fancybox-hidden” div.

Code is coming like this way:

[code lang=”HTML”]
<div class="fancybox-hidden">

<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">

<div id="mc_embed_signup" style="width: 560px;">
<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style="position: absolute; left: -5000px;"><input type="text" name="b_35247fc5c39addf61e1a4fa1d_af01db35ed" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>

</div>

Add the above code just below the closing “A” tag.

All setup are done. Now refresh your home page and click on “Subscribe” button. Your signup form will popup with fancy effect. Hope that this is not a bad idea and you’ll like it. 🙂

Caution: Don’t use this demo Mailchimp code. This is my Signup Form’s code. You’ll add your code.