> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/contact/contact-form.md).

# Contact form

Add contact forms to your storefront to collect customer inquiries.

The **Contact form** block lets you build a contact form from individual field blocks, giving you control over what information customers can submit. Use it for general enquiries, wholesale requests, appointment details, product questions, or any other workflow that needs more than a simple email signup.

You can add and reorder the form fields. The action area at the bottom is built into the form and contains the supporting description and submit button.

### 1. What you can do

* Use built-in canonical Name and Email fields, or add custom Text, Phone, Textarea, Radio, Checkbox, Dropdown, and Date fields
* Mark individual fields as required
* Arrange fields at full, half, or one-third width
* Control the form width, spacing, input style, and input size
* Use different width, gap, and input-size settings on mobile
* Customize the built-in description and submit button

### 2. Understanding the Form structure

The Form has three main components:

```
Form
├── Canonical built-in fields
│   ├── Name
│   └── Email
├── Custom fields you can add and reorder
│   ├── Text
│   ├── Phone
│   ├── Textarea
│   ├── Radio
│   ├── Checkbox
│   ├── Dropdown
│   └── Date
└── Action area (built in)
    ├── Description (built in)
    └── Submit button (built in)
```

<table><thead><tr><th width="139.73828125">Level</th><th width="585.50390625">What it controls</th></tr></thead><tbody><tr><td><strong>Form</strong></td><td>The width, gap, shared input appearance, color scheme, and outer spacing</td></tr><tr><td><strong>Canonical fields</strong></td><td>Built-in Name and Email fields for customer identity and replies</td></tr><tr><td><strong>Custom fields</strong></td><td>Additional fields you can add, configure, and reorder (Text, Phone, Textarea, Radio, Checkbox, Dropdown, Date)</td></tr><tr><td><strong>Action area</strong></td><td>The arrangement and shared styling of the description and submit button</td></tr><tr><td><strong>Description</strong></td><td>Supporting or consent text shown beside or above the submit button</td></tr><tr><td><strong>Submit button</strong></td><td>The button label, icon, style, size, and mobile appearance</td></tr></tbody></table>

{% hint style="info" %}
**Note:** You can add, remove, duplicate, and reorder custom fields. **Name**, **Email**, and the **Action area** (Description and Submit button) are permanent canonical parts of the Form structure.
{% endhint %}

### 3. How to add and build a Form

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open the section or compatible block where you want the form.
{% endstep %}

{% step %}
**Add a contact form block**

Click **Add block**, then select **Contact form**.
{% endstep %}

{% step %}
**Start adding fields**

Open the **Contact form** and click **Add block**.
{% endstep %}

{% step %}
**Configure the field**

Choose a field type, then set its label, placeholder, requirement, and width.
{% endstep %}

{% step %}
**Add more fields**

Repeat for each piece of information you want to collect.
{% endstep %}

{% step %}
**Order the fields**

Drag the fields into the order customers should complete them.
{% endstep %}

{% step %}
**Adjust form settings**

Configure the Form and built-in Action settings described below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

The **Contact form** preset starts with Text, Email, and Textarea fields. It also includes the built-in action description and a **Send message** button.

{% hint style="success" %}
**Tip:** Ask only for information you genuinely need. Shorter forms are quicker to complete and usually feel less demanding, especially on mobile.
{% endhint %}

### 4. Form settings

These settings control the form as a whole. Changes apply to all fields unless an individual field has its own setting.

<details>

<summary>Layout</summary>

Control the width of the complete form and the vertical gap between its fields.

<table><thead><tr><th width="130.08203125">Setting</th><th width="148.8359375">Options</th><th width="401.296875">When to use</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> occupies the available container width.</li><li><strong>Custom</strong> creates a narrower, easier-to-scan form.</li></ul></td></tr><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixels</li></ul></td><td><ul><li><strong>Percent</strong> adapts to the parent container.</li><li><strong>Pixels</strong> provides a fixed target width.</li></ul><p><em>Appears when <strong>Width</strong> is <strong>Custom</strong>.</em></p></td></tr><tr><td><strong>Custom width</strong></td><td><ul><li>20–100%</li><li>240–1000px</li></ul></td><td>Sets the precise width for the selected unit.</td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Controls the space between field rows.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a separate form width and field gap for mobile.</td></tr></tbody></table>

{% hint style="success" %}
**Tip:** A form around 600–800px wide is comfortable for most contact pages. Use full width inside a narrow column, but avoid stretching short fields across a very wide desktop section.
{% endhint %}

</details>

<details>

<summary>Style</summary>

These settings create a shared appearance for the fields inside the form.

<table data-search="false"><thead><tr><th width="119.765625">Setting</th><th width="131.66015625">Options</th><th width="430.1171875">When to use</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the form's colors to the section or block it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the form stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <strong>Theme settings > Colors</strong>. Only available when <strong>Inherit color scheme</strong> is off.</td></tr><tr><td><strong>Custom style</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this on to override the theme's standard input treatment for this form. If you want to edit the input fields globally, go to <a href="/pages/cd8de4309365ee1b1aacf3bbaf0f603dcd20fae0#id-3.-input">Theme Settings > Input</a>.</td></tr><tr><td><strong>Input style</strong></td><td><ul><li>Underline</li><li>Boxed</li></ul></td><td><ul><li><strong>Underline</strong> creates a minimal field with a line beneath the input.</li><li><strong>Boxed</strong> places each field inside a defined container, making field boundaries easier to see.</li></ul></td></tr><tr><td><strong>Boxed style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives each field box a solid background.</li><li><strong>Outline</strong> shows a border with no solid background.</li></ul><p><em>Only available when custom <strong>Input style</strong> is <strong>Boxed</strong>.</em></p></td></tr><tr><td><strong>Show labels</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Keeps field labels visible instead of relying only on placeholder text.</p><p><em>Only available for boxed custom inputs.</em></p></td></tr><tr><td><strong>Input size</strong></td><td><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td><td><ul><li><strong>Small</strong> creates compact fields.</li><li><strong>Medium</strong> provides a balanced size for most forms.</li><li><strong>Large</strong> gives fields more visual emphasis and a larger interaction area.</li></ul></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a different input size specifically for mobile screens.</td></tr></tbody></table>

{% hint style="info" %}
**Note:** Placeholders disappear after customers begin typing. For fields where the meaning must remain visible, use clear labels and enable **Show labels** when that option is available.
{% endhint %}

</details>

<details>

<summary>Spacing</summary>

**Padding** adds space inside the Form, between its edge and its fields. **Margin** adds space around the Form to separate it from neighboring blocks.

For both controls, you can:

* turn custom spacing on or off;
* set the top, bottom, left, and right values from *0–200px*;
* turn on **Custom on mobile** and use separate mobile values from *0–100px*.

</details>

### 5. Custom field blocks

The fields below can be added directly inside the Form. You can use multiple instances of any field type and drag them into the order you need.

<table data-search="false"><thead><tr><th width="121.625">Field</th><th width="622.80859375">Best for</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Names, order numbers, company names, and short answers</td></tr><tr><td><strong>Email</strong></td><td>Customer email addresses</td></tr><tr><td><strong>Phone</strong></td><td>Telephone or mobile numbers</td></tr><tr><td><strong>Textarea</strong></td><td>Messages, questions, project briefs, and longer answers</td></tr><tr><td><strong>Radio</strong></td><td>A short list where customers should see every choice and select one</td></tr><tr><td><strong>Checkbox</strong></td><td>A yes/no answer, confirmation, or consent choice</td></tr><tr><td><strong>Dropdown</strong></td><td>A longer choice list that should stay compact</td></tr><tr><td><strong>Date</strong></td><td>Appointment, delivery, event, or requested order dates</td></tr></tbody></table>

#### 5.1. Settings shared by most fields

<table><thead><tr><th width="120.4765625">Setting</th><th width="99.91015625">Options</th><th>What it controls</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>Text</td><td>Names the information being requested. Use a short, specific prompt such as “Order number” or “Preferred appointment date.”</td></tr><tr><td><strong>Placeholder</strong></td><td>Text</td><td>Shows example or instructional text inside Text, Email, Phone, Textarea, and Date fields before customers enter a value.</td></tr><tr><td><strong>Required</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Prevents submission until the customer completes the field.</td></tr><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>1/2</li><li>1/3</li></ul></td><td><ul><li><strong>Fill</strong> uses the complete row.</li><li><strong>1/2</strong> allows two compatible fields on a row.</li><li><strong>1/3</strong> allows three compatible fields on a row.</li></ul></td></tr></tbody></table>

{% hint style="warning" %}
**Warning:** Half-width and one-third-width layouts depend on neighboring fields and available space. Preview the complete form on desktop and mobile after reordering fields.
{% endhint %}

#### 5.2. Field types

<details>

<summary>Text</summary>

Use **Text** for short, single-line answers such as a customer's name, order number, company name, or subject.

</details>

<details>

<summary>Email</summary>

Use **Email** when customers need to provide an email address. The email-specific input helps customers enter an appropriately formatted address.

{% hint style="success" %}
**Tip:** Make Email required when you need to reply to submissions. Pair it with a half-width Name field for a compact first row.
{% endhint %}

</details>

<details>

<summary>Phone</summary>

Use **Phone** for a telephone or mobile number. Keep it optional unless phone contact is necessary for the request.

</details>

<details>

<summary>Textarea</summary>

Use **Textarea** for messages, questions, project briefs, and other answers that need multiple lines.

<table><thead><tr><th width="99.99609375">Setting</th><th width="99.5078125">Options</th><th width="464.1796875">What it does</th></tr></thead><tbody><tr><td><strong>Lines</strong></td><td>2–12</td><td>Controls the visible height of the text area. More lines signal that a detailed answer is welcome; four to six works well for most contact forms.</td></tr></tbody></table>

</details>

<details>

<summary>Radio</summary>

Use **Radio** when customers must select one option and you want every choice visible.

<table><thead><tr><th width="99.82421875">Setting</th><th width="165.5859375">Options</th><th width="398.16796875">What it does</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>Inline rich text with links</td><td>Sets the prompt for the radio group. Supports inline markdown formatting and links.</td></tr><tr><td><strong>Options</strong></td><td>Comma-separated choices</td><td>Defines the choices displayed as radio buttons. Enter each choice separated by a comma.</td></tr><tr><td><strong>Margin</strong></td><td>Custom top and bottom values</td><td>Adds space around the Radio field. Desktop values range from 0-200px and mobile values range from 0-100px.</td></tr></tbody></table>

</details>

<details>

<summary>Checkbox</summary>

Use **Checkbox** for a two-state response such as yes/no, accepted/not accepted, or requested/not requested.

<table><thead><tr><th width="113.80859375">Setting</th><th width="115.00390625">Options</th><th width="434.359375">What it does</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>Inline rich text with links</td><td>Sets the checkbox label. Supports inline markdown links (for example, linking directly to terms of service or privacy policies).</td></tr><tr><td><strong>Unchecked value</strong></td><td>Text</td><td>Sets the response recorded when the checkbox is not selected.</td></tr><tr><td><strong>Checked value</strong></td><td>Text</td><td>Sets the response recorded when the checkbox is selected.</td></tr><tr><td><strong>Margin</strong></td><td>Custom top and bottom values</td><td>Adds space around the Checkbox field. Desktop values range from 0-200px and mobile values range from 0-100px.</td></tr></tbody></table>

{% hint style="warning" %}
**Warning:** If you use a checkbox for consent, write a clear label and confirm that the wording meets the privacy or marketing requirements that apply to your store.
{% endhint %}

</details>

<details>

<summary>Dropdown</summary>

Use **Dropdown** when customers need to select one option from a longer list without displaying every choice at once.

<table><thead><tr><th width="94.5">Setting</th><th width="114.71484375">Options</th><th width="453.98046875">What it does</th></tr></thead><tbody><tr><td><strong>Options</strong></td><td>Comma-separated choices</td><td>Defines the choices displayed in the dropdown. Enter each choice separated by a comma.</td></tr></tbody></table>

</details>

<details>

<summary>Date</summary>

Use **Date** for a preferred appointment, event, delivery, or order date. Choose placeholder text that clearly shows the date format customers should enter.

</details>

### 6. Action

The **Action** area appears at the end of the Form and holds the Description and Submit button. It is built in, so you configure it rather than adding it as another field.

The Action area works like a **Group**: it arranges the Description and Submit button horizontally or vertically, then uses alignment, position, and gap to control how those two parts sit together.

For a detailed explanation of how these layout settings interact, see [Inner content layout settings in a Group](https://ursus-ecom.gitbook.io/arctos-theme/blocks/contact/pages/ABvGsQq7dgOOxcwgztbs#id-3.2.-inner-content-layout).

<details>

<summary>Description</summary>

The Description displays supporting text near the Submit button.

<table data-search="false"><thead><tr><th width="109.6953125">Setting</th><th width="159.9453125">Options</th><th width="411.859375">What it does</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Inline formatted text and links</td><td>Sets the supporting, privacy, or consent text shown near the Submit button.</td></tr><tr><td><strong>Show checkbox</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turns the description into a customer-confirmed choice.</td></tr><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> makes the Description only as wide as its text needs.</li><li><strong>Fill</strong> stretches the Description to fill the available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixels</li></ul></td><td>Appears when <strong>Width</strong> is <strong>Custom</strong>.</td></tr><tr><td><strong>Custom width</strong></td><td><ul><li>0–100%</li><li>0–1000px</li></ul></td><td>Sets the precise width for the selected unit.</td></tr><tr><td><strong>Alignment</strong></td><td>Text alignment control</td><td>Positions the description text when its width is not <strong>Fit</strong>.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a different width and alignment specifically for mobile screens.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Adds space around the Description to separate it from the Submit button and neighboring content.</td></tr></tbody></table>

{% hint style="info" %}
**Note:** Turning on **Show checkbox** changes the description into a customer-confirmed choice. Use clear wording so customers understand what they are agreeing to before submitting.
{% endhint %}

</details>

<details>

<summary>Submit button</summary>

The Submit button sends the completed form and remains part of the fixed Action area. Its label, icon, style, size, typography, and spacing controls work like the standard Button block.

To learn how these controls work, see:

* [Button block](/arctos-theme/blocks/basic/button.md#button-type) for button-specific settings and customization
* [Button theme settings](https://ursus-ecom.gitbook.io/arctos-theme/blocks/contact/pages/cd8de4309365ee1b1aacf3bbaf0f603dcd20fae0#id-2.-button) for the shared button styles used across your store

</details>

### 7. How the settings work together

* The Form **Gap** controls spacing between customer fields. The Action **Gap** controls spacing only between the Description and Submit button.
* Field **Width** determines how fields share a row. The Form **Width** determines the width of the complete form.
* The Form **Input style** affects customer-entry fields. Submit button styling is configured separately.
* Form, Action, and Submit button color schemes can each inherit from their parent or use an override.
* The Action **Direction** determines whether its Description and Submit button appear side by side or stacked.