Forms Overview

Trongate CSS provides elegant, responsive form styling out of the box. Forms are styled automatically without requiring additional classes - just write standard HTML and let Trongate CSS handle the presentation.

Basic Example

The form below uses pure HTML and looks beautiful on both desktop devices and mobile devices. You may be surprised to discover, there are no classes or special attributes - in the source code - whatsoever.

Here's the source code for the above form:

HTML

<form>
    <label>Name</label>
    <input type="text" name="name" placeholder="Your name">

    <label>Email Address</label>
    <input type="email" name="email" placeholder="Your email">
    
    <label>Enquiry Type <span>(optional)</span></label>
    <select name="type">
        <option value="">Choose an option...</option>
        <option value="general">General Enquiry</option>
        <option value="support">Technical Support</option>
        <option value="billing">Billing Question</option>
    </select>
    
    <label>Message</label>
    <textarea name="message" placeholder="Enter your message"></textarea>
    
    <button>Send Message</button>
</form>

Core Features

When you create forms with Trongate CSS, the following styles are automatically applied:

Forms take up 100% width of their container.
All form elements receive consistent padding (0.6em) and border-radius (6px).
Labels are positioned above their form elements with appropriate spacing.
Focus states are clearly visible using the primary theme color.
Font sizes and families remain consistent across all elements.
Forms automatically adapt for mobile devices.

Form Layout Options

Control form width by wrapping your form in one of Trongate's container classes:

HTML

<div class="container-xxs">
    <!-- Perfect for login forms (450px max width) -->
    <form>...</form>
</div>

<div class="container-xs">
    <!-- Good for simple forms (640px max width) -->
    <form>...</form>
</div>

<div class="container-sm">
    <!-- For larger forms (760px max width) -->
    <form>...</form>
</div>

For additional information about containers, see our documentation for Container Classes.

Label Spans

Span elements within labels are automatically styled in green. This is useful for letting users know if a form field is optional. For example:

Username (optional)

HTML

<label>Username <span>(optional)</span></label>
<input type="text">

Form Validation

Trongate CSS includes built-in styling for form validation feedback, helping you communicate errors clearly to users.

Validation Errors Container

Wrap validation messages in a .validation-errors element to display them with the danger theme color:

CSS

.validation-errors {
  margin: 0.5em 0 1em 0;
  padding: 0.3em 1em;
  border: 1px solid var(--danger);
  background-color: #ff000011;
  color: var(--danger);
  border-radius: 6px;
  font-size: .9em;
}

HTML

<div class="validation-errors">
  <p>Please correct the following errors:</p>
  <ul>
    <li>Email address is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</div>

Field-Level Error Styling

Individual form fields that fail validation can be highlighted by adding the .form-field-validation-error class, which applies a red border and subtle background:

CSS

form .form-field-validation-error,
form .form-field-validation-error:focus {
  border: 3px solid var(--danger);
  background-color: #ff000011;
}

Email Address

HTML

<input type="email" class="form-field-validation-error" value="not-an-email">

Shake Animation

The .shake class triggers a horizontal shake animation on an element - useful for drawing attention to forms with validation errors:

CSS

.shake {
  animation: form-shake 0.35s ease-in-out;
}

@keyframes form-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

HTML

<form class="shake">
  <!-- Form fields here -->
</form>

<script>
  document.querySelector('form').classList.add('shake');
</script>

These validation features work together: use .validation-errors to display a summary, .form-field-validation-error to highlight individual fields, and .shake to draw attention to the form as a whole.

We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.

Share your thoughts in the Documentation Feedback.

Leave Feedback About This Page