Design A Cool Registration Form Using HTML & CSS

Last modified on August 30th, 2023

Raja Tamil

83,891

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 in the screenshot below.

Just so you are aware, I will be only showing you the design part of the registration form using HTML and CSS.

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!

✅ Recommended:
CSS Flexbox KILLER Responsive Registration Form With Source Code

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 on any HTML page. I am adding a <form> element inside the <body> element in the 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 class, action 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.

✅ Recommended:
Build Responsive Real World Websites with HTML5 and CSS3

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>

✅ Recommended
Complete Flexbox Course: Learn CSS3 Flexbox in 2020

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 the .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 the .form-body one by one.

✅ Recommended
CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

Step 5: Form Body [Firstname and Lastname]

In the HTML code below, I am creating a div with the class name .horizontal-group inside the .form-body. Then, I am creating two more DIVs with the same class name .form-group inside the .horizontal-group. Adding an additional .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 the .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.

✅ Recommended
CSS Make A Div Full Screen

Step 6: Form Body [Email and Password]

Email is going to be a separate 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>

<!-- Password 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.

✅ Recommended
Responsive Web Design Essentials – HTML5 CSS3 Bootstrap

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>

✅ Recommended
How To Create A Simple Banner / Hero Unit in CSS

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>

✅ Recommended
Build Websites from Scratch with HTML & CSS

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 at the beginning of this article. There you have it! Thanks for reading!

Download Source Code

Show/Post Comments

HTML & CSS Tutorials