Newsletter Snippet to show/hide newsletter signup form in your wordpress theme

00. Mailchimp WP.md

Show/Hide Mailchimp Newsletter Signup Form

This snippet shows how to show/hide the newsletter signup using the Mailchimp for WP plugin

the classes: class="hvr-grow-shadow" are for css animiation using Hover library

##Screenshot of actual example:

01.mailchimp-for-wp form.html

<!-- Place this code snippet in the MailChimp for WordPress Forms section  -->
<p>
    <label>Email address:</label> <input name="EMAIL" placeholder=
    "Your email address" required="" type="email"> <label>First Name:</label>
    <input name="FirstName" placeholder="Your email address" required="" type=
    "email"> <label>Last Name:</label> <input name="LastName" placeholder=
    "Your email address" required="" type="text">
</p>

<p>
    [bws_google_captcha] <!-- shorcode for http://bestwebsoft.com/products/google-captcha/ -->
</p>

<p>
    <input class="button" type="submit" value="Sign up"> &nbsp;&nbsp;<a href=
    "#" style="color:white"><i class="fa fa-times-circle hvr-grow" id=
    "close_newsletter"></i></a>
</p>

02.footer.php

/*place this in the appropriate section. 
  make sure the id and the jquery selector matches
  also make sure you use the correct shortcode
*/

<ul class="footer-logos">
   <li class="newsletter">
      <a class="hvr-grow-shadow" href="#" id="newsletter" >News Letter</a>
   </li>
   <li>...</li>
</ul>

<div hidden id="newsletterForm">
   <?php echo do_shortcode('[mc4wp_form]'); ?>
</div>

03.script.js

jQuery(document).ready(function($) {
    var is_hidden = true;
    var newsletterForm = $('#newsletterForm');
    $('#newsletter').click(function(event) {
        event.preventDefault();
        if (is_hidden) {
            newsletterForm.show();
            $('html, body').animate({
                scrollTop: newsletterForm.offset().top
            }, 1000);
            is_hidden = false;
        } else {
            newsletterForm.fadeOut(560);
            is_hidden = true;
        }
    });
    $('#close_newsletter').click(function(event) {
        event.preventDefault();
        newsletterForm.fadeOut(560);
        is_hidden = true;
    });
});