HTML Modal Login Form: Responsive login form with CSS (17)

by | Jun 20, 2020 | 0 comments

HTML Modal Login Form: Responsive login form with CSS (17)

by | Jun 20, 2020 | CSS Tips and Tricks | 0 comments



Learn how to create a responsive login form with CSS.

Tip: You can also use the following javascript to close the modal by clicking outside of the modal content (and not just by using the “x” or “cancel” button to close it):

_script_
// Get the modal
var modal = document.getElementById(‘id01’);

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}
_/script_

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>