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)