I'm attempting to include an email submission form box that appears when users click on a small envelope icon located at the top right corner of my page. However, I've encountered some difficulty as it either shows up in the midst of other icons or doesn't show up at all. Ideally, I would like for it to display just below the row of icons (please refer to the image attached). As someone who is new to this, I greatly appreciate your patience :)
Below is the HTML code (the li element is enclosed within ul and includes three other icons):
<li>
<div class="email-form"><img src="<?php echo $site_url;?>img/nav/emailicon.png?v=2" alt="E-mail Sign Up" width="23" height="23" id="email-icon" style="display: inline;"/><form class="email-form" action="subscribelink" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" style="display: none;"><fieldset><input type="text" name="EMAIL" value="YOUR EMAIL ADDRESS" /> <input type="submit" value="Submit" /> </div>
<div class="email-response" style="display: none;">Thank You</p></fieldset></form> </li>
</div>
</a>
The CSS:
nav.email-form{ display:none; }
And the JavaScript:
$(function(){
$('.email-icon').on('click', function(e){
e.preventDefault();
$(this).next('.email-form').show();
});
});