Detailed Contact Form Template

Capture more specific information with this detailed and responsive contact form.

This template expands on the simple contact form by including a responsive two-column layout, a select dropdown for inquiry types, and an opt-in checkbox.

Screenshot of a detailed contact form with two columns, a dropdown, and a checkbox.

Get Source Code → Preview →

About this Detailed Contact Form

When you need more than just a simple message, this form template provides the necessary structure. It's designed to be efficient for both the user and the site owner. A two-column layout for fields like "First Name" and "Last Name" makes the form feel more compact on desktop screens, while it gracefully stacks to a single column on mobile for easy use. The inclusion of a select dropdown allows you to route inquiries to the correct department, and a simple opt-in input with type="checkbox" is perfect for newsletter signups.

Features

Responsive Two-Column Layout: Uses Flexbox to create a compact desktop view that stacks vertically on mobile.
Select Dropdown: Demonstrates the use of the select and option elements for user choices.
Opt-in Checkbox: Includes a standard checkbox for GDPR-friendly newsletter or marketing consent.
Enhanced Fields: Includes common additions like a "Phone Number" field.

Ideal Use Cases

Business websites that need to filter inquiries for Sales, Support, etc.
Forms for requesting a quote or more information.
Support ticket submission forms.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the detailed contact form template:

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group select {
    appearance: none; /* For custom arrow, if desired later */
}
.form-group textarea {
    height: 140px;
    resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}
/* Checkbox specific styling */
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-group-checkbox label {
    margin-bottom: 0;
    font-weight: normal;
}
.form-group-checkbox input {
    width: auto;
}

/* Submit button styling */
.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #28a745;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-btn:hover {
    background-color: #218838;
}
</style>

<div class="detailed-form-container">
    <form action="#" method="post">
        
        <div class="form-row">
            <div class="form-group">
                <label for="first-name">First Name</label>
                <input type="text" id="first-name" name="first_name" required>
            </div>
            <div class="form-group">
                <label for="last-name">Last Name</label>
                <input type="text" id="last-name" name="last_name" required>
            </div>
        </div>

<div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div class="form-group">
            <label for="phone">Phone Number (Optional)</label>
            <input type="tel" id="phone" name="phone">
        </div>
        
        <div class="form-group">
            <label for="contact-reason">Reason for Contact</label>
            <select id="contact-reason" name="contact_reason" required>
                <option value="" disabled selected>Please select an option...</option>
                <option value="sales">Sales Inquiry</option>
                <option value="support">Technical Support</option>
                <option value="billing">Billing Question</option>
                <option value="general">General Feedback</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="message">Your Message</label>
            <textarea id="message" name="message" required></textarea>
        </div>

<div class="form-group form-group-checkbox">
            <input type="checkbox" id="newsletter" name="newsletter" value="yes">
            <label for="newsletter">Sign me up for the weekly newsletter</label>
        </div>
        
        <button type="submit" class="submit-btn">Submit Inquiry</button>
    </form>
</div>

View Output