Single-Column Form Layout Template

The gold standard for mobile-first and user-friendly form design: the single-column layout.

This foundational layout arranges all labels and inputs vertically, creating a clear, simple path for the user to follow, which is proven to improve completion rates.

Screenshot of a clean, vertical, single-column form.

Get Source Code → Preview →

About this Single-Column Layout Form

The single-column form is the most robust and widely recommended layout for most use cases. By presenting one field per row, it creates a clear vertical rhythm that guides the user's eye naturally down the page. This eliminates the back-and-forth scanning required by multi-column forms and dramatically simplifies the user experience, especially on mobile devices where horizontal space is limited.

This template provides a simple, well-structured, and aesthetically pleasing example that can be used as the base for almost any type of form, from contact forms to complex registration flows.

Features

Mobile-First by Design: The single-column structure is inherently responsive and works perfectly on all screens.
Improved Usability: A straight, linear path reduces cognitive load and makes the form faster for users to complete.
Simple, Predictable Structure: Each form field is wrapped in a div for easy styling and logical grouping.
Universal Compatibility: This is the simplest layout to implement and the least likely to cause cross-browser issues.

Ideal Use Cases

Almost any form, especially long or complex ones.
Checkout processes, registration forms, and detailed contact forms.
Situations where mobile usability is the top priority.

Dependencies

None. This is achieved with pure HTML and CSS.

Code

Here's the full code for the single-column form layout:

/* Each label + input pairing */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block; /* Ensures label is on its own line */
    margin-bottom: 8px;
    font-weight: 600;
}
.form-group input,
.form-group textarea {
    width: 100%; /* Makes the input take the full width of the container */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box; /* Ensures padding is included in the width */
}
.form-group textarea {
    height: 120px;
    resize: vertical;
}

.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    background: #333;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-btn:hover {
    background: #555;
}
</style>

<div class="single-column-container">
    <h2>Get in Touch</h2>
    <form action="#" method="post">
        <div class="form-group">
            <label for="name">Your Name</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div class="form-group">
            <label for="email">Your Email</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div class="form-group">
            <label for="phone">Your Phone</label>
            <input type="tel" id="phone" name="phone">
        </div>

<div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" name="message" required></textarea>
        </div>

<button type="submit" class="submit-btn">Submit</button>
    </form>
</div>

View Output