Home » How To Create Responsive Registration Form in HTML and CSS

How To Create Responsive Registration Form in HTML and CSS

Categories: Forms
Responsive registration form design in HTML and CSS

This blog post is easy to understand for beginners. By the end of this article, you will not only have a working registration form design, but you will also understand how to make it look modern and professional.

Designing a registration form is one of the most important parts of any website. Whether it’s a blog, an e-commerce site, or a learning platform – registration forms help users sign up easily. In this tutorial, we will learn how to create a responsive registration form in HTML and CSS step by step.

Watch the Video Tutorial: Responsive Registration Form in HTML and CSS

Why Registration Forms are Important?

Before diving into the coding part, let’s quickly understand why registration forms matter:

  • They help users create accounts easily.
  • They allow websites to collect basic information (name, email, phone, password).
  • A well-designed form improves user experience (UX).

User experience is paramount in web development. Responsive registration forms ensure that users can easily sign up for your services regardless of whether they’re using a smartphone during their commute, a tablet at home, or a desktop computer at the office. Studies show that poorly designed forms can lead to abandonment rates as high as 80%, making responsive design crucial for conversion optimization.

Tools & Technologies Used

For this project, we will only use:

  • HTML5 → To structure the registration form.
  • CSS3 → To style and make the form responsive.
  • Font Awesome → For modern icons inside the form.

No JavaScript or external frameworks are required – keeping it simple and beginner-friendly.

Features of Our Registration Form

Our form includes:

  • First Name & Last Name fields
  • Email address field
  • Phone number field
  • Password & Confirm Password fields
  • Beautiful icons for each input field
  • Responsive design for mobile & desktop
  • Stylish Register button with hover effect

HTML Code:

Let’s start with the HTML part of the registration form.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive registration form in html and css || Ravi Web</title>
  <!-- ============== Font Awesome cdn Link===================== -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- ================CSS LINK=========== -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="form-container">
    <h1>Register <span>Form</span></h1>
    <form action="">
      <!-- =========row section============ -->
      <div class="form-row">
        <div class="form-col">
          <input type="text" placeholder="First Name">
          <div class="icon"><i class="fa fa-user"></i></div>
        </div>

        <div class="form-col">
          <input type="text" placeholder="Last Name">
          <div class="icon"><i class="fa fa-user"></i></div>
        </div>

      </div>
      <!-- ========End row section============ -->

      <!-- =========row section============ -->
      <div class="form-row">
        <div class="form-col">
          <input type="email" placeholder="Email">
          <div class="icon"><i class="fa fa-envelope"></i></div>
        </div>
      </div>
      <!-- ========End row section============ -->
      <!-- =========row section============ -->
      <div class="form-row">
        <div class="form-col">
          <input type="text" placeholder="Phone Number">
          <div class="icon"><i class="fa fa-phone"></i></div>
        </div>
      </div>
      <!-- ========End row section============ -->
      <!-- =========row section============ -->
      <div class="form-row">
        <div class="form-col">
          <input type="password" placeholder="Password">
          <div class="icon"><i class="fa fa-lock"></i></div>
        </div>

        <div class="form-col">
          <input type="password" placeholder="Confirm Password">
          <div class="icon"><i class="fa fa-lock"></i></div>
        </div>

      </div>
      <!-- ========End row section============ -->
      <!-- =========row section============ -->
      <div class="form-row">
        <button type="button" class="button">Register</button>
      </div>
      <!-- ========End row section============ -->
    </form>

  </div>
</body>

</html>

CSS Code:

Now let’s style the form using CSS.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  min-height: 100vh;
  padding: 50px 15px;
  justify-content: center;
  align-items: center;
  background: rgb(155, 171, 255);
  background: linear-gradient(135deg, #9babff 0%, #6e44fe 55%);
}

.form-container {
  max-width: 700px;
  background: #fff;
  width: 100%;
  padding: 25px 30px;
  border-radius: 15px;
}

.form-container h1 {
  font-size: 25px;
  letter-spacing: 0px;
  font-weight: 700;
  text-align: center;
  color: #1F2667;
  position: relative;
  text-transform: uppercase;
}

.form-container h1 span {
  color: #6c42ff;
}

.form-container h1::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 4px;
  background: rgb(155, 171, 255);
  background: linear-gradient(135deg, #9babff 0%, #6e44fe 55%);
  border-radius: 5px;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
}

.form-container form {
  margin-top: 60px;
}

.form-container .form-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 20px;
  margin-bottom: 35px;
}

.form-container .form-row .form-col {
  width: 100%;
  position: relative;
}

.form-container .form-row .form-col input {
  width: 100%;
  background-color: #fff;
  border: 2px solid #6c42ff;
  color: #38475a;
  outline: none;
  padding: 20px 25px;
  border-radius: 15px;
  font-size: 16px;
}

.form-container .form-row .form-col .icon {
  position: absolute;
  top: -20px;
  left: 15px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  background-color: #6e44fe;
  color: #fff;
  width: 60px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

.form-container .form-row .button {
  width: 100%;
  background: linear-gradient(135deg, #9babff 0%, #6e44fe 55%);
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: 600;
  padding: 16px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.form-container .form-row .button:hover {
  opacity: 0.8;
}

@media(max-width:576px) {
  .form-container .form-row {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .form-container .form-row .form-col {
    margin-bottom: 20px;
  }
}

Make It Responsive

Thanks to Flexbox and media queries, this form works smoothly on mobile, tablet, and desktop screens.

  • On desktop, input fields are placed side by side.
  • On mobile, fields stack vertically for easy access.

This ensures your registration form is user-friendly on all devices.

Tips for Improving the Form

  1. Add JavaScript validation to check if passwords match.
  2. Connect the form to a backend (PHP, Node.js, etc.) to store user data.
  3. Use stronger password requirements (uppercase, lowercase, numbers, symbols).
  4. Add reCAPTCHA to prevent spam registrations.

Conclusion

In this tutorial, we created a responsive registration form in HTML and CSS with modern styling and icons. You can customize the colors, fonts, and button design as per your project needs.

This form is perfect for:

  • Login & signup pages
  • Membership websites
  • Educational portals
  • E-commerce platforms
Live Demo

Related