Minimalist Form Template

Achieve a clean, high-end look with this elegant and modern minimalist form.

This design strips away heavy borders and backgrounds, instead using typography, spacing, and subtle underlines for input fields to create a sophisticated and readable form.

Screenshot of a minimalist form with underlined input fields and lots of whitespace.

Get Source Code → Preview →

About this Minimalist Form

Minimalist design is about removing unnecessary elements to let the content shine. In this form, traditional "boxed" inputs are replaced with a simple bottom border. This opens up the design, creating a lighter and more airy feel. The focus is on a high-quality sans-serif font, generous spacing between form groups, and a clean, high-contrast color scheme.

When an input is focused, the bottom border changes color and thickness, providing clear visual feedback to the user without adding visual clutter. This style is extremely popular in design-forward websites, portfolios, and high-end brand sites.

Features

Underlined Inputs: A clean and modern alternative to fully boxed input fields.
Emphasis on Typography & Whitespace: Creates an elegant, uncluttered, and highly readable user experience.
Subtle Focus States: Provides clear user feedback without being distracting.
Fully Accessible: Proper label elements ensure the form is usable by everyone.

Ideal Use Cases

Portfolio contact pages.
Contact forms for creative agencies or design studios.
Checkouts or sign-up forms for luxury or design-focused brands.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the minimalist form template:

.minimalist-form h2 {
    text-align: center;
    font-weight: 500;
    margin-bottom: 30px;
}
.form-group {
    margin-bottom: 25px;
    position: relative;
}

/* For this style, we'll often put the label below the input or use floating labels. */
/* For simplicity and accessibility, we'll keep them above for now. */
.form-group label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
}

/* -- The core input style -- */
.form-group input,
.form-group textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc; /* Underline only */
    background: transparent;
    padding: 10px 0; /* Add padding to the bottom */
    font-size: 1.1rem;
    color: #333;
    transition: border-color 0.2s;
}
.form-group textarea {
    height: 80px;
    resize: none;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom: 2px solid #333; /* Thicker underline on focus */
}
/* -- End core style -- */

.submit-btn {
    display: block;
    width: 100%;
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #333;
    background: #333;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.submit-btn:hover {
    background: #fff;
    color: #333;
}
</style>

<div class="minimalist-form-container">
    <form class="minimalist-form" action="#" method="post">
        <h2>Let's talk</h2>
    
        <div class="form-group">
            <label for="min-name">Your Name</label>
            <input type="text" id="min-name" name="name" required>
        </div>
        
        <div class="form-group">
            <label for="min-email">Your Email</label>
            <input type="email" id="min-email" name="email" required>
        </div>

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

View Output