How to Create a Stacked Form with HTML, CSS, and JavaScript

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A stacked form arranges all form fields in a vertical layout, making it simple and easy to fill out. This is a common layout for mobile-friendly forms. In this guide, you’ll learn how to create a clean and modern stacked form using HTML, CSS, and JavaScript to handle form submission.

Development Steps

Create Basic HTML Structure: Set up the form fields for name, email, password, and message in a vertical (stacked) layout.
Style the Form with CSS: Use CSS to style the stacked form fields.
Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console.

Step 1: Create a Basic HTML Structure

We’ll start by building the basic structure of the form. This includes fields for the user's name, email, password, and a message.

<!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>
</head>
<body>

    <!-- Step 1: Stacked form -->
    <div class="form-container">
        <form class="stacked-form" id="stackedForm">
            <h2>Contact Us</h2>
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="input-group">
                <label for="message">Message</label>
                <textarea id="message" placeholder="Enter your message" required></textarea>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </div>

</body>
</html>

Explanation:

The form contains fields for name, email, password, and a message.
Each form field is wrapped inside a div with the class input-group to stack the fields vertically.

Step 2: Style the Form with CSS

Next, we’ll style the form using CSS to ensure that all the form fields are stacked and aligned properly.

<head>
    <style>
        /* General form styles */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .form-container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .stacked-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .input-group textarea {
            height: 100px;
            resize: vertical;
        }

        .btn {
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        @media (max-width: 768px) {
            .form-container {
                padding: 20px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 14px;
                padding: 8px;
            }
        }

        @media (max-width: 480px) {
            .form-container {
                padding: 15px;
            }

            .stacked-form h2 {
                font-size: 18px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 12px;
                padding: 6px;
            }
        }
    </style>
</head>

Explanation:

Stacked Layout: The labels and inputs are stacked using display: block and appropriate margins to separate them vertically.
Responsiveness: The form layout adjusts for smaller screens using media queries to maintain readability and user experience on mobile devices.

Step 3: Handle Form Submission with JavaScript

We’ll now add JavaScript to handle the form submission, capture the input values, and print them to the console.

<body>
    <script>
        // Step 3: Handle form submission
        document.getElementById('stackedForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page

            // Capture the input values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const message = document.getElementById('message').value;

            // Print the values to the console
            console.log('Name:', name);
            console.log('Email:', email);
            console.log('Password:', password);
            console.log('Message:', message);
        });
    </script>
</body>

Explanation:

event.preventDefault(): Prevents the default form submission behavior, stopping the page from refreshing.
console.log(): Logs the form data (name, email, password, message) to the console for testing.

Complete Example

Here’s the full code for the stacked form, combining HTML, CSS, and JavaScript.

<!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>
    <style>
        /* General form styles */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .form-container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .stacked-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .input-group textarea {
            height: 100px;
            resize: vertical;
        }

        .btn {
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        @media (max-width: 768px) {
            .form-container {
                padding: 20px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 14px;
                padding: 8px;
            }
        }

        @media (max-width: 480px) {
            .form-container {
                padding: 15px;
            }

            .stacked-form h2 {
                font-size: 18px;
            }

            .input-group input, .input-group textarea, .btn {
                font-size: 12px;
                padding: 6px;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Stacked form -->
    <div class="form-container">
        <form class="stacked-form" id="stackedForm">
            <h2>Contact Us</h2>
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="input-group">
                <label for="message">Message</label>
                <textarea id="message" placeholder="Enter your message" required></textarea>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </div>

    <script>
        // Step 3: Handle form submission
        document.getElementById('stackedForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page

            // Capture the input values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const message = document.getElementById('message').value;

            // Print the values to the console
            console.log('Name:', name);
            console.log('Email:', email);
            console.log('Password:', password);
            console.log('Message:', message);
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a stacked form using HTML, CSS, and JavaScript. The form stacks all the input fields vertically and collects user data such as name, email, password, and message. You can enhance this form further by adding validations or sending the data to a server for processing.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog