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:

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:

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: