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:

  
    
    
    
     
   

  

    
Registration
    

      

        

          

            Full Name
            
          
          

            Username
            
          
          

            Email
            
          
          

            Phone Number
            
          
          

            Password
            
          
          

            Confirm Password
            
          
        
        

          
          
          
          Gender
          

            
            
            Male
          
          
            
            Female
          
          
            
            Prefer not to say
            
          
        
        

          
        
      
    
  

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: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: 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.