Contact form

Collect structured customer enquiries through Shopify's contact form.

Contact form gives visitors a direct way to send a message. Use it with clear response expectations and only request information the store needs to answer the enquiry.

[!NOTE] The settings, block limits, field rules, and validation details below match the current Strata section implementation. Submit only an approved synthetic test enquiry when checking a live storefront; do not capture personal submissions or notification data.

Add Contact form

In Shopify's theme editor, add Contact form to a compatible template or open an existing section. It is not available in header, footer, or overlay groups.

Content

Setting	What it controls	Default
Subheading	Optional short label above the form heading.	No default.
Heading	Main heading for the enquiry form.	`Contact us`.
Content	Rich text explaining how to contact the store and when to expect a reply.	`Share how customers can contact you and when they can expect a reply.`
Details heading	Optional heading for additional contact information.	No default.
Details text	Optional rich text for those details.	No default.
Button label	Submit button text.	`Send message`.

Use the details fields for safe public information such as expected response time or service hours. Do not put private support instructions or credentials in this section.

Image

Setting	What it controls	Options or default
Image	Optional image beside the form.	No default.
Image position	Places the image to the Left or Right of the form layout.	Left or Right. Default: Left.

When Image is blank, the form uses the text-and-fields layout without a media panel. Add alt text to a meaningful source image and make decorative imagery non-essential to the enquiry.

Layout

Setting	What it controls	Options or default
Full width	Removes the normal page-width constraint from the section.	Disabled by default.
Text position	Aligns the heading and supporting copy.	Left, Center, or Right. Default: Left.
Form width	Sets the content width of the form.	Small, Medium, or Large. Default: Small.

Use Small when the enquiry is simple and Large when the form has several approved fields. Check the longest label and error message at both viewport sizes.

Spacing

Setting	What it controls	Options or default
Section spacing	Chooses the section's spacing scale.	None, Small, Medium, or Large. Default: Medium.
Top spacing	Adds or removes the section's top spacing.	Enabled by default.
Bottom spacing	Adds or removes the section's bottom spacing.	Enabled by default.

Field blocks

The section accepts up to 12 blocks. The preset order is Name, Phone, then Subject. Blocks can be reordered in the Theme Editor.

Block	Purpose and limit	Settings
Name	Optional name field. Limit: 1.	None.
Phone	Optional phone field. Limit: 1.	None.
Subject	Optional subject field. Limit: 1.	None.
Custom	Adds a store-specific text field. Repeatable within the section's 12-block limit.	Label, default `Custom field`; Required field, disabled by default.

The form always renders Email and Message in addition to the optional blocks. They are not added through the block picker.

Validation and form states

Field	Verified behavior
Name	Optional text field, maximum 100 characters.
Email	Required email field, maximum 254 characters. Shopify validates the email value.
Phone	Optional telephone field, maximum 30 characters; the current input requests numbers only.
Subject	Optional text field, maximum 150 characters.
Custom	Text field, maximum 255 characters; becomes required only when Required field is enabled.
Message	Required textarea with a minimum of 10 and maximum of 5000 characters.

On an invalid submission, the form displays Shopify's form errors. On success, it displays the translated success status. Check both states with synthetic values and confirm the status can be reached by keyboard without leaving the page.

Privacy and support boundaries

Never ask visitors to submit passwords, payment-card details, private API credentials, or unnecessary customer information. Explain sensitive workflows through a secure support process instead of adding more form fields. Review the store's privacy notice and where Shopify sends contact notifications before publishing.

Desktop and mobile behavior

The image can sit beside the form when supplied; the exact stacking and geometry on smaller screens must be checked in the accepted build. Preview the longest field label, the error state, and the success state on desktop and mobile. Do not publish a breakpoint or fixed height that is not present in the current evidence.

Accessibility

Keep field labels visible and unique, especially for repeated Custom fields.
Use a meaningful image alt text or make the image decorative when the copy already communicates its purpose.
Test keyboard order, visible focus, browser autofill, invalid-field messaging, and the success status.
Mark only genuinely required fields as required; do not enable Required field merely to collect optional context.

Common issues

Symptom	Safe check
A field is duplicated	Remove the extra Name, Phone, or Subject block; each has a limit of one.
A custom field is not required	Enable Required field on that Custom block.
The submit button does not send	Complete the required Email and Message fields and satisfy the message length rule.
Error text is not visible	Submit a controlled invalid test and check focus and the Shopify form error state.
Notifications go to the wrong place	Confirm the store's Shopify contact notification settings; the section does not define the destination.

Evidence boundary

No screenshot is attached. Capture only an approved empty form, invalid state, and success state with synthetic values. Never commit customer submissions, account context, notification addresses, or private store data.