Responsive Registration Form in HTML and CSS Source Code [ 8+ elements ]

responsive registration form in html : You can add the following List of HTML Input elements in your signup or registration form. How to create registration form in HTML with Pure CSS Source code download.

Responsive Registration Form elements

  • Company Logo
  • User name or Email
  • First and last name
  • Country/ Region/ State
  • Date and Time
  • Gender Selection
  • Signup Button
  • Phone number

responsive registration form in html

Registration Form in HTML and CSS

HTML CODE:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <!---<title> Responsive Registration Form | Pakainfo </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-information">
          <div class="box-card">
            <span class="information">Full Name</span>
            <input type="text" placeholder="Enter your name" required>
          </div>
          <div class="box-card">
            <span class="information">Username</span>
            <input type="text" placeholder="Enter your username" required>
          </div>
          <div class="box-card">
            <span class="information">Email</span>
            <input type="text" placeholder="Enter your email" required>
          </div>
          <div class="box-card">
            <span class="information">Phone Number</span>
            <input type="text" placeholder="Enter your number" required>
          </div>
          <div class="box-card">
            <span class="information">Password</span>
            <input type="text" placeholder="Enter your password" required>
          </div>
          <div class="box-card">
            <span class="information">Confirm Password</span>
            <input type="text" placeholder="Confirm your password" required>
          </div>
        </div>
        <div class="gender-information">
          <input type="radio" name="gender" id="paka-1">
          <input type="radio" name="gender" id="paka-2">
          <input type="radio" name="gender" id="paka-3">
          <span class="gender-title">Gender</span>
          <div class="type-user">
            <label for="paka-1">
            <span class="paka one"></span>
            <span class="gender">Male</span>
          </label>
          <label for="paka-2">
            <span class="paka two"></span>
            <span class="gender">Female</span>
          </label>
          <label for="paka-3">
            <span class="paka 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>

You can put simple your responsive registration form in html with Pure css Code.

Don’t Miss : how to create registration form in wordpress without plugin?

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];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: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.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: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.content form .user-information{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-information .box-card{
  margin-bottom: 15px;
  width: calc(100% / 2 - 20px);
}
form .box-card span.information{
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}
.user-information .box-card 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-information .box-card input:focus,
.user-information .box-card input:valid{
  border-color: #9b59b6;
}
 form .gender-information .gender-title{
  font-size: 20px;
  font-weight: 500;
 }
 form .type-user{
   display: flex;
   width: 80%;
   margin: 14px 0 ;
   justify-content: space-between;
 }
 form .type-user label{
   display: flex;
   align-items: center;
   cursor: pointer;
 }
 form .type-user label .paka{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: #d9d9d9;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}
 #paka-1:checked ~ .type-user label .one,
 #paka-2:checked ~ .type-user label .two,
 #paka-3:checked ~ .type-user 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: linear-gradient(135deg, #71b7e6, #9b59b6);
 }
 form .button input:hover{
  /* transform: scale(0.99); */
  background: linear-gradient(-135deg, #71b7e6, #9b59b6);
  }
 @media(max-width: 584px){
 .container{
  max-width: 100%;
}
form .user-information .box-card{
    margin-bottom: 15px;
    width: 100%;
  }
  form .type-user{
    width: 100%;
  }
  .content form .user-information{
    max-height: 300px;
    overflow-y: scroll;
  }
  .user-information::-webkit-scrollbar{
    width: 5px;
  }
  }
  @media(max-width: 459px){
  .container .content .type-user{
    flex-direction: column;
  }
}

I hope you get an idea about responsive registration form in html.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.