Forms
Usage
Open Appearance → Customize → Styles → Forms to style text fields, dropdowns, and text areas across the site. Set the field Font and padding, then Input Height, Border Width, Border Radius, Border Color, and Border Color On Focus so fields match your buttons.
The Label settings style field names. The Sublabel settings do the same for the helper text under fields. Colors come from Styles → Palette.
When to use it
- Contact or checkout forms look out of place next to your buttons. Match Border Radius with Styles → Buttons.
- Labels or hints are hard to read against your background.
- Before launch, to give Gravity Forms and WooCommerce checkout a consistent look.
Tips
- Border Color On Focus defaults to Primary, so the field a visitor is typing in shows your brand color.
- Visitors using a keyboard also see an outline around the field they're on, the same one links and buttons get, even when the two border colors are close.
- Label Weight and Sublabel Color (default Muted) set field names apart from helper text.
- Label Transform and Sublabel Transform set uppercase or capitalization separately for field names and helper text.
- Submit buttons use Styles → Buttons, not these settings.
- Success and error messages use the palette Success and Failure colors. Adjust them under Styles → Palette. Where Failure would be hard to read (a contrast under 4.5:1), error text shows a darker shade of it, or a lighter one on dark sections, just enough to read. Where it reads, it's shown as you picked it. In Reverse Print sections, error text stays white where white reads, and shows a readable shade of Failure only where it doesn't.
- Label Width and Sublabel Width show when the label font comes in several widths and is set to Full axis in Dirigible Fonts. Uncheck Default and drag the slider for a condensed (narrower) or expanded (wider) cut of the font; the slider covers only the widths the font has. Leave Default checked to keep the width the text has now.
Settings
Forms
Picks which of the three stacks from Styles → Fonts this style uses. Each row shows the family behind it, with a sample set in that font.
Picks which of the three stacks from Styles → Fonts this style uses. Each row shows the family behind it, with a sample set in that font.
Shows when this style's font comes in several widths and is set to Full axis in Dirigible Fonts. Uncheck Default, then drag for a narrower (condensed) or wider (expanded) cut; the slider covers only the widths the font has. Default keeps the width the text has now.
With a variable font, a slider covers the weights the font has. With other fonts, only the weights Dirigible Fonts loads show. A saved weight the font doesn't load is marked, with a note.
Italic shows when the font has an italic loaded in Dirigible Fonts; with no italic, Style is hidden. A saved Italic the font doesn't load is marked, with a note.
Picks which of the three stacks from Styles → Fonts this style uses. Each row shows the family behind it, with a sample set in that font.
Shows when this style's font comes in several widths and is set to Full axis in Dirigible Fonts. Uncheck Default, then drag for a narrower (condensed) or wider (expanded) cut; the slider covers only the widths the font has. Default keeps the width the text has now.
With a variable font, a slider covers the weights the font has. With other fonts, only the weights Dirigible Fonts loads show. A saved weight the font doesn't load is marked, with a note.
Italic shows when the font has an italic loaded in Dirigible Fonts; with no italic, Style is hidden. A saved Italic the font doesn't load is marked, with a note.
