Contact form

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Contact form section lets visitors easily contact your business by combining a simple inquiry form with essential contact details. This section supports both direct messaging and prominent display of information to promote customer trust. With options for alignment, button presentation, and header placement, Contact form fits seamlessly into a wide range of storefront styles.

⚠️ Important: The Contact form section creates a customer-friendly area for inquiries while making your business appear approachable and responsive.

Key components and functionality

Settings in the Contact form section are thoughtfully organized so you can adapt the section’s appearance and behavior to support your site’s goals. Each group of settings helps you craft a straightforward, supportive touchpoint for customer communication.

Section introduction

The Contact form greeting and introductory content give users a confident sense of how to reach out. Adding an inquiry form beside your official contact details builds credibility and encourages users to get in touch.

Layout and display settings

These options determine how the Contact form section appears and operates across different screen sizes, ensuring your contact point remains clear and accessible.

Text alignment

Choose how your main text is aligned — select left, center, or right alignment. Good alignment optimizes readability and keeps your messaging tidy.

Button configuration

Customize the action button for visual impact and clarity.

1. Button icon
   Add an icon to clarify the button’s purpose and give a visual cue.

2. Button text
   Write a clear call-to-action label. For icon-only buttons, simply leave this field blank.

3. Button link
   Set a destination link if you want users to be redirected.

4. Open link in a new tab
   Decide whether links should open in a new tab.
   - Default is false.

5. Button style
   Pick from styles such as primary, secondary, extra large, plain, small, small-secondary, or circle to suit your brand.

6. Button layout
   Choose whether the icon appears to the left, right, or is used on its own.

7. Button position
   Decide if the button appears above or below your section’s main content.
   - Default is above.

8. Button position on mobile
   Control where the button appears for mobile visitors. - Default is above.

Header position

Place the section heading above, to the left, or to the right of your content for varied layouts.

• Default is above.

Display full width on mobile

Allow the section to extend edge-to-edge on mobile for a more immersive design.

• Default is false.

Supported block types

The Contact form section accepts up to two block types for a flexible layout that meets your communication needs.

1. Form
   Lets users send a message directly through the section.

2. Contact information
   Showcases details like phone, email, business hours, and can feature social media icons for easy contact and social proof.

With both blocks, you can give customers all the options they need to connect on their terms.

⚠️ Important: Use both blocks for full coverage. Combining an inquiry form and detailed contact info helps maximize customer engagement.

Usage notes

Responsiveness ensures a smooth experience for every visitor. Review alignment, button, and heading settings so your section looks balanced on desktop and mobile screens.

Performance is maintained by limiting unnecessary background images or video, ensuring faster load times.

Accessibility is paramount. Use descriptive headings, provide clear button text, and maintain strong contrast for text and backgrounds. Always pair icons with text for clarity.

Customization empowers you to experiment with layout and call-to-action styles. Test different configurations to boost customer interaction and messages received.

You can add up to two blocks — usually a form and an information block — so your section is robust, helpful, and visually appealing.

💡 Tip: Match a welcoming headline with an easy-to-use form and up-to-date contact details. Preview on different screen sizes to ensure everything remains visible and user-friendly.