Gravity Forms — every design
Gravity Forms is a paid plugin and is not installed on this site, so every widget here uses the built-in Sample Form (set to “Always”), which renders Gravity Forms’ own documented markup. With the plugin active you pick a real form instead and the same styles apply. Each section names the settings it uses.
1. Form designs
Five starting points — Clean, Soft, Underline, Dark and the plugin default. Everything in the Style tab still overrides them.
Start a project
Tell us what you have in mind and we will be in touch.
Start a project
Tell us what you have in mind and we will be in touch.
Start a project
Tell us what you have in mind and we will be in touch.
Start a project
Tell us what you have in mind and we will be in touch.
1b. Dark design
The Dark design on a dark section, with a custom accent colour.
Start a project
Tell us what you have in mind and we will be in touch.
Workspace survey
Three minutes, and we will send a tailored quote.
2. Every sample form
The sample form renders Gravity Forms’ own markup, so a design can be built before the real form exists: a survey with choices, sections and a list field; two multi-page styles; a submitted form with errors; and a one-line signup.
Workspace survey
Three minutes, and we will send a tailored quote.
Checkout
Where should we send your order?
Checkout
Where should we send your order?
Contact us
The Friday letter
3. Layout
Hidden labels (kept for screen readers), choices in a row, native vs custom checkboxes, stacking every field, grid gaps and a narrower centred form.
Start a project
Tell us what you have in mind and we will be in touch.
Checkout
Where should we send your order?
Start a project
Tell us what you have in mind and we will be in touch.
4. Labels & fields
Label typography and colour, required mark, field padding, height, radius, and the Normal / Hover / Focus tabs.
Start a project
Tell us what you have in mind and we will be in touch.
Start a project
Tell us what you have in mind and we will be in touch.
The Friday letter
One useful email a week. No spam, ever.
Start a project
Tell us what you have in mind and we will be in touch.
5. Title, description & sections
Form heading typography and alignment, and Gravity Forms’ section breaks.
Workspace survey
Three minutes, and we will send a tailored quote.
Start a project
Tell us what you have in mind and we will be in touch.
6. Checkboxes & radios
Box size, checked colour, box border and background, radius and spacing.
Workspace survey
Three minutes, and we will send a tailored quote.
7. Submit button
Full width, custom width, alignment, gradient background, hover colours and a lift.
The Friday letter
One useful email a week. No spam, ever.
The Friday letter
One useful email a week. No spam, ever.
Start a project
Tell us what you have in mind and we will be in touch.
Start a project
Tell us what you have in mind and we will be in touch.
8. Multi-page forms
Progress bar colours, height and radius, the percentage on or off, step-name colours and the Next / Previous buttons.
Checkout
Where should we send your order?
Checkout
Where should we send your order?
Checkout
Where should we send your order?
Checkout
Where should we send your order?
9. List field
Column headings, striped rows, row padding and the add / remove buttons.
Workspace survey
Three minutes, and we will send a tailored quote.
Workspace survey
Three minutes, and we will send a tailored quote.
10. Validation & messages
Field errors, invalid fields, the error summary and the confirmation (shown with “Preview Messages: Always”).
Contact us
Contact us
11. Finished: a contact page
A floating form card beside the company details.
We would love to hear from you
Studio Northlight builds brands and websites for independent companies. Tell us about your project and a producer will reply within one working day.
hello@northlight.studio
+44 20 7946 0321
14 Wharf Road, London N1 7GR
Start a project
12. Finished: newsletter banner
One-line signup on a gradient band — labels hidden, pill fields, white button.
13. Finished: event registration
A multi-page checkout-style form on a dark section with step names.
Checkout
Where should we send your order?