Heapcoding

How to make a pop up registration form in html

Published November 26, 2021

In this tutorial I shall show you how to make a pop up registration form in html.

Let’s start step by step

Create a new HTML document

<!DOCTYPE html>
<head>

</head>
<body>

</body>
</html>

In the above script you can see I have declared the basic HTML document.

Now let’s add a form to the document.

Add HTML button and registration form to document

<button class="btn-popup">Open Popup</button>
<form class="register-form">
    <input type="text" name="username" placeholder="Enter username">
    <input type="text" name="email" placeholder="Enter email">
    <button type="button" class="btn-register">Register</button>
</form>

In the above code script you can see I have added a button with label “Open popup”.

And a form which has 2 input fields and a register button.

Now let’s render this in the web browser to see the changes.

how to make a pop up registration form in html

In the above screenshot you can see two buttons and two input fields are showing.

Now let’s style them to make beautiful and attractive.

Add CSS to make form and buttons more attractive

.btn-popup {
	width: 100px;
	height: 30px;
	background-color: #ff00aa;
	color: #fff;
	border: none;
}

.register-form {
	width: 300px;
	border: 1px solid;
	height: 300px;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.register-form input {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 10px;
}

.register-form .btn-register {
	width: 100%;
	padding: 10px;
	background-color: #2bc6ef;
	border: 1px solid black;
	color: #fff;
	font-weight: 600;
}

In the above code you can see I have added css style to our form to make it more beautiful and understandable.

Now let’s render it in the web browser to see the changes.

how to make a pop up registration form in html

In the above screenshot you can see our popup form and button.

Now hide the button and show on button click.

Hide form and show on button click

.btn-popup:focus ~ .register-form {
	visibility: visible;
}

.register-form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
}

In the above script you can see I have added position and transform properties to adjust the form place in the center of the page.

And also added the visibility property and changed to hidden when form is not visible.

And when the button is clicked the form will be visible on button click using css.

Congratulations you have successfully created a popup that visible on button click.

Below is the full code of the registration form.

<!DOCTYPE html>
<head>
    <style>
        .btn-popup {
            width: 100px;
            height: 30px;
            background-color: #ff00aa;
            color: #fff;
            border: none;
        }

        .btn-popup:focus ~ .register-form {
            visibility: visible;
        }

        .register-form {
            width: 300px;
            border: 1px solid;
            height: 300px;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            visibility: hidden;
        }

        .register-form input {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        .register-form .btn-register {
            width: 100%;
            padding: 10px;
            background-color: #2bc6ef;
            border: 1px solid black;
            color: #fff;
            font-weight: 600;
        }
    </style>
</head>
<body>
<button class="btn-popup">Open Popup</button>
<form class="register-form">
    <input type="text" name="username" placeholder="Enter username">
    <input type="text" name="email" placeholder="Enter email">
    <button type="button" class="btn-register">Register</button>
</form>
</body>
</html>