For the complete documentation index, see llms.txt. This page is also available as Markdown.

Customise form design

Adjust spacing, borders, labels, shadows, and sizing for the storefront form.

Use the form block settings to match the form to your theme.

Where design settings live

Open the form block in the theme editor.

The styling controls are grouped into Layout, Input Styling, and Advanced Styling.

Update the form design

1

Open the form block

Go to the theme editor and select your Form Builder block.

2

Adjust layout first

Set the outer spacing before changing individual inputs.

3

Style the inputs

Adjust padding, borders, and radius so the fields match your theme.

4

Finish with advanced settings

Set shadow, label position, transition speed, and input height.

5

Save and test on desktop and mobile

Check spacing, label clarity, and field height on both views.

Layout settings

Form Padding

Controls the space inside the outer form container.

Use more padding for standalone forms.

Space Between Inputs

Controls the gap between fields.

Increase this when validation messages or helper text feel cramped.

Form Max Width

Limits how wide the form can grow.

Use a narrower width for single-column forms.

Input styling

Input Padding

Controls the spacing inside each field.

This affects how dense or open the form feels.

Border Style

Controls how the field edge is drawn.

Use a style that matches the rest of the theme inputs.

Border Width

Sets the thickness of the field outline.

Border Radius

Rounds the field corners.

Small changes here usually make the biggest visual difference.

Advanced styling

Input Box Shadow

Adds or removes depth around the field.

Use a subtle shadow if your theme already uses elevated inputs.

Transition Duration

Controls how quickly hover and focus changes animate.

Short values feel more immediate.

Label Position

Controls where labels appear relative to the field.

Above Input is the safest choice for longer labels.

Input Height

Sets the height of each field.

Increase this for touch-heavy forms.

Start here if you want a clean baseline:

  • medium form padding

  • clear spacing between inputs

  • max width around the content column

  • labels above inputs

  • modest border radius

  • short transition duration

Design tips

  • Use full-width fields for long answers.

  • Keep email and phone fields tall enough for mobile use.

  • Do not rely on placeholder text alone.

  • Test error states after styling changes.

Last updated