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:
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:
<!-- 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"> <a href= | |
"#" style="color:white"><i class="fa fa-times-circle hvr-grow" id= | |
"close_newsletter"></i></a> | |
</p> |
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; | |
}); | |
}); |