> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/forms/customise-form-design.md).

# 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

{% stepper %}
{% step %}

#### Open the form block

Go to the theme editor and select your **Form Builder** block.
{% endstep %}

{% step %}

#### Adjust layout first

Set the outer spacing before changing individual inputs.
{% endstep %}

{% step %}

#### Style the inputs

Adjust padding, borders, and radius so the fields match your theme.
{% endstep %}

{% step %}

#### Finish with advanced settings

Set shadow, label position, transition speed, and input height.
{% endstep %}

{% step %}

#### Save and test on desktop and mobile

Check spacing, label clarity, and field height on both views.
{% endstep %}
{% endstepper %}

### 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.

### Recommended defaults

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.

### Related guides

* [Building with forms](/forms/building-with-forms.md)
* [Add a form to your theme](/forms/add-a-form-to-your-theme.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.roadmap.so/forms/customise-form-design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.