How to Build Attractive Forms with CSS

Forms are an important component on almost every website — from login and registration forms to contact forms. Unfortunately, the browser's default HTML form appearance often looks boring and inconsistent across browsers. With CSS, you can turn a form into something that looks professional and is comfortable to use. This article covers how to build an attractive form from scratch.

Reset the Browser's Default Styles

The first step is to reset the default appearance of form elements so they're consistent across all browsers:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

HTML Form Structure

Use a semantic and accessible structure:

<form class="nice-form" novalidate>
  <h2>Contact Us</h2>

  <div class="form-group">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">
  </div>

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

  <div class="form-group">
    <label for="topic">Topic</label>
    <select id="topic" name="topic">
      <option value="">Choose a topic...</option>
      <option value="general">General Question</option>
      <option value="technical">Technical Issue</option>
      <option value="partnership">Partnership</option>
    </select>
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5"
              placeholder="Write your message here..."></textarea>
  </div>

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

Main Form CSS Styling

.nice-form {
  max-width: 520px;
  margin: 40px auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.nice-form h2 {
  margin-bottom: 28px;
  font-size: 1.5rem;
  color: #1e293b;
  font-weight: 700;
}

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

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
}

/* Styling for input, textarea, and select */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  color: #1e293b;
  background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}

/* Focus effect */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9ca3af;
  font-size: 0.9rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

Styling the Submit Button

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 8px;
}

.submit-btn:hover {
  background: #2563eb;
}

.submit-btn:active {
  transform: scale(0.98);
}

Adding an Icon to an Input

An icon inside an input makes the form look more professional. Use a positioning technique:

<div class="form-group input-with-icon">
  <label for="search">Search</label>
  <div class="input-wrapper">
    <span class="input-icon">🔍</span>
    <input type="text" id="search" placeholder="Search for something...">
  </div>
</div>

<style>
.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-with-icon input {
  padding-left: 40px;
}
</style>

Displaying Validation Messages

Add informative and aesthetic validation messages:

.form-group .error-message {
  display: none;
  color: #ef4444;
  font-size: 0.82rem;
  margin-top: 4px;
}

.form-group.error input,
.form-group.error textarea {
  border-color: #ef4444;
  background: #fff5f5;
}

.form-group.error .error-message {
  display: block;
}

.form-group.success input {
  border-color: #10b981;
  background: #f0fdf4;
}

Attractive Checkboxes and Radios

<div class="form-group">
  <label class="checkbox-label">
    <input type="checkbox" name="agree">
    <span>I agree to the terms and conditions</span>
  </label>
</div>

<style>
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
}
</style>

Tips for Building Good Forms

• Always use a <label> connected to the input via the for and id attributes.
• Provide a clear focus effect so users know which field is active.
• Use the placeholder as an example value, not as a replacement for the label.
• Make sure the submit button is large enough and easy to tap on a touch screen.
• Validate the form on the client side (HTML5 or JavaScript) before sending it to the server.

Conclusion

With the right CSS, an ordinary HTML form can turn into an attractive and comfortable-to-use component. The key is to pay attention to details like the focus effect, border colors, typography, and visual feedback for validation. Apply the techniques above to the login, registration, or contact forms in your project to significantly improve the user experience.