How to Create a Stacked Form using CSS ? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: 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; } Output: Comment More infoAdvertise with us Next Article how to create a responsive checkout form using CSS P pankaj_gupta_gfg Follow Improve Article Tags : Web Technologies Web Templates Similar Reads Create a Stacked Form using CSS A stacked form layout is a common design pattern where form elements are displayed vertically, one on top of the other. This layout is often used for simplicity and clarity in user interfaces. In this article, we will explore the process of creating a Stacked Form using CSS. ApproachCreate a <div 2 min read How to create a Responsive Inline Form using CSS ? When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layo 3 min read How to create a Social Media Login Form using CSS ? To create a social media login form using CSS, we will design a container with input fields for a username or password and a login button. In this social media login form, we will enhance the interface with distinct styling, and integrate social media icons or buttons for a user-friendly and visuall 3 min read how to create a responsive checkout form using CSS Creating a responsive checkout form using CSS ensures that users can efficiently and comfortably enter their billing and payment information on any device.ApproachCreate a form that is wrapped inside a <form> tag.Inside the form create two sections for "Address Details" and "Payment Informatio 3 min read How to create a Split Button Dropdown using CSS ? In this article, we will learn how to design a split button dropdown using CSS. Split buttons combine a main button with a dropdown, useful for adding interactive features to your website. This guide helps you improve your web design skills by showing you how to make a split button in easy steps. Ta 4 min read How to Align Form Elements to Center using Tailwind CSS? Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.These are the 2 min read Like