Form

📖 Overview

The Form block embeds a Gravity Forms form with an optional title and description. It provides styled form inputs and validation messages that integrate with the site’s design system.

✏️ Content Options

Field	Type	Required	Description
Form Title	Text	No	Heading displayed above the form
Form Title Type	Select	No	HTML element for the title (h1-h6, p)
Form Title Size	Select	No	Visual size of the title (default: H3)
Form Description	Textarea	No	Introductory text displayed below the title
Form	Select	Yes	Select a Gravity Forms form to display

🎨 CSS Variables

The following CSS variables can be configured to customise the block’s appearance:

Variable	Default Value
`--block-form-intro-margin-bottom`	`var(--spacing-m)`

Gravity Forms CSS Variables

The form styling uses the following CSS variables:

Variable	Default Value
Layout
`--gravity-forms-field-spacing`	`var(--spacing-m)`
`--gravity-forms-label-margin-bottom`	`var(--spacing-xxxs)`
`--gravity-forms-choices-spacing`	`var(--spacing-xxxs)`
`--gravity-forms-choice-spacing`	`var(--spacing-xxxs)`
`--gravity-forms-field-inner-spacing`	`var(--spacing-xxs)`
`--gravity-forms-time-field-width`	`125px`
`--gravity-forms-footer-spacing`	`var(--spacing-m)`
`--gravity-forms-footer-inner-spacing`	`var(--spacing-xxs)`
Progress Bar
`--gravity-forms-progress-bar-margin-bottom`	`var(--spacing-m)`
`--gravity-forms-progress-bar-title-margin-bottom`	`var(--spacing-xxs)`
`--gravity-forms-progress-bar-background-colour`	`var(--colour-gray)`
`--gravity-forms-progress-bar-percentage-colour`	`var(--colour-brand-1)`
`--gravity-forms-progress-bar-height`	`12px`
`--gravity-forms-progress-bar-border-radius`	`5px`
Errors & Validation
`--gravity-forms-error-box-padding`	`var(--spacing-xxxs)`
`--gravity-forms-error-box-margin-bottom`	`var(--spacing-xs)`
`--gravity-forms-error-box-border-colour`	`var(--colour-error)`
`--gravity-forms-error-box-background-colour`	`var(--colour-error-light)`
`--gravity-forms-error-box-colour`	`var(--colour-black)`
`--gravity-forms-error-input-border-colour`	`var(--colour-error)`
`--gravity-forms-error-message-colour`	`var(--colour-error)`
`--gravity-forms-required-colour`	`var(--colour-error)`
`--gravity-forms-required-spacing`	`var(--spacing-xxxs)`

No results found matching your criteria

Title

Title

Title

Title

Title

Title

Form

📖 Overview

✏️ Content Options

🎨 CSS Variables

Gravity Forms CSS Variables

Form Title

Section Break

Form Title

Section Break