Contact form

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the contact information block
3. Company XYZ documentation on the contact form block
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on section backgrounds settings
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to collect messages and show the contact details people may need before reaching out. You can include a form, a contact details panel, or both, then reorder the blocks to change which content appears first.

Core section setup

This section works best when you decide the page’s main goal first. If you want visitors to send a message quickly, place the form block first. If visitors usually need a phone number, email address, location, or hours before contacting you, place the contact information block first.

For a broader overview of how blocks work in the editor, see Shopify documentation on sections and blocks

1. Use both blocks for a complete contact page.
2. Use the form block alone for a simpler, action-focused layout.
3. Use the contact information block to support the form with direct contact options.

Reordering the blocks changes the layout and reading flow. After moving blocks, preview the page on desktop and mobile to make sure the most important contact method appears first.

Color settings

These settings override the default theme colors for the section’s icon, main text, and subheading text. They are most useful when you want the contact area to stand out or when you are placing it over a custom background.

Leaving color values blank or close to the default usually preserves the theme’s fallback styling. More explicit color, gradient, or media choices make the section feel more independent, so check that the whole contact area still works as a single unit.

If you also add styled block backgrounds, keep the section and block colors working together rather than treating each area separately. Strong contrast matters here because visitors need to scan details and complete the form without effort.

Supported block types

1. Contact information
2. Contact form

Contact information

Use this block to show practical details alongside the form, such as phone, email, address, hours of operation, and social media icons. It also includes its own optional heading area, so you can label this content clearly when the page contains both blocks.

1. Keep details short and easy to scan.
2. Show social icons only if those profiles are active and maintained.
3. Use the block background settings if you want the contact details to feel like a separate panel.

Learn more in Company XYZ documentation on the Contact information block.

Contact form

Use this block to display the message form itself. You can style the submit button, make it full width on mobile, and optionally add a small heading area inside the block.

1. Add a short heading or subheading if visitors need guidance on what this form is for.
2. Use a full-width mobile button when you want the form to feel easier to complete on smaller screens.
3. Keep the form area visually simple if the contact details block already uses a stronger background treatment.
4. Review empty, success, and error states after publishing so the confirmation and validation messages stay easy to read.

Learn more in Company XYZ documentation on the Contact form block.

Standard section settings

Header settings

Header settings control the introductory content above the blocks, including alignment, icon, caption, heading, supporting text, and an optional button. Use this area to introduce the page, add structure, or include a secondary action such as directions, booking, or help content.

Choose the heading type carefully so the page keeps a clear content hierarchy. If you add the optional button, review its desktop and mobile position so it does not interrupt the main contact flow.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the entire section. This works well when you want the contact area to feel more prominent or visually separated from surrounding content.

Background media can affect readability and layout balance, especially when both blocks are shown. If you use an image or video, review overlay and text colors together so the content stays clear.

Padding settings

Padding settings control the space above and below the section. Use them to give the contact area more breathing room or to tighten the layout if the page already contains several sections.

Set desktop and mobile padding intentionally. Contact layouts often need a little more room on small screens to avoid feeling crowded.

Separator settings

Separator settings add an optional line at the top or bottom of the section. This is a simple way to separate the contact area from nearby content without adding a full background treatment.

Use a custom separator color only when the default border styling is too subtle. In many layouts, a light divider is enough.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is helpful when you want a different contact experience on smaller screens.

Hide the section on one device only if visitors still have a clear way to contact you there. Avoid creating a layout where the main contact method disappears unexpectedly.

Width settings

Width settings control the content width inside the section and the width of the section wrapper itself. Use them to make the form easier to read or to let the background extend wider than the content.

The content width usually has the biggest effect on comfort and readability. Check width changes on the live page as well as in the editor, since the editor view can make layout differences look smaller than they are.

Usage notes

1. Lead with the primary action. Put the form first when quick inquiries matter most, and put contact details first when visitors usually need reference information before messaging.
2. Keep details current. Review phone numbers, email addresses, address content, business hours, and social links regularly so the section stays trustworthy.
3. Protect readability. When using custom backgrounds, overlays, or color overrides, make sure text and form content remain easy to read at a glance.
4. Optimize mobile scanning. Use mobile button width, block order, and visibility settings to keep the section easy to use on smaller screens.
5. Use width with restraint. Moderate content widths usually make contact forms and business details easier to scan than very wide layouts.
6. Review both viewport setups. If you use different desktop and mobile media or layout choices, confirm that cropping, fallback behavior, and text readability still work well on each device.