Design Cool Registration Form Using HTML & CSS
Published: 2021-06-28 12:52:24

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 of the registration form using HTML and CSS.

![alt text](https://softauthor.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-26-at-7.20.51-PM.png)

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](https://github.com/softauthor/HTMLCSS/tree/master/Registration%20Form) to follow along.

>✅ *Recommended:*
>[*Web Design for Beginners: Real World Coding in HTML & CSS*](https://www.udemy.com/course/web-design-for-beginners-real-world-coding-in-html-css/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-Lyj6Do.TSA1nlFLrEv3Xvg&LSNPUBID=nsrC6aUWa3g&utm_source=aff-campaign&utm_medium=udemyads)

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

```HTML
<!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.

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*](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-3sTkqENJzKb6.MG2xAPISw&utm_source=aff-campaign&LSNPUBID=nsrC6aUWa3g&utm_medium=udemyads)

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

```HTML
<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*](https://www.udemy.com/course/flexbox-tutorial/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-R0.OaijGvPKDybW.Aj_T.g&LSNPUBID=nsrC6aUWa3g&utm_source=aff-campaign&utm_medium=udemyads)

###Step 4: Form Header

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

```HTML
<!-- 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.

```CSS
@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](https://fonts.google.com).

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.

>✅ *Recommended*
>[*CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)*](https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-xu1pcN.3.MZNXkVh1ZXJtQ&LSNPUBID=nsrC6aUWa3g&ranMID=39197&ranEAID=je6NUbpObpQ&ranSiteID=je6NUbpObpQ-GfIiFUqt3OmoO6KGyqxfmg&LSNPUBID=je6NUbpObpQ&utm_source=aff-campaign&utm_medium=udemyads)


###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 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 **.form-group** as you can see below.

```HTML
<!-- 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**.

```CSS
/*---------------------------------------*/
/* 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.

[Continue Reading...](https://softauthor.com/registration-form-design-in-html-css-with-code/)