Complete Form Styling in CSS - Build a Professional Contact Form

In this lesson we will combine everything we learned about forms and build a complete "Contact Us" form. The goal is a professional look, easy input, and clear structure.

If you are searching for contact form design in CSS or best form styling in CSS or responsive form layout, this practical lesson is for you.

Professional Form Structure in CSS

The best approach is to place the form inside a container with: a reasonable width, generous padding, soft borders, and a subtle shadow.

.form-container {
    max-width: 520px;
    margin: 24px auto;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

What does this code do? Centers the form in a clean, soft card.

Expected result: a tidy, readable layout.

Common mistake: a form that is too wide or has no surrounding space.

Unify Field Styling (input, textarea, select)

.form-control,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 14px;
    font-family: "Inter", sans-serif;
}

What does this code do? Gives all fields (text, select, textarea) the same look.

Line by line:

• width: 100%: field takes the full container width.
• padding: comfortable typing space.
• border-radius: modern rounded corners.
• box-sizing: prevents width from breaking.

Expected result: a consistent form across all fields.

Common mistake: leaving every field with a different style.

Style Labels to Improve UX

label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #0f172a;
}

What does this code do? Makes each label clear and placed directly above the field.

Expected result: users understand instantly what to type.

Common mistake: relying only on placeholders without labels.

Submit Button in CSS

.submit-btn {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.submit-btn:hover {
    background: #1d4ed8;
}

What does this code do? Creates a clear, full-width submit button with a simple hover effect.

Expected result: a strong CTA that is easy to tap.

Complete Example: Contact Form in CSS

HTML:

<div class="form-container">
  <h3>Contact Us</h3>

  <label for="name">Full Name</label>
  <input id="name" type="text" class="form-control" placeholder="Example: Jane Doe">

  <label for="email">Email Address</label>
  <input id="email" type="email" class="form-control" placeholder="name@example.com">

  <label for="type">Request Type</label>
  <select id="type" class="form-select">
    <option>Support</option>
    <option>Suggestion</option>
    <option>Other</option>
  </select>

  <label for="message">Your Message</label>
  <textarea id="message" class="form-textarea" rows="4"></textarea>

  <button class="submit-btn">Send Message</button>
</div>

What does this example achieve? A full, consistent form ready for real use.

Expected result: a clear and comfortable input experience with a visible submit button.

SEO + UX Best Practices for Forms

• Keep the number of fields low to reduce friction.
• Use clear labels and helpful placeholders.
• Maintain strong contrast between text and background.
• Make the submit button obvious with direct text.

Common Contact Form CSS Mistakes

1) Fields with no spacing: tiring input experience.

2) Unclear submit button: reduces conversions.

3) Non-responsive sizing: problems on mobile.

FAQ - Common Search Questions

How do I design a professional contact form in CSS?

Use a clean container, unified fields, focus styles, and a bold submit button.

What is the best width for a contact form in CSS?

In most cases, a max-width between 420px and 600px with margin: auto works well.

Should I use div or form in HTML for a contact form?

Use a form for semantic structure, and wrap it in a div container for design.

How do I make a form responsive in CSS?

Combine width: 100% fields, box-sizing: border-box, and a max-width container.

Why does my form look messy even with CSS?

It is usually because spacing between labels and fields is not consistent.