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

# Contact form

The **Contact Form** block allows customers to send direct messages or inquiries to the store. You can customize the labels for all input fields (Name, Email, Phone, Message), configure an optional dropdown, and define the block's width and spacing.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FuEZhC1rYkHOS8NBpVMka%2Fimage.png?alt=media&amp;token=16cfb35e-a618-4c7d-b52e-edbf0af6ff9b" alt=""><figcaption></figcaption></figure>

## General settings

<table><thead><tr><th width="270">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Name</strong></td><td><p>Sets the placeholder text for the name field in the contact form.</p><p>If this setting is left empty, the name field will be hidden from the storefront display.</p></td></tr><tr><td><strong>Email</strong></td><td>Sets the placeholder text for the email field in the contact form.</td></tr><tr><td><strong>Phone</strong></td><td>Sets the placeholder text for the phone number field in the contact form.</td></tr><tr><td><strong>Select label</strong></td><td>Specifies the text label displayed for the option select field</td></tr><tr><td><strong>Option</strong></td><td>Defines the selectable choices for the option select field. Enter the options in the desired order, separated by commas. Each comma indicates a new option in the dropdown list.</td></tr><tr><td><strong>Message</strong></td><td>Sets the placeholder text for the message field in the contact form.</td></tr></tbody></table>

## **Size**

<table><thead><tr><th width="149.79998779296875">Setting</th><th width="149.79998779296875">Applies To</th><th>Description</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td>Desktop</td><td><p>Defines the width of the form block on larger screens:</p><ul><li>Fit (Default — size determined by content)</li><li>Fill (Expands to fill available space)</li><li>Custom (Allows setting a specific percentage width).</li></ul></td></tr><tr><td><strong>Custom Width</strong></td><td>Desktop</td><td><p><em>Only visible when Width is Custom</em>.</p><p>Use the slider to set a specific block width, measured in percentage (%) (Range: 0% to 100%).</p></td></tr><tr><td><strong>Mobile Width</strong></td><td>Mobile</td><td><p>Defines the width of the form block on smaller screens:</p><ul><li>Fit (Default — size determined by content)</li><li>Fill (Expands to fill available space)</li><li>Custom (Allows setting a specific percentage width).</li></ul></td></tr><tr><td><strong>Custom Mobile Width</strong></td><td>Mobile</td><td><p><em>Only visible when Mobile Width is Custom</em>.</p><p>Use the slider to set a specific block width on mobile, measured in percentage (%) (Range: 0% to 100%).</p></td></tr></tbody></table>

### Spacing

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| **Bottom** | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |

## **Block Submit button**

<table><thead><tr><th width="279.59991455078125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Button label</strong></td><td>Display the content of the button.</td></tr><tr><td><strong>Type</strong></td><td><p><strong>Type</strong></p><ul><li>Primary</li><li>Outline</li></ul></td></tr><tr><td><strong>Show icon</strong></td><td>Show/hide icon</td></tr></tbody></table>