CSS Flexbox KILLER Responsive Registration Form With Source Code
Tags: html, css, programming
Published: 2021-10-25 11:51:54

By the end of this tutorial, you’re going to design this cool registration form very quickly using CSS Flexbox with step-by-step instructions from scratch. As you can see, it’s also responsive and will look nice on any screen. Finally, I’ll be using a bit of javascript for the slider functionality.

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/CSS-Flexbox-Responsive-Registration-Form-Final.gif)

###Set Background Colour Full Screen

As you can see from the final output, the registration form is nicely centered horizontally and vertically on the viewport of the browser.

To do that, create a **section** element with an id called **registration-page** inside the **body** tag.

```HTML
<body>
    <section id="registration-page">
    </section>
</body>
```

Now, make the section HTML element to fit the viewport of the browser. There are a few CSS techniques to achieve this. I’m going to use **height:100%** property in this tutorial. 

>*Recommended*
>[*CSS Make A Div Full Screen*](https://softauthor.com/css-make-a-div-height-full-screen/)

As you know, the **section** is a block-level element that will stretch the width to match its parent width, which is the **body** element in this case, and its width is 100% by default, so I do not have to be explicit about it inside the **#registration-page** CSS rule.

To stretch the height of the section HTML element to fit the screen, add **height:100%** to it as well as inside the **html** and **body** CSS rules.

Finally, add the background colour to match the final output.

```CSS
html, body {
    height:100%; 
}

#registration-page {
    height:100%;
    background:#78a7ba; 
}
```

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/1-CSS-flexbox-responsive-registration-form-background-full-screen-2-2048x1280.png)

As you can see from the above screenshot, the background color of the **#registration-page** did not fill the whole screen, because the **body** tag has some default margin which also triggers the scroll bar to appear.

Instead of getting rid of the default margin of the body tag, get rid of all default margins of the HTML elements.

To do this, create a wildcard CSS rule using asterisks (*) and set the margin to 0 like below. This doesn’t only get rid of the default margin of the body tag, but also the scroll bar.

```CSS
* {
    margin:0;
}
```

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/2-CSS-flexbox-responsive-registration-form-background-colour-without-margin-2048x1280.png)

###Make The Registration Form Center To The Screen

Now, let’s create a **form** HTML element with a class name **.signup-form** inside the **#registration-page** and add the text “Registration Form” inside so that I know where exactly the position of the **form** element is in the viewport of the browser.

```HTML
<body>
    <section id="registration-page">
        <form class="signup-form">
            Registration Form
        </form>
    </section>
</body>
```
>*Note: As you can see, I haven’t added any of the form attributes in the starting form tag because this tutorial is purely for the design of the registration form.*

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/3-CSS-flexbox-responsive-registration-form-registration-form-tag-2048x1280.png)

Adding just 3 properties of CSS Flexbox to a **#registration-page** will make its child [center horizontally and vertically](https://softauthor.com/css-how-to-center-a-div-horizontally-vertically/) on the viewport, in this case, the child is the **form** element.

- **display:flex** will covert an HTML element to a flexbox.
- **justify-content: center** will make the child element center horizontally on the screen.
- **align-items:center** will make the child element center vertically on the screen.

```CSS
#registration-page {
    height:100%;
    background:#78a7ba; 
    display:flex;
    justify-content: center;
    align-items: center;
    overflow:scroll;
}
```

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/4-CSS-flexbox-responsive-registration-form-registration-form-tag-2048x1280.png)

###Registration Form Responsive Width

Now, I want the form to take the full width of the screen in the small screen as well as give the maximum width so that it will not exceed when the screen is bigger.

```CSS
.signup-form  {
    flex:1;
    background-color: #EFF0F1;
}  
```

Setting flex:1 to the .signup-form will stretch the width of the signup-form to fit the screen and that’s what I want for the small screen.

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/5-CSS-flexbox-responsive-registration-form-signup-form-width-2048x1280.png)

But not for the bigger screen.

For that, set the max-width to 600px.

Also, add the border radius and border to match the final design.

```CSS
.signup-form  {
    flex:1;
    max-width:600px;
    background-color: #EFF0F1;
    border-radius: 10px;
    border: 1px solid #999;
}
```

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/6-CSS-flexbox-responsive-registration-form-signup-form-max-width-2048x1280.png)

>*Recommended*
>[*Must-Know CSS Flexbox Responsive Multi-Column Layout Explained*](https://softauthor.com/css-flexbox-responsive-multi-column-layout/)

###Registration Form Header

First, replace the text “Registration Form” with a div with the class name .form-header inside the .signup-form and add an h1 tag with the text “Create Account” inside.

```HTML
<form class="signup-form">
   <div class="form-header">
      <h1>Create Account</h1>
    </div>
</form>
```

First, add padding to the top and bottom of the form-header as well as to the border at the bottom.

```CSS
.form-header {
    padding:15px 0;
    border-bottom:1px solid #cccccc;
}
```

Then, change the font size, text align and color of the h1 element.

```CSS
.form-header h1 {
    font-size: 28px;
    text-align:center;
    color:#666;
}
```

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/7-CSS-flexbox-responsive-registration-form-header-2048x1280.png)

###Add Custom Font To The Form

The first step is to import the desired font at the top of the style.css file, in this case, Roboto.

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

>*Note: Feel free to choose your favourite font from the [Google Font Collection](https://fonts.google.com).*

The second step is to set the font-family property inside the wildcard CSS rule (*) so that the font will be applied to all the text in the registration form.

```CSS
* {
    margin:0;
    font-family: "Roboto", sans-serif;
}
```

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/10/8-CSS-flexbox-responsive-registration-form-header-custom-font-2048x1280.png)

>*Recommended*
>[*CSS Make Background Image Full Screen*](https://softauthor.com/css-make-background-image-full-screen/)

###Registration Form Body (Name)

As you can see from the final output, the form body has a two-column layout and is responsive as it becomes a one-column layout when on the small screen.

The good news is making a two-column layout is so easy with CSS flexbox.

After the form-header end tag, define div with a class name form-body which is where all of the input elements would go in.

[Continue Reading...](https://softauthor.com/css-flexbox-responsive-registration-form-with-source-code/)