Form, SignUp Form

Html registration form template with source code

In this lesson, we are going to learn how to create an HTML responsive registration form. In the last article, we learned how to create a Responsive HTML footer template.

What is the Registration form?

A form is a document used for getting the data of users. Users visit the website and input their data and that data is used to store it in the database. So we can say that form is used for getting information and it has many types.

Content of responsive Html registration form:

In this specific lesson, we are going to learn about registration forms. We have created a form using two frontend languages Html and CSS. We have developed the fields for inserting different data (name, father name, username, password, etc.).

This registration form is responsive across all devices (cell phone, tab, and PC/laptop). This form contains different fields for getting the data of users.

If you liked this design or want to add this registration form to your project or website then you can copy and download the source code in this article. Scroll down to get the source code of this registration form.

How to create files of HTML and CSS in your editor for the registration form?

Name the HTML file as registrationform.html and CSS file registrationform.css and then paste the given code into these files. CSS because without these extensions browser can not identify the type of the file.

Source code of registration form of HTML file

The source code of the Html file is given below:

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Responsive Registration Form | Fantacy Design </title>
    <link rel="stylesheet" href="style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="container">
    <div class="title">Registration</div>
    <div class="content">
      <form action="#">
        <div class="user-details">
          <div class="input-box">
            <span class="details">Full Name</span>
            <input type="text" placeholder="Enter your name" required>
          </div>
          <div class="input-box">
            <span class="details">Username</span>
            <input type="text" placeholder="Enter your username" required>
          </div>
          <div class="input-box">
            <span class="details">Email</span>
            <input type="text" placeholder="Enter your email" required>
          </div>
          <div class="input-box">
            <span class="details">Phone Number</span>
            <input type="text" placeholder="Enter your number" required>
          </div>
          <div class="input-box">
            <span class="details">Password</span>
            <input type="text" placeholder="Enter your password" required>
          </div>
          <div class="input-box">
            <span class="details">Confirm Password</span>
            <input type="text" placeholder="Confirm your password" required>
          </div>
        </div>
        <div class="gender-details">
          <input type="radio" name="gender" id="dot-1">
          <input type="radio" name="gender" id="dot-2">
          <input type="radio" name="gender" id="dot-3">
          <span class="gender-title">Gender</span>
          <div class="category">
            <label for="dot-1">
            <span class="dot one"></span>
            <span class="gender">Male</span>
          </label>
          <label for="dot-2">
            <span class="dot two"></span>
            <span class="gender">Female</span>
          </label>
          <label for="dot-3">
            <span class="dot three"></span>
            <span class="gender">Prefer not to say</span>
            </label>
          </div>
        </div>
        <div class="button">
          <input type="submit" value="Register">
        </div>
      </form>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>

<head>

<title> Responsive Registration Form | Fantacy Design </title>

</head>

<body>

<div class="title">Registration</div>

</div>

<span class="details">Username</span>

</div>

<span class="details">Email</span>

</div>

<span class="details">Phone Number</span>

</div>

<span class="details">Password</span>

</div>

<span class="details">Confirm Password</span>

</div>

<span class="gender-title">Gender</span>

</label>

<span class="gender">Female</span>

</label>

<span class="gender">Prefer not to say</span>

</label>

</div>

</div>

</form>

</div>

</body>

</html>

Source code of CSS file

The source code of the CSS file is given below:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #FBAB7E;
 background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

}
.container{
  max-width: 700px;
  width: 100%;
  background-color: #fff;
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.container .title{
  font-size: 25px;
  font-weight: 500;
  position: relative;
}
.container .title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 30px;
  border-radius: 5px;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.content form .user-details{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-details .input-box{
  margin-bottom: 15px;
  width: calc(100% / 2 - 20px);
}
form .input-box span.details{
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}
.user-details .input-box input{
  height: 45px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
  border-color: #FBAB7E;
}
 form .gender-details .gender-title{
  font-size: 20px;
  font-weight: 500;
 }
 form .category{
   display: flex;
   width: 80%;
   margin: 14px 0 ;
   justify-content: space-between;
 }
 form .category label{
   display: flex;
   align-items: center;
   cursor: pointer;
 }
 form .category label .dot{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: #d9d9d9;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}
 #dot-1:checked ~ .category label .one,
 #dot-2:checked ~ .category label .two,
 #dot-3:checked ~ .category label .three{
   background: #9b59b6;
   border-color: #d9d9d9;
 }
 form input[type="radio"]{
   display: none;
 }
 form .button{
   height: 45px;
   margin: 35px 0
 }
 form .button input{
   height: 100%;
   width: 100%;
   border-radius: 5px;
   border: none;
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 1px;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

}
 form .button input:hover{
  /* transform: scale(0.99); */
  background-color: #FBAB7E;
background-image: linear-gradient(250deg, #FBAB7E 0%, #F7CE68 100%);

}
 @media(max-width: 584px){
 .container{
  max-width: 100%;
}
form .user-details .input-box{
    margin-bottom: 15px;
    width: 100%;
  }
  form .category{
    width: 100%;
  }
  .content form .user-details{
    max-height: 300px;
    overflow-y: scroll;
  }
  .user-details::-webkit-scrollbar{
    width: 5px;
  }
  }
  @media(max-width: 459px){
  .container .content .category{
    flex-direction: column;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins',sans-serif;

}

body{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 10px;

background-color: #FBAB7E;

}

.container{

max-width: 700px;

width: 100%;

background-color: #fff;

padding: 25px 30px;

border-radius: 5px;

box-shadow: 0 5px 10px rgba(0,0,0,0.15);

}

.container .title{

font-size: 25px;

font-weight: 500;

position: relative;

}

.container .title::before{

content: "";

position: absolute;

left: 0;

bottom: 0;

height: 3px;

width: 30px;

border-radius: 5px;

}

.content form .user-details{

display: flex;

flex-wrap: wrap;

justify-content: space-between;

margin: 20px 0 12px 0;

}

form .user-details .input-box{

margin-bottom: 15px;

width: calc(100% / 2 - 20px);

}

form .input-box span.details{

display: block;

font-weight: 500;

margin-bottom: 5px;

}

.user-details .input-box input{

height: 45px;

width: 100%;

outline: none;

font-size: 16px;

border-radius: 5px;

padding-left: 15px;

border: 1px solid #ccc;

border-bottom-width: 2px;

transition: all 0.3s ease;

}

.user-details .input-box input:focus,

.user-details .input-box input:valid{

border-color: #FBAB7E;

}

form .gender-details .gender-title{

font-size: 20px;

font-weight: 500;

}

form .category{

display: flex;

width: 80%;

margin: 14px 0 ;

justify-content: space-between;

}

form .category label{

display: flex;

align-items: center;

cursor: pointer;

}

form .category label .dot{

height: 18px;

width: 18px;

border-radius: 50%;

margin-right: 10px;

background: #d9d9d9;

border: 5px solid transparent;

transition: all 0.3s ease;

}

#dot-1:checked ~ .category label .one,

#dot-2:checked ~ .category label .two,

#dot-3:checked ~ .category label .three{

background: #9b59b6;

border-color: #d9d9d9;

}

form input[type="radio"]{

display: none;

}

form .button{

height: 45px;

margin: 35px 0

}

form .button input{

height: 100%;

width: 100%;

border-radius: 5px;

border: none;

color: #fff;

font-size: 18px;

font-weight: 500;

letter-spacing: 1px;

cursor: pointer;

transition: all 0.3s ease;

background-color: #FBAB7E;

}

form .button input:hover{

/* transform: scale(0.99); */

background-color: #FBAB7E;

}

@media(max-width: 584px){

.container{

max-width: 100%;

}

form .user-details .input-box{

margin-bottom: 15px;

width: 100%;

}

form .category{

width: 100%;

}

.content form .user-details{

max-height: 300px;

overflow-y: scroll;

}

.user-details::-webkit-scrollbar{

width: 5px;

}

@media(max-width: 459px){

.container .content .category{

flex-direction: column;

}

That’s how you can create a registration form in HTML and CSS. If you found any type of problem in understanding any tag or property of HTML and CSS then you can click here for understanding all the tags and properties of HTML and CSS.

If you like this design then must like it and follow us.

Thanks for reading this article.

Download Source Code