How to Create Responsive Signup form by using HTML and CSS

simple card design

Creating a responsive signup page using HTML and CSS involves several steps. Below is a step-by-step guide to help you create one:

Step 1: Set Up Your Project

Before you start coding, create a project folder and set up your HTML and CSS files. You can name your HTML file something like signup.html and your CSS file something like style.css. Make sure they are in the same folder.

Step 2: Create the HTML Structure

In your signup.html file, create the basic HTML structure:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Create Responsive Signup form by using HTML and CSS | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="cont">
        <header>Signup Form</header>
        <form action="#" class="form">
          <div class="input-cont">
            <label>Full Name</label>
            <input type="text" placeholder=" full name" required />
          </div>
  
          <div class="input-cont">
            <label>Email</label>
            <input type="text" placeholder="Email address" required />
          </div>
  
          <div class="col">
            <div class="input-cont">
              <label>Phone Number</label>
              <input type="number" placeholder="000-0000-000" required />
            </div>
            <div class="input-cont">
              <label>DOB</label>
              <input type="date" placeholder="Birth date" required />
            </div>
          </div>
          <div class="gender-box">
            <h3>Gender</h3>
            <div class="gender-option">
              <div class="gender">
                <input type="radio" id="check-male" name="gender" checked />
                <label for="check-male">Male</label>
              </div>
              <div class="gender">
                <input type="radio" id="check-female" name="gender" />
                <label for="check-female">Female</label>
              </div>
              <div class="gender">
                <input type="radio" id="check-other" name="gender" />
                <label for="check-other">Other</label>
              </div>
            </div>
          </div>
          <div class="input-cont address">
            <label>Address</label>
            <input type="text" placeholder="Address" required />
            <div class="col">
              <input type="text" placeholder="Region" required />
              <input type="number" placeholder="PIN" required />
            </div>
          </div>
          <button>Submit</button>
        </form>
      </section>
  </body>
</html>
    

This code sets up the basic structure of your signup page with a form containing fields for username, email, and password.

Step 3: Create the CSS Styles

In your style.css file, add the CSS styles to make the page responsive and visually appealing:


      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: #f2e5f0;
      }
      .cont {
        position: relative;
        max-width: 700px;
        width: 100%;
        background: #fff;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      }
      .cont header {
        font-size: 1.5rem;
        color: #333;
        font-weight: 500;
        text-align: center;
      }
      .cont .form {
        margin-top: 30px;
      }
      .form .input-cont {
        width: 100%;
        margin-top: 20px;
      }
      .input-cont label {
        color: #333;
      }
      .form :where(.input-cont input, .select-box) {
        position: relative;
        height: 50px;
        width: 100%;
        outline: none;
        font-size: 1rem;
        color: #707070;
        margin-top: 8px;
        border: 1px solid #ddd;
        border-radius: 40px;
        padding: 0 15px;
      }
      .input-cont input:focus {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
      }
      .form .col {
        display: flex;
        column-gap: 15px;
      }
      .form .gender-box {
        margin-top: 20px;
      }
      .gender-box h3 {
        color: #333;
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 8px;
      }
      .form :where(.gender-option, .gender) {
        display: flex;
        align-items: center;
        column-gap: 50px;
        flex-wrap: wrap;
      }
      .form .gender {
        column-gap: 5px;
      }
      .gender input {
        accent-color: #8f217d;
      }
      .form :where(.gender input, .gender label) {
        cursor: pointer;
      }
      .gender label {
        color: #707070;
      }
      .address :where(input, .select-box) {
        margin-top: 15px;
      }
      .select-box select {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        color: #707070;
        font-size: 1rem;
      }
      .form button {
        height: 55px;
        width: 100%;
        color: #fff;
        font-size: 1rem;
        font-weight: 400;
        margin-top: 30px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        background: #b827a0;
        border-radius: 40px;
      }
      .form button:hover {
        background: #fa38b0;
      }
      @media screen and (max-width: 500px) {
        .form .col {
          flex-wrap: wrap;
        }
        .form :where(.gender-option, .gender) {
          row-gap: 15px;
        }
      }
         

These CSS styles create a clean and responsive design for your signup page.

Step 4: Testing

Open your signup.html file in a web browser to test your signup page. Make sure it looks and functions as expected on different screen sizes.

Congratulations! You've created a responsive signup page using HTML and CSS. You can further enhance it by adding JavaScript for form validation and backend integration if needed.