Responsive Registration Form in HTML and CSS

In this post we will build a responsive registration form just with plain HTML and CSS without any additional libraries.

Finished project

Prepared project

Here I already prepared several files for us.

<!DOCTYPE html>
<html>
  <head>
    <title>Monsterlessons Academy</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #037ef3;
  padding: 50px 0;
}

This is just a basic html page with no specific CSS except of background and some resets.

Rendering markup

First of all we must start with preparing our markup. Here we will write our markup using BEM. If you don't know what is BEM it is a specific methodology how we can write CSS out of the box without any additional libraries.

BEM

It is called BEM because it is Block, Element and Modifier. You will see how we use it in a second.

<div class="form-container">
  <div class="form-container__details">
    <div class="form-container__title">Registration</div>
    <div class="form-container__subtitle">
      Welcome to Monsterlessons Academy
    </div>
  </div>
</div>

Here we created a block form-container. We prefixed all child element with 2 underscored. These are elements of our block.

When we write code in such way we avoid problem with global styles as for us only blocks are global now.

Styling form-container

Let's add styles for our form-container.

.form-container {
  width: 100%;
  background: #fff;
  padding: 30px;
  max-width: 450px;
  border-radius: 10px;
  box-shadow: rgba(3, 3, 3, 0.1) 10px 0px 50px;
}

.form-container__details {
  margin-bottom: 40px;
  text-align: center;
}

.form-container__title {
  font-size: 38px;
  color: #555;
  margin-bottom: 7px;
}

.form-container__subtitle {
  font-size: 18px;
  color: #999;
}

As you can see in browser our form container is correctly styled.

Form container

Form block

Now let's add our form block. And we want to create new block form which is fully reusable and is not related to form-container block.

<form class="form">
  <div class="form__field">
    <div class="form__label">Name</div>
    <input class="form__input" />
  </div>
  <div class="form__field">
    <div class="form__label">Email</div>
    <input class="form__input" />
  </div>
  <div class="form__field">
    <div class="form__label">Password</div>
    <input class="form__input" type="password" />
  </div>
  <button class="form__submit">Register</button>
</form>

So here is the same approach. We create form__field which has a label and an input inside. And all our child elements are prefixed with form block.

And the last part is the bottom of our form. From my perspective it doesn't have anything to do with form and it belongs to form-container.

<div class="form-container__line-divider"></div>
<div class="form-container__links">
  <a href="#" class="form-container__link">Login</a>
  <a href="#" class="form-container__link">Forgot password</a>
</div>

Here we have our divider and links to different pages.

Styling form block

Now let's cover our form with styles.

.form__field {
  margin-bottom: 30px;
}

.form__label {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #777;
}

.form__input {
  width: 100%;
  padding: 25px 15px;
  border: 0;
  background: #f0f0f0;
  border-radius: 5px;
  font-size: 18px;
  color: #555;
  font-weight: 600;
}

.form__submit {
  background: #037ef3;
  color: #fff;
  font-weight: 600;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  padding: 25px 15px;
  border: 0;
  transition: all 0.8s;
  font-size: 18px;
}

.form__submit:hover {
  background: #0271da;
}

We just styled our form-field and it's child element. Now we can reuse a block form-field with labels and inputs inside for any forms of our project.

The next step is to style bottom part of form container.

.form-container__line-divider {
  background: #037ef3;
  width: 30px;
  height: 3px;
  border-radius: 50px;
  margin: 30px auto;
}

.form-container__links {
  display: flex;
  justify-content: space-between;
}

.form-container__link {
  font-size: 15px;
  font-weight: 600;
  color: #777;
}

Now our form looks almost finished.

Finished project

Responsive form

But we can add a few touches. If we make the page really narrow then our form doesn't have enough paddings to be good readable. Let's apply some media queries to fix it.

@media (max-width: 600px) {
  .form-container {
    padding: 30px 25px;
    width: 90%;
  }
  .form__input,
  .form__submit {
    padding: 18px 15px;
  }
}

Now our form is fully responsive. And also I you are interested to learn how to become a senior developer make sure to check this post also.

📚 Source code of what we've done