In this HTML CSS tutorial, you will learn how to make a responsive registration form in HTML and CSS. The project includes all the basic input fields for student or user registration such as email input, date of birth, phone number input with all country code lists, an ID card input field with a specific pattern, and a gender radio input.
This is a mobile responsive registration form designed for beginner-level developers. I have used the CSS Flexbox method to create the registration form into two columns. When the user reduces the screen size the two columns convert into a single column on mobile devices.
How to create a responsive registration form in HTML and CSS
Moreover, it’s a simple registration form created by using HTML and CSS only. I have also included the source codes of the registration form in this blog post. A simple front-end template design of a registration form for beginner web developers. To create a responsive registration form in HTML and CSS, you need to learn the basics of HTML and CSS languages.
How to Make a Responsive Registration Form in HTML and CSS
Now, I will show you the main steps to create a user registration HTML form. To make this form, I have used the following HTML5 input types in this simple HTML CSS project.
- Input type text
- Input type email
- HTML5 input-type radio
- HTML5 input type phone
- For file upload, HTML input type file
Also for your understanding, I have created a video tutorial on how to create a simple registration form using HTML and CSS. Watch the complete video tutorial with the source code below:
Video Tutorial
Now, you will get the source codes with explanations to create a simple registration form for your practice.’
Source Codes – Registration Form HTML CSS
In this section of the blog article, you will get the source codes of HTML and CSS with a brief explanation for beginners and code newbies.
HTML Source Code
In this HTML code, I have used the basic HTML input types to create a simple user registration form. Now, first of all, we will create an HTML div element with a container class and all the forms enclosed by the container class. The form has one row and two columns.
Half of the input fields are placed in the first column and the others are placed in the second column. The following HTML code will clear your concept accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="form.css">
<link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h1>Registration Form</h1>
<h3>Fill the form below and press the submit button!</h3>
<div class="row">
<!-- first column -->
<div class="column">
<fieldset>
<input type="text" placeholder="Full Name *" name="name" required autofocus>
</fieldset>
<fieldset>
<input type="text" placeholder="Father name *" name="fname" required autofocus>
</fieldset>
<fieldset>
<input type="email" placeholder="Your email *" name="email" required autofocus>
</fieldset>
<fieldset>
<input type="text" placeholder="Date of birth *" name="date" onfocus="(this.type = 'date')" required autofocus>
</fieldset>
<!-- adding all country code list -->
<fieldset>
<input type="text" placeholder="Phone number *" name="phone" id="phone" required autofocus>
</fieldset>
</div>
<!-- second column -->
<div class="column">
<fieldset>
<p>What is your gender?</p>
<div class="radio">
<input type="radio" id="male" name="gender" required>
<label for="male">Male</label>
</div>
<div class="radio">
<input type="radio" id="female" name="gender" required>
<label for="female">Female</label>
</div>
</fieldset>
<fieldset>
<label for="idCard">Enter your ID Card in given formate.</label>
<div class="idCard">
<input type="text" name="idCard" pattern="[0-9]{5}" placeholder="#####" maxlength="5"> _
<input type="text" name="idCard" pattern="[0-9]{7}" placeholder="#######" maxlength="7"> _
<input type="text" name="idCard" pattern="[0-9]{1}" placeholder="#" maxlength="1">
</div>
</fieldset>
<fieldset>
<p>Upload File</p>
<input type="file" id="file" required>
</fieldset>
</div>
</div>
<!-- submit button -->
<fieldset>
<button type="submit" id="button">Submit Now</button>
</fieldset>
</form>
</div>
<!-- Javascript to initialize the code list -->
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
separateDialCode: true
});
</script>
</body>
</html>
How to create a dropdown country phone code list in HTML
Now, Let’s learn about how to create a dropdown country phone code list and HTML registration form. The list contains the phone code list of all the countries around the world. User can easily select their country phone code by using a drop-down list as shown in the image below:
The easiest way to create the dropdown country phone code list in HTML, paste the following CDN code links inside the <head> section of the HTML code.
<link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
After that, add the following HTML input file with input type text and id = phone inside the body tag of the HTML.
<input type="text" placeholder="Phone number *" name="phone" id="phone" required autofocus>
And at the end, add this chunk of JavaScript code at the bottom of the HTML body section. This code will initialize the phone code list on every reload.
<!-- Javascript to initialize the code list -->
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
separateDialCode: true
});
</script>
Also Read: How to Create Sign-Up Page Design in HTML CSS With Source Code
CSS Source Code:
Now, You will get the CSS source code of this simple registration form template design. CSS is a very important web language to style web pages and HTML forms. In this project, I used the CSS flexbox model and CSS media queries to make the form mobile responsive. Below is the source code for your understanding:
/* import google font family */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600&display=swap');
/* selecting everything */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif, helvetica, Arial;
font-weight: 400;
font-size: 14px;
color: black;
/* body background image */
background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.541), rgba(204, 0, 255, 0.637)), url(image.jpg);
background-attachment: fixed;
background-size: cover;
}
.container {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
#contact {
background-color: rgba(220, 255, 66, 0.7);
padding: 20px;
margin: 50px 0;
}
#contact input, button {
font: 400 15px 'Open Sans', sans-serif, helvetica, Arial;
}
#contact h1 {
font-size: 35px;
font-weight: bold;
text-align: center;
color: blue;
}
#contact h3 {
margin: 5px 0px 15px;
text-align: center;
}
.row {
display: flex;
width: 100% !important;
padding: 20px 0px;
}
.row .column {
margin: 0px 20px;
width: 50%;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
width: 100%;
}
#contact input {
width: 100%;
border: 1px solid rgb(150, 150, 150);
background-color: white;
padding: 10px;
margin: 5px 0;
}
input[type = "radio"] {
width: 10% !important;
}
#contact .row .radio {
border: 1px solid rgb(150, 150, 150);
background-color: white;
margin: 7px 0 10px;
padding: 5px;
}
#contact .row .idCard{
display: flex;
height: 45px !important;
margin: 5px 0;
}
#contact .row .idCard :first-child {
width: 80px;
}
#contact .row .idCard :last-child {
width: 40px;
}
#contact .row #phone {
max-width: 100% !important;
padding-right: 80px;
}
#contact input:hover {
transition: border-color 0.3s ease-in-out;
border: 1px solid rgb(68, 68, 68);
}
#contact button {
outline: none;
border: none;
background-color: blue;
color: white;
margin: 0 0 5px 40%;
padding: 10px;
font-size: 17px;
width: 150px;
}
#contact button:hover {
background-color: rgba(0, 0, 255, 0.8);
}
#contact input:focus {
outline: 0;
border: 1px solid red;
}
/* mobile responsive mode */
@media screen and (max-width: 580px) {
.row {
flex-direction: column;
}
.row .column {
width: 90% !important;
}
#contact .row #phone {
padding-right: 180px;
}
}
Finally, below is the mobile responsive view of theresponsive registration form in HTML and CSS.
I hope you understand the above responsive registration form in HTML and CSS. If you still need any help related to this tutorial, you can contact me. Happy coding!!!
