In this short tutorial, we are going to building a Responsive Modal Login Sign Up form using HTML, CSS, and bootstrap.
Responsive Modal Login Sign Up form
The following steps to Create a Responsive Modal Login Sign Up form.
Step-1: Adding bootstrap library
Add the below bootstrap library in the header section.
|
1 2 3 4 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
Step-2: Adding CSS
Add the below required CSS to design the simple login form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
.bg{ background: #64647c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #1CB5E0, #000046); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #007bff; color: white; padding: 5px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #45a049; } .modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; } /* Responsive layout*/ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } } .form-bg{ background: #fff; } .heading{ color: #fff; } .error{ color: #e40000; font-size: 13px; } .heading-align{ text-align: right; font-size: 14px; } |
Step-3: Adding Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script type="text/javascript"> //Start JS for Login Form $(document).ready(function() { $("#loginPopup").modal({ show: false, backdrop: 'static' }); $("#login").click(function() { $("#loginPopup").modal("show"); }); }); //Start JS for Registration Form $(document).ready(function() { $("#registerPopup").modal({ show: false, backdrop: 'static' }); $("#register").click(function() { $("#registerPopup").modal("show"); }); }); </script> |
Step-4: Adding the HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<section class="testimonial py-2" style="border-bottom: 1px solid #e6e1e1;"> <div class="container"> <div class="row"> <div class="col-md-9 py-3"> <img src="https://htmlcss3tutorials.com/wp-content/themes/htmlcss/images/logo.png" alt="HTML CSS3 Tutorials" /> </div> <div class="col-md-3 py-3"> <a href="https://htmlcss3tutorials.com/javascript-form-validation/" class="btn btn-primary">Back to Tutorial</a> </div> </div> </div> </section> <section class="testimonial py-3" id="testimonial"> <div class="container"> <div class="row"> <div class="col-md-9 py-3"> <h2 class="heading">How to Create a Responsive Modal Login, Sign Up form</h2> </div> <div class="col-md-3 py-3 rounded shadow-sm"> <a href="#" class="btn btn-primary" id="login">Login</a> <a href="#" class="btn btn-primary" id="register">Register</a> </div> </div> </div> <!-- Example 1 --> <div class="modal" id="loginPopup"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Login</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <form id="login" method="get" action=""> <div class="form-row"> <div class="form-group col-md-12"> <input id="userNameL" name="userName" placeholder="User Name" class="form-control" type="text" required> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <input id="passwordl" name="password" placeholder="Password" class="form-control" type="password" required> </div> </div> <div class="form-row"> <div class="form-group col-md-3"> <input class="btn btn-primary" type="submit" value="Submit"> </div> <div class="form-group col-md-8"> <p class="heading-align">New User <a href="#">Register here</a></p> </div> </div> </form> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Example 2 --> <div class="modal" id="registerPopup"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">User Registration Form</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <form id="signupForm" method="POST" action="#"> <div class="form-row"> <div class="form-group col-md-6"> <input id="fullName" name="fullName" placeholder="Full Name" class="form-control" type="text"> </div> <div class="form-group col-md-6"> <input type="email" class="form-control" name="email" id="email" placeholder="Email Id"> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <input id="userName" name="userName" placeholder="User Name" class="form-control" type="text"> </div> <div class="form-group col-md-6"> <input id="mobile" name="mobile" placeholder="Mobile No." class="form-control" type="text"> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <input type="password" id="password" name="password" placeholder="Password" class="form-control" > </div> <div class="form-group col-md-6"> <input type="password" id="cpassword" name="cpassword" placeholder="Confrm Password" class="form-control" > </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <div class="form-check"> <input type="checkbox" class="checkbox" id="agree" name="agree"> <label class="form-check-label" for="invalidCheck2"> <small>I agree to our Terms & Conditions, Visitor Agreement and Privacy Policy.</small> </label> </div> </div> </div> <div class="form-row"> <div class="form-group col-md-3"> <input class="btn btn-primary" type="submit" value="Submit"> </div> <div class="form-group col-md-8"> <p class="heading-align">Already a membe? <a href="#">Login Here</a></p> </div> </div> </form> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </section> |
The responsive modal Login Form looks like
The responsive modal sign up Form looks like
Live demo and Full source code for Responsive Modal Login Sign Up form
Download Bootstrap Modal Plugin Example
Share this:
Related Post
