How to Create a Stacked Form With CSS

Forms are an essential aspect of web development as they are used for various purposes such as collecting user data, feedback, and information.

Stacked forms are a popular form design in which form elements are stacked vertically, making it easier for users to fill out.

In this tutorial, we’ll explore how to create a stacked form with CSS.


Introduction to Stacked Forms

Stacked forms are a simple and straightforward form design that makes it easy for users to fill out.

Instead of having form elements arranged horizontally, stacked forms have form elements arranged vertically, making it easier to understand and complete.

Stacked forms are a great choice for web pages with limited space as they take up less space horizontally.

HTML Structure

Before we dive into styling the form with CSS, we need to have a solid HTML structure in place.

The HTML structure for a stacked form can be as simple as this:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="Submit">
</form>

This HTML structure consists of a form element with labels and input fields for collecting name, email, and password.

You can add as many form elements as you need to collect the required data.

Styling the Form with CSS

Now that we have the HTML structure in place, we can start styling the form with CSS.

Here is a basic CSS code to style a stacked form:

form {
width: 50%%;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
}

label, input[type="submit"] {
display: block;
margin-bottom: 10px;
}

label {
font-weight: bold;
}

input[type="text"], input[type="email"], input[type="password"] {
width: 100%%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
}

input[type="submit"] {
width: 100%%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}


In this CSS code, we first set the width of the form to 50% and center it on the page.

We then add padding and a background color to the form to give it a clean and polished look.

Next, we set the display property of the label and submit button to block, so they take up the full width of the form.

We also set a margin-bottom property of 10px to create some space between the form elements.

We then set the font-weight of the label to bold to make it clear that it’s a label.

For the input fields, we set the width to 100% and add padding to make it easier for users to enter data.

We also set the font-size to 16px and add a border-radius of 5px to give the form a rounded look.

Finally, we style the submit button by setting its width to 100% and adding padding and a background color.

We also set the color to white to make the text stand out and add a border-radius of 5px to make the button look rounded.


Conclusion

Creating a stacked form with CSS is straightforward and easy.

By following the steps outlined in this blog post, you can create a clean and polished form that is easy for users to fill out.

If you want to further customize your form, feel free to play around with the CSS code and add your own styles to make the form look just the way you want it to.