Hello from this article you are going to learn how to create a pop-up login form using HTML, CSS, and BoostApp programming code. I have designed another pop-up login form. I have also designed many more types of simple login forms.
If you want to create a pop-up login form without using Bootstrap or jquery, you cansee my previous design. These login forms are the same as thenormal login forms. Normally a button or link can be found on the home page.
In this case, I have used the button on the home page. When you click on that button, the complete login form will appear. Clicking on that button will open a pop-up box. There is a button to close that page, which when clicked will hide the page again.
How to create popup login form Html and CSS
If you want to see its live demo, you can see the demo below. From there you can copy the required source code and use it in your own work.
If you are a beginner, you can follow the tutorial below. Below I have shown step by step how I have designed this login form.
As you can see in the demo above, there is only one login button on the homepage. Then when you click on that login button, the complete login form will appear.
First of all, I used a title in the login form and gave a little description below it. There is a place to input email id and password to log in. In each of those places, I used an icon, that is, I used a lock icon instead of a profile and password instead of an email. There is also the option to remember me and forget my password.
Below, I have used a login button. I have used gradient color on this login button. If you want to make T, you must have an idea about basic HTML and CSS.
If you want to create a nice pop-up login form without using bootstrap and the jQuery plugin, of course, you can see another design I made. That login form was only created by me using HTML, CSS, and JavaScript programming code.
Step 1: Create the basic structure for creating the login form
To create it, you first need to create an HTML and CSS file. Then combine the HTML file and the CSS file. Copy the programming structure below and add it to the HTML file.
In this case, we have used some links like JQuery and Bootstrap which have made this login form functional and responsive respectively.
I created the pop-up box with the help of the following programming codes. A box opens when you click on the login button. The following programming code has been used to create it.
Step 4: Make a button to cancel the popup login form
A box has been created as you can see above. But I didn't make any button to cancel that box. The following programming codes have been used to create and execute the button to cancel this box.
As you can see in the demo above I have used a title and some description in this login form. I have used the following programming codes to make room for email input and password input.
First of all, I made a place to input passwords and email ids. I have used one of the necessary icons with it. I have taken the help of the following CSS codes to design it.
<div class="modal-body">
<h3 class="title">Login Form</h3>
<p class="description">Login here Using Email & Password</p>
Step 6: Add Forgot Password and Remember Me option
If you notice here I have added the option of a Remember Me and Forgot Password. The following codes have helped to create that. Remember me is basically a checkbox that when you click on it, the information in that login form is saved.
There is a login button at the end of this login form as you saw in the picture above. I used a nice login button here and used a gradient color on it. Which the following programming codes have helped to create and design.
Hopefully, in this tutorial, you have learned how to create a beautiful pop-up login form with the help of HTML, CSS, and bootstrap programming code. If you have any problems, you can definitely comment.
