Building forms

Design and styling

Designs, colours, dark mode, label positions, spacing, and custom CSS with design tokens.

The form's Appearance settings change its whole look without code.

Match my theme keeps your theme's fonts and colours and only adds layout, spacing and states. High contrast uses strong borders and colours for people with low vision. Every design keeps visible focus, errors that do not rely on colour alone, and 44 pixel touch targets on phones.

The canvas in the builder shows the real design, and the device buttons in the toolbar show it at tablet and phone widths.

Under the advanced Appearance settings you can also set the Label colour, the Required marker colour and the Placeholder colour. The builder's Check warns when a colour you chose is hard to read against the form's background (text needs 4.5 to 1).

The form adapts to its own width

Side labels and columns follow the width of the form itself, not the width of the screen. A form placed in a narrow sidebar stacks its labels and columns even on a wide monitor, and a form in a wide area keeps its columns. Each columns row can set the Space between columns (none, small, medium or large).

Motion and sending

• Fade in fields that conditions show (on by default) adds a short fade. Visitors whose device asks for less motion see none.
• Cover the form while it is sending (Submission settings) shows a light cover with a spinner so answers cannot be changed twice while they are sent.
• Show a button that clears the form adds a button that puts every answer back to its starting value, after asking first unless you turn that off. Most forms do not need it.
• Icons on Next and Back chooses arrows, chevrons or no icons for the step buttons. They point the right way in right to left languages.

Styles for one field

Styles for this field (a field's Advanced settings) takes CSS declarations for each part of that field: the whole field, the label, the input, the description and the error message. For example color: #1f2937; font-weight: 600; on the label. They apply to that field only, so you do not need to write selectors.

A starter theme

The plugin folder contains examples/starter-theme.css, a commented file with every design token and the most useful selectors. Copy it into your theme, or paste the parts you need into Custom CSS for every form, and change the values.

Custom CSS

Each form has Custom CSS for this form (Advanced group) and the site has Custom CSS for every form (Settings, Interface). Rules are added after the form's own styles.

The form's styles are written with low specificity, so short selectors win. The easiest way to restyle is to change the design tokens on the form wrapper:

.flvf {
	--flvf-f-accent: #6b21a8;
	--flvf-f-radius: 4px;
	--flvf-f-gap: 24px;
	--flvf-f-font-size: 17px;
}

Useful classes: .flvf (the form wrapper, with flvf-preset-* and flvf-scheme-* classes), .flvf-field (each field, with flvf-f-<type>), .flvf-label, .flvf-input, .flvf-help, .flvf-error, .flvf-has-error, .flvf-step, .flvf-progress, .flvf-submit, .flvf-confirmation. Every field also has the CSS classes you give it in its Advanced settings.

When you change colours, check the contrast: text needs at least 4.5 to 1 against its background, and field borders and focus rings at least 3 to 1.

Custom JavaScript

A form can carry Custom JavaScript for this form (Advanced appearance settings). It runs after the form, with the variable form set to the form's outer element. Two safeguards apply:

• Only administrators who may post unfiltered HTML can add or change it. Others see that it exists but not its content, and saving the form keeps it as it was.
• Nothing runs until an administrator turns on Run custom JavaScript added to forms in Settings, Interface. It is off by default.

Prefer the documented events in JavaScript events for integrations; they keep working when the form's markup changes.