Skip to content
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) |