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) |
Form Title
Form Description