Responsive Registration Form using HTML and CSS

Responsive registration form is a great project for beginners. Would you like to know how to create a simple registration form using HTML and CSS?

No need to worry, this tutorial will help you. Here I have shown how the Responsive Registration Form HTML CSS is created.

Many times we see such forms on different websites when we create a new account. Registration pages are twofold. One where an account can be created with a little bit of information. In another case, a lot of information has to be given.

Responsive Registration Form 

 This design is made very simple. There are four places to input and two dropdown style boxes. Among the places to input are first name, last name, email id, and mobile number. There are also two Sylhet boxes. 

There is a small button at the end of all to submit. All in all, it is a beautiful and awesome registration form that has been created with the help of HTML and CSS. The most important point is that I did not use any kind of bootstrap here to create this HTML Registration Form.

First I made a box on the webpage. I used a heading in that box. This heading uses blue color in the background to make it look more beautiful and clear. Then there is space to input first name and last name. 

These two inputs are positioned side by side. Then the email ID and mobile number are in the input field. You can create many more input boxes here if you want.

Responsive Registration Form HTML CSS

In this article, you will fully know how I have created a simple registration form in HTML. For this, you need to have a basic idea about HTML and CSS. If you know the basics then you can learn how to create a registration form from this tutorial. 

At the end of all, you will get a download button where you will get the required source code. First, create an HTML and CSS file then follow the complete instructions given below.

Step 1: Basic structure of registration form

I have created the basic structure of the registration form using the following HTML and CSS. I used light blue as the background color of the web page and white as the background color of this box. 

The height here will depend on the amount of content. A shadow has been used all around which has further enhanced the beauty.

<div class="wrapper">

 <div class="form_container">

   <form name="form">

  </form>

 </div>

</div>

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  outline: none;

  font-family: sans-serif;

}

body{

  height: 100vh;

  background: #e1edf9;

}

.wrapper{

  max-width: 450px;

  width: 100%;

  margin: 30px auto 0;

  padding: 10px;

}

.wrapper .form_container{

  background: #fff;

  padding: 30px;

  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);

  border-radius: 3px;

}

Step 2: Add headings to the form

Now I have added a heading or title to the Registration Form. I have used h2 tags for headings. Then I designed it with the help of CSS. 

I used text-align: center to keep the text in the middle and I used blue as the background color. Font-size: 19px helped to increase the text size a bit.

  <div class="heading">

     <h2>Registion Form</h2>

  </div>

.heading{

  background: #015a80;

  margin: -30px;

  text-align: center;

  color: white;

  font-size: 19px;

  margin-bottom: 35px;

  padding: 10px;

}

Step 3: Create a box to input the name

Now I have created a box to input first name and last name using the input function.

<div class="form_wrap fullname">

  <div class="form_item">

      <label>First Name</label>

      <input type="text"> 

  </div>

  <div class="form_item">

      <label>Last Name</label>

      <input type="text">

  </div>

</div>

 Now I have designed the places to input with the help of CSS. Here I have added the code required to design the input box. As a result, there is no need to add a separate CSS code for other input boxes.

 Also if you create a lot more input boxes then you don't have to add any extra CSS. The height of the input space depends on the padding.

.wrapper .form_container .form_item{

  margin-bottom: 25px;

}

.form_wrap.fullname,

.form_wrap.select_box{

  display: flex;

}

.form_wrap.fullname .form_item,

.form_wrap.select_box .form_item{

  width: 50%;

}

.form_wrap.fullname .form_item:first-child,

.form_wrap.select_box .form_item:first-child{

  margin-right: 4%;

}

.wrapper .form_container .form_item label{

  display: block;

  margin-bottom: 5px;

}

.form_item input[type="text"],

.form_item select{

  width: 100%;

  padding: 10px;

  font-size: 16px;

  border: 1px solid #dadce0;

  border-radius: 3px;

}

.form_item input[type="text"]:focus{

  border-color: #6271f0;

}

Step 3: Create email and phone no input boxes

Now I have created a place to input the email ID in this registration form. I used levels to add text.

<div class="form_wrap">

  <div class="form_item">

    <label>Email Address</label>

    <input type="text">

  </div>

</div>

Now, this is how I created an input box to input phone numbers.

<div class="form_wrap">

   <div class="form_item">

     <label>Phone</label>

     <input type="text">

  </div>

</div>

Step 4: Create a select box in the Registration Form

Now I have created a dropdown selection box in this simple registration form. Two such Sylhet boxes have been used here. 

By clicking on the box you will see many types of dropdowns here. You will click on whichever menu is correct. I have used two dropdowns here, one for the country and the other for the city.

<div class="form_wrap select_box">

  <div class="form_item">

    <label>City</label>

       <select name="country">

  <option>London</option>

  <option>Paris</option>

  <option>Moscow</option>

  <option>Tokyo</option>

       </select>

  </div>

  <div class="form_item">

    <label>Country</label>

       <select name="country">

  <option>India</option>

  <option>Canada</option>

  <option>Germany</option>

  <option>Australia</option>

       </select>

 </div>

</div>

Step 5: Create a button in the HTML registration form

Now I have created a registration button. For this, I have used the input function. This button is equal to the length of the entire form. I have used blue as the background color and its height depends on the padding.

 <div class="btn">

    <input type="submit" value="Get Started">

 </div>

.btn input[type="submit"]{

  background: #1598d4;

  border: 1px solid #1598d4;

  padding: 10px;

  width: 100%;

  font-size: 16px;

  letter-spacing: 1px;

  border-radius: 3px;

  cursor: pointer;

  color: #fff;

}

 Hope you learned from this tutorial how I created this simple registration form using HTML and CSS. If there is any problem while making this Responsive Registration Form, you can definitely let me know by commenting. Below you will find the required source code download link.

The download will start automatically