In this tutorial, you will learn, How to Create Responsive Registration Form Using HTML5 and CSS3. A responsive registration form is a necessary part of every website. Website owners require the user’s details such as name, email address, or mobile number for the user registration process.
In this article, you will learn to create a responsive registration form using HTML5 and CSS3 with Source Code and with CSS3’s latest features. This Sign Up Form with HTML5 CSS3 is also responsive to all media devices.
Responsive Registration Form Using HTML5 and CSS3
Follow these steps to create the Responsive Registration Form Using HTML5 and CSS3:
- Open the code editor of your choice. In this tutorial, we are using Visual Studio Code.
- Create a new file named signup.html in your code editor.
- Write HTML code to create the basic structure of the registration form.
- After that, create a style.css file and link the file with an HTML page.
- Write CSS code to decorate the responsive signup registration form.
- Put background body image in HTML CSS registration form.
- Use font awesome social icons in HTML signup form,
- Add CSS media curies to make the registration form responsive.
Watch Video Tutorial
You can watch this video tutorial for a complete step-by-step guide to creating a responsive user registration.
Or You can read the full detailed article to create a Responsive Registration Form Using HTML5 and CSS3 with Source Code.
HTML Code – Responsive Registration Form Using HTML5 and CSS3
<!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>Sign Up Form</title>
<!-- CSS file -->
<link rel="stylesheet" href="formStyle.css">
<!-- Font Awesome 5 CDN link to add social icons in html5 registration form -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<dive class="formWraper">
<!-- Left section of responsive registration form -->
<div class="formDiv">
<h2>Create Account</h2>
<p class="text"> Sign Up with Social Media</p>
<!-- Font Awesome Icons -->
<div class="socialBtn">
<div class="facebook icon"><i class="fab fa-facebook-f"></i></div>
<div class="twitter icon"><i class="fab fa-twitter"></i></div>
<div class="instagram icon"><i class="fab fa-instagram"></i></i></div>
</div>
<!--Horizontal Line-->
<hr>
<div class="orDiv">Or</div>
<p class="text">Sign Up with Email Address</p>
<div class="formGroup">
<i class="far fa-user"></i>
<input type="text" name="name" id="name" placeholder="Name">
</div>
<div class="formGroup">
<i class="far fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="Email">
</div>
<div class="formGroup">
<i class="fas fa-lock"></i>
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div class="checkBox">
<input type="checkbox" name="checkbox" id="checkbox">
<span class="text">I Agree with Term & Conditions.</span>
</div>
<button class="btn">SIGN UP</button>
</div>
<!-- Right section of responsive registration form -->
<div class="welcomeDiv">
<h2>Welcome Back!</h2>
<p class="text">Get in touch with us for our news letter and more updates.</p>
<button class="btn2">SIGN IN</button>
</div>
</dive>
</div>
</body>
</html>
HTML Code Explanation:
In the above HTML code for the responsive user register form, I used an outer div with a container class. The form has two sections. The first section is the left section with the ‘formDiv’ class and the right section contains the ‘welcomeDiv’ class.
The first section of the responsive registration user form contains the font awesome social icons and form data input. The right section of the form contains the welcome back text and sign-up button.
CSS Code – Responsive user Sign Up form
- Adding body background responsive image in user registration HTML form
body{
margin: 0px;
padding: 0px;
font-family: sans-serif;
box-sizing: border-box;
background-image: url(imageName.jpg);
background-size: cover;
background-attachment: fixed;
}
2. How to center content vertically and horizontally with CSS – Align a Div or Text center inside the container div.
.container{
display: flex;
align-content: center;
justify-content: center;
}
3. CSS code for the left and right sections of the responsive user signup registration form.
.formWraper{
display: flex;
width: 55%;
height: 500px;
background-color: yellowgreen;
margin-top: 80px;
border-radius: 10px;
box-shadow:0px 0px 20px black;
}
/* code for left sectin of form */
.formDiv{
width: 50%;
padding: 8%;
background-color: lavender;
text-align: center;
border-radius: 10px 0px 0px 10px;
}
.formDiv h2 {
color: green;
margin-top: -5px;
}
/* code for right sectin of the registration form */
.welcomeDiv{
width: 50%;
padding: 10px;
background-image: url(image1.jpg);
background-size: cover;
text-align: center;
color: white;
}
.welcomeDiv h2 {
margin-top: 150px;
}
/* ---- code for Font Awsome social icons */
.socialBtn{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.icon{
width: 30px;
height: 30px;
border-radius: 15px;
background-color:lavender;
margin: 5px;
line-height: 30px;
box-shadow: 0px 0px 10px black;
}
.text{
font-size: small;
}
.orDiv {
width: 10%;
margin: 0 auto;
background-color: lavender;
position: relative;
top: -16px;
justify-content: center;
}
/* code for form input fields */
.formGroup{
width: 100%;
position: relative;
}
.formGroup input {
width: 90%;
padding: 10px;
margin-bottom: 10px;
border-style: none;
padding-left: 30px !important;
}
/* Code for Icones inside html form input */
.formGroup i {
position: absolute;
left: 0px;
top: 0px;
color: grey;
font-size: smaller;
margin: 10px !important;
}
input::placeholder {
position: relative;
left: 10px;
}
input:focus{
border-color: red;
}
.checkBox{
width: 100%;
margin-top: 2px;
}
.btn{
width: 70%;
padding: 15px;
background-color: green;
margin-top: 15px;
color: lavender;
border-radius: 20px;
border-style: none;
}
.btn2{
width: 70%;
padding: 15px;
background-color:transparent;
margin-top: 15px;
color: lavender;
border-radius: 20px;
border-style: none;
border: 2px solid rgb(247, 243, 243);
}
/* CSS mouse hover efects */
.btn:hover, .btn2:hover, .icon:hover{
background-color: rgb(7, 80, 35);
color: whitesmoke;
}
How to make User Registration Responsive?
Now, it’s time to make our HTML CSS registration responsive to mobile devices. We will use the following CSS media queries to make the right section hidden on mobile devices.
/* making HTML registration form responsive to mobile devices */
@media screen and (max-width: 1000px){
.formWraper{
width: 70%;
}
}
@media screen and (max-width: 670px){
.formDiv{
width: 90%;
border-radius: 10px 10px 10px 10px;
}
.welcomeDiv{
display: none;
}
}
If you find this post helpful please didn’t forget to Subscribe to our YouTube Channel. Your small help in this regard enables us to bring such type of free resource content for you!!!
