How to Create a Responsive Sign Up Form With CSS

Sign up forms are an essential part of most websites, and with the increasing popularity of mobile devices, it’s crucial to make them responsive.

A responsive sign up form will adjust its layout and elements to fit any screen size, ensuring that users can easily fill out and submit the form, regardless of the device they’re using.

In this tutorial, we will walk through the steps to create a responsive sign up form using CSS.

HTML Markup

Before we get into the CSS, let’s start by creating the HTML markup for our form.

We’ll use a standard HTML form tag and include several input fields for the user’s name, email address, and password.

We’ll also add a submit button to allow the user to submit the form once it’s filled out.

<form>
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
  </div>
  <button type="submit">Sign Up</button>
</form>

CSS Styling

Now that we have our HTML markup, let’s add some basic styling to the form using CSS.

We’ll add some padding and margins to create space between the form elements and add a background color to the form.

form {
  background-color: #f2f2f2;
  padding: 20px;
  margin: 20px 0;
}

.form-group {
  margin: 20px 0;
}

label, input[type="text"], input[type="email"], input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

Responsive Design

Now that we have our basic form styling in place, let’s make it responsive. We’ll use CSS media queries to change the layout of the form based on the screen size.

For smaller screens, such as mobile devices, we’ll make the form elements full-width and stack them vertically.

For larger screens, such as desktops, we’ll arrange the form elements side-by-side.

@media (max-width: 600px) {
form {
padding: 10px;
}

.form-group {
width: 100%;
margin: 10px 0;
}

label, input[type="text"], input[type="email"], input[type="password"] {
width: 100%;
}
}

@media (min-width: 601px)
{
.form-group {
display: inline-block;
width: 49%;
vertical-align: top;
margin: 0 1% 20px 0;
}

label {
display: inline-block;
width: 45%;
text-align: right;
padding-right: 10px;
}

input[type="text"], input[type="email"], input[type="password"] {
width: 55%;
display: inline-block;
}

button[type="submit"] {
width: 100%;
}
}