Form
Form Title
Form Description
Form Title
Form Description
Page group one
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group two
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group three
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group one
Page group one
Page group one
Medium length heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Eyebrow
Title
Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Eyebrow
Title
Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Eyebrow
Title
Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Page group one
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group two
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group three
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group four
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Tab 1
Page group one
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group two
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group three
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Mega Menu - Cards
Medium length heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Eyebrow
Title
Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Eyebrow
Title
Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Eyebrow
Title
Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Mega Menu - Links
Page group one
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group two
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group three
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Page group four
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet consectetur elit
Why not check out our most popular searches?
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.
| 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 |
The following CSS variables can be configured to customise the block’s appearance:
| Variable | Default Value |
|---|---|
--block-form-intro-margin-bottom |
var(--spacing-m) |
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 Description
Form Description