# Contact form

### Section overview

The Contact form section allows merchants to add a customizable contact form to their Shopify store, enabling customers to easily get in touch.

#### Common use cases

* Creating a dedicated contact page for customer inquiries
* Adding a contact form to product pages for product-specific questions
* Embedding a contact form in about pages to facilitate business partnerships
* Including a contact section on service pages for quote requests

#### Usage tips

* Keep the form concise with only necessary fields to improve completion rates
* Use clear labels and placeholder text to guide users
* Consider adding custom fields for categorizing inquiries (like "Subject" or "Order Number")
* Ensure form validation messages are helpful and visible
* Test the form on mobile devices to verify all fields are easily accessible and tappable

### Section settings

| Setting              | Type            | Description                                                                          |
| -------------------- | --------------- | ------------------------------------------------------------------------------------ |
| Heading              | Text            | Sets the main title displayed above the contact form                                 |
| Top spacing          | Range (0-300px) | Controls the amount of padding above the section                                     |
| Bottom spacing       | Range (0-300px) | Controls the amount of padding below the section                                     |
| Color scheme         | Select          | Determines the background color scheme of the section                                |
| Custom color         | Color picker    | Sets a custom background color (when "Custom" is selected as color scheme)           |
| Text color           | Select          | Forces light or dark text regardless of background color                             |
| Border color         | Select          | Sets the color tone for any borders in the section                                   |
| Button color         | Select          | Determines the style and color of the submit button                                  |
| Enable color fade    | Checkbox        | Enables a smooth color transition effect when scrolling                              |
| Border position      | Select          | Controls where borders appear on the section (top, bottom, both, or none)            |
| Horizontal alignment | Select          | Determines the horizontal alignment of the form (left, center, or right)             |
| Enable margin        | Checkbox        | Controls whether the section has horizontal margins                                  |
| Enable max width     | Checkbox        | Limits the maximum width of the contact form                                         |
| Visibility           | Select          | Controls which devices the section is visible on (all, mobile only, or desktop only) |

### Block settings

#### Field

The Field block allows merchants to add custom input fields to the contact form beyond the default name and email fields.

Block limit: 50

| Setting           | Type   | Description                                                                        |
| ----------------- | ------ | ---------------------------------------------------------------------------------- |
| Input label       | Text   | Sets the label text for the custom field                                           |
| Input placeholder | Text   | Sets the placeholder text displayed inside the input field                         |
| Input type        | Select | Determines the type of input field (single line, multi-line textarea, or checkbox) |