In this tutorial, you will learn how to create Popup Registration Form using HTML and CSS. In the meantime, I have shared with you the tutorials for different types of Registration Forms. Here is the time to create Popup Registration Form in HTML.
In many cases, we see the form of a pop-up window. I just shared a pop-up login form design with you. This is a Registration Form that contains almost all the information for registration.
Since this is a popup design, we will not be able to see the form in general. Instead, you will see a button on the home page. When you click on that button, the Popup Registration Form will appear. There is a button in the registration form which will be hidden again after clicking on it.
Popup Registration Form
Many people want to create an automatic pop-up registration form. In that case, I already shared a tutorial where I showed you how to create a popup window. Below you will find a preview that will help you learn how it works.
First I created a button on the webpage. That button will act as a popup button. If you click on that button, you will see the Registration Form. There is a cancel button at the top of the form. Clicking on that button will hide the popup window again.
This registration form has 6 input boxes and one Sylhet box. In the first two input boxes, you can input the name. The third input box is the email ID and the 4th and 5th input boxes are for inputting the password and ‘confirm password.
How to Create Popup Registration Form in HTML
Html, CSS, and jQuery have been used to create this simple Popup Registration Form. Designed by HTML and CSS and activated popup by jQuery.
I have given all the codes below here. To do this, first create an HTML, CSS, and JavaScript file.
HTML Code (index.html)
The code below is the HTML code with which we have added all the information to create this pop-up registration form. Copy the following codes and add them to your HTML file.
The following codes are CSS which will design this Popup Registration Form and add all kinds of colors. Copy these codes and add them to your CSS file. Be sure to rename your CSS file to style.css.
The following codes are the query code that will activate this popup. First I activated the popup button and then I activated the cancel button. Add these codes to your JavaScript file. Of course, you will use the rename function.js of the JavaScript file.
$(document).ready(function(){
//active start button
$(‘.start-btn’).click(function(){
$(‘.modal-box’).toggleClass(“show-modal”);
$(‘.start-btn’).toggleClass(“show-modal”);
});
// active cancle button
$(‘.fa-times’).click(function(){
$(‘.modal-box’).toggleClass(“show-modal”);
$(‘.start-btn’).toggleClass(“show-modal”);
});
});
Hopefully, you have been able to create this Popup Registration Form in HTML using the above code. If there is a problem then use the download button below.
There are many users who cannot combine the above codes together. They can use that button. If there is any difficulty in creating this Popup Registration Form, you can comment.
