How to Create a Stacked Form using CSS ?

Last Updated : 16 Feb, 2024

A Vertically Stacked Form places labels and inputs on top of each other. To create a stacked form using CSS, we will first define a container with a maximum width, padding, and border radius for styling.

Preview:

Screenshot-2024-02-08-105949

Approach:

Begin by creating the basic HTML structure, including the form container and form elements using appropriate tags.
Apply CSS styles to the container, setting its maximum width, padding, border radius, and subtle box shadow for a clean appearance.
Style form elements individually, adjusting their width, padding, borders, and font size. Ensure a consistent and visually appealing look.
Use flexbox or grid CSS properties to center the form container on the page, creating a balanced and aesthetically pleasing layout.
Include placeholder attributes within input fields to provide users with guidance on the expected input for each form element.

Example: Implementation to design a stacked form using CSS properties.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1.0"> 
    <title>Stacked Form</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="custom-form"> 
        <h2>Stacked Form</h2> 
        <form> 
            <label for="firstName">First Name:</label> 
            <input type="text" 
                   id="firstName"
                   name="firstName" 
                   placeholder="Enter your first name" 
                   autocomplete="off" required> 
  
            <label for="lastName">Last Name:</label> 
            <input type="text" 
                   id="lastName" 
                   name="lastName" 
                   placeholder="Enter your last name" 
                   autocomplete="off" required> 
  
            <label for="mobileNumber">Mobile Number:</label> 
            <input type="tel" maxlength="10" 
                   id="mobileNumber"
                   name="mobileNumber" 
                   placeholder="Enter your mobile number" 
                   autocomplete="off" required> 
  
            <label for="dob">Date of Birth:</label> 
            <input type="date" 
                   id="dob"
                   name="dob" required> 
  
            <button type="submit">Submit</button> 
        </form> 
    </div> 
</body> 
  
</html>

CSS

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
} 
  
.custom-form { 
    max-width: 450px; 
    width: 100%; 
    padding: 25px; 
    border-radius: 10px; 
    border: 2px solid green; 
    box-shadow: 0 0 10px rgba(85, 255, 34, 0.5); 
} 
  
.custom-form h2 { 
    text-align: center; 
} 
  
.custom-form label { 
    display: block; 
    margin-bottom: 8px; 
    color: #555; 
} 
  
.custom-form input, 
.custom-form select { 
    padding: 12px; 
    width: 100%; 
    font-size: 16px; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
    border-radius: 4px; 
    margin-bottom: 16px; 
} 
  
.custom-form button { 
    color: #fff; 
    cursor: pointer; 
    background-color: #4caf50; 
    width: 100%; 
    border: none; 
    border-radius: 4px; 
    padding: 12px; 
    font-size: 16px; 
}