Design Cool Registration Form Using HTML & CSS

   Raja Tamil • Apr 29 •

In this article, I will be guiding you through how to design a cool HTML CSS Dating Registration Form step-by-step from scratch like the screenshot below. Just so you will be aware, I will be only showing you the design of the registration form using HTML and CSS.

html css form design

In order to get the most out of this blog, you should have knowledge of basic HTML and CSS. By the end of this article, you will be able to understand and build your own cool registration form!  Let’s get cracking!

Step 1: Download the Start Folder

I have already created a folder called Start and inside that folder, I have created an HTML file and a CSS file. You can download the folder here to follow along.

Step 2: Initialize the Form

The <form> element can be used to initialize a form that could be a contact, register or login form in any HTML page.  I am adding a <form>  element inside the <body> element in your HTML page.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Register Form Start</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <form class="signup-form" action="/register" method="post">
    </form>

  </body>
</html>

I have added three attributes to the <form> start tag, which are classaction and method. 

As you know, class attributes can be used to target an element in CSS or JavaScript normally referred to as selectors. If you are not sure about HTML attributes, take a look at my other blog by clicking here.  The purpose of the action attribute containing a URL or any server-side file name is to tell it to post the form values to that URL or the file name when submitting the form. The method attribute tells which HTTP method the browser should use to submit the form.

Step 3: Form Structure

Once we have the <form> element in place,  I add three more DIVs inside it representing the header, body and footer of the <form> element like in the code below.

<form class="signup-form" action="/register" method="post">

    <!-- form header -->
    <div class="form-header">
    </div>

    <!-- form body -->
    <div class="form-body">
    </div>
    
    <!-- form footer -->
    <div class="form-footer">
    </div>

</form>

Step 4: Form Header

Add an H1 element inside the .form-header element.

<!-- form header -->
<div class="form-header">
  <h1>Create Account</h1>
</div>

Now, we need to add some CSS code for .form-header in our CSS file like below.

@import url('httpss://fonts.googleapis.com/css?family=Roboto');

body {
  background:linear-gradient(to right, #78a7ba 0%, #385D6C 50%, #78a7ba 99%);
}

.signup-form {
  font-family: "Roboto", sans-serif;
  width:650px;
  margin:30px auto;
  background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
  border-radius: 10px;
}

.form-header  {
  background-color: #EFF0F1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.form-header h1 {
  font-size: 30px;
  text-align:center;
  color:#666;
  padding:20px 0;
  border-bottom:1px solid #cccccc;
}

I have an import statement at the top of the CSS code indicating that I am getting my favorite font from the Google font collection. If you would like to use a different font, you can go here.

The above CSS code is for the main form container and the header part of the form. At this stage, you should be able to see the header design on the browser when you refresh. Next, let’s add some HTML form elements inside .form-body one by one.

Step 5: Form Body [Firstname and Lastname]

In the HTML code below, I am creating a div with the class name .horizontal-group  inside .form-body. Then, I am creating two more DIVs with the same class name .form-group  inside .horizontal-group.  Adding an addtional .left or .right class represents where the .form-group is to be on the page. There are two more HTML elements <lable> and <input> inside.form-group as you can see below.

<!-- form body -->
<div class="form-body">

    <!-- Firstname and Lastname -->
    <div class="horizontal-group">
        <div class="form-group left">
            <label for="firstname" class="label-title">First name *</label>
            <input type="text" id="firstname" class="form-input" placeholder="enter your first name" required="required" />
        </div>
        <div class="form-group right">
            <label for="lastname" class="label-title">Last name</label>
            <input type="text" id="lastname" class="form-input" placeholder="enter your last name" />
        </div>
    </div>

</div>

Here is the CSS code for the firstname and lastname .horizontal-group.

/*---------------------------------------*/
/* Form Body */
/*---------------------------------------*/
.form-body {
  padding:10px 40px;
  color:#666;
}

.form-group{
  margin-bottom:20px;
}

.form-body .label-title {
  color:#1BBA93;
  font-size: 17px;
  font-weight: bold;
}

.form-body .form-input {
    font-size: 17px;
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    padding-left: 10px;
    padding-right: 10px;
    color: #333333;
    text-align: left;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
}



.horizontal-group .left{
  float:left;
  width:49%;
}

.horizontal-group .right{
  float:right;
  width:49%;
}

input[type="file"] {
 outline: none;
 cursor:pointer;
 font-size: 17px;
}

#range-label {
 width:15%;
 padding:5px;
 background-color: #1BBA93;
 color:white;
 border-radius: 5px;
 font-size: 17px;
 position: relative;
 top:-8px;
}


::-webkit-input-placeholder {
 color:#d9d9d9;
}

/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.form-footer {
 clear:both;
}


If you refresh the page at this stage after adding HTML and CSS code into your files, you should be able to see the styles applied to the page.

Step 6: Form Body [Email and Password]

Email is going to be a seperate block in HTML, while the Password and Confirm Password will be the same as firstname and lastname. Add the following code below after the end tag of the firstname and lastname .horizontal-group but inside the .form-body wrapper.

<!-- Email -->
<div class="form-group">
  <label for="email" class="label-title">Email*</label>
  <input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
</div>

<!-- Passwrod and confirm password -->
<div class="horizontal-group">

  <div class="form-group left">
    <label for="password" class="label-title">Password *</label>
    <input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
  </div>

  <div class="form-group right">
    <label for="confirm-password" class="label-title">Confirm Password *</label>
    <input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
  </div>

</div>

Since I am using the same CSS classes, I do not need to add any extra style for the above code.

Step 7: Form Body [Gender and Hobbies]

I am using a couple of radio buttons for the Gender input group and I am giving the same values to the name attributes in order to select only one at a time.

<!-- Gender and Hobbies -->
<div class="horizontal-group">

    <div class="form-group left">
        <label class="label-title">Gender:</label>
        <div class="input-group">
            <label for="male">
                <input type="radio" name="gender" value="male" id="male"> Male</label>
            <label for="female">
                <input type="radio" name="gender" value="female" id="female"> Female</label>
        </div>
    </div>

    <div class="form-group right">
        <label class="label-title">Hobbies</label>
        <div>
            <label>
                <input type="checkbox" value="Web">Music</label>
            <label>
                <input type="checkbox" value="iOS">Sports</label>
            <label>
                <input type="checkbox" value="Andriod">Travel</label>
            <label>
                <input type="checkbox" value="Game">Movies</label>
        </div>
    </div>
    
</div>

Step 8: Form Body [Source of Income and Income Amount]

 <!-- Source of Income and Income Amount -->
<div class="horizontal-group">

  <div class="form-group left" >
    <label class="label-title">Source of Income</label>
    <select class="form-input" id="level" >
      <option value="B">Employed</option>
      <option value="I">Self-employed</option>
      <option value="A">Unemployed</option>
    </select>
  </div>
  
  <div class="form-group right">
    <label for="experience" class="label-title">Income</label>
    <input type="range" min="20" max="100" step="5"  value="0" id="experience" class="form-input" onChange="change();" style="height:28px;width:78%;padding:0;">
    <span id="range-label">20K</span>
  </div>

</div>

For the Income range slide, we need to add the JavaScript code below in order to have the label showing the appropriate number as the slide is moved.

<!-- Script for range input label -->
    <script>
      var rangeLabel = document.getElementById("range-label");
      var experience = document.getElementById("experience");
      function change() {
      rangeLabel.innerText = experience.value + "K";
      }
    </script>

Step 9: Form Body [Upload Profile Picture and Age]

<!-- Profile picture and Age -->
<div class="horizontal-group">

  <div class="form-group left" >
    <label for="choose-file" class="label-title">Upload Profile Picture</label>
    <input type="file" id="choose-file" size="80">
  </div>
  
  <div class="form-group right">
    <label for="experience" class="label-title">Age</label>
    <input type="number" min="18" max="80"  value="18" class="form-input">
  </div>

</div>

Step 10: Form Body [Bio]

<!-- Bio -->
<div class="form-group">
  <label for="choose-file" class="label-title">Bio</label>
  <textarea class="form-input" rows="4" cols="50" style="height:auto"></textarea>
</div>

Step 11: Form Footer

<!-- form footer -->
<div class="form-footer">
  <span>* required</span>
  <button type="submit" class="btn">Create</button>
</div>
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.signup-form .form-footer  {
  background-color: #EFF0F1;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding:10px 40px;
  text-align: right;
  border-top: 1px solid #cccccc;
}

.form-footer span {
  float:left;
  margin-top: 10px;
  color:#999;  
  font-style: italic;
  font-weight: thin;
}

.btn {
   display:inline-block;
   padding:10px 20px;
   background-color: #1BBA93;
   font-size:17px;
   border:none;
   border-radius:5px;
   color:#bcf5e7;
   cursor:pointer;
}

.btn:hover {
  background-color: #169c7b;
  color:white;
}

At this stage, you should have the code that will look similar to the screenshot that I showed in the beginning of this article. There you have it! Thanks for reading!

Get Full Access to the Source Code  

Sharing is caring!