Contact form

Overview

The Contact form block is an adaptable feature for engaging your visitors and gathering inquiries across a variety of section types. It allows you to promote communication while matching your brand's style, supporting responsive design, and maintaining a professional user experience. By adding this block where your users need help or have questions, you can increase trust and engagement throughout your site.

⚠️ Important: The Contact form block ensures that customers always have an easy way to reach out, regardless of where they are browsing.

Available in sections

You can add the Contact form block to these sections for maximum flexibility:

1. Collage

2. Contact form

3. Product information

4. Multicolumn

5. Blog post

6. Page content

Key components and functionality

Block introduction

The Contact form block provides a modern, mobile-ready form that you can easily configure for various contexts. Its settings let you quickly customize headings, supporting text, and styles to ensure the block feels consistent and clear in any section you choose. Rapid visual and content adjustments keep the experience accessible for every user.

Button style

Use the button style controls to choose how the submit button appears, helping the form stand out or blend in as needed. Options let you adapt the call-to-action emphasis and size based on block placement.

1. Primary — High-visibility for major calls to action. Default

2. Secondary — A supportive style for areas where the form is not the primary focus.

3. Extra large — Eye-catching and suitable for prominent layouts.

4. Plain — Minimalist, blending into content-heavy sections.

5. Small — Efficient for use in narrow or sidebar spaces.

6. Small secondary — A low-profile, alternative compact option.

7. Circle — Ideal for layouts where a round, icon-friendly button is preferred.

Default: Primary

💡 Tip: Use attention-grabbing buttons for key areas, and more subtle styles where space is limited or the form should support (not distract from) nearby content.

Visibility settings

Visibility controls allow you to decide where your Contact form block should appear based on device. This ensures the form delivers value without cluttering smaller screens or less relevant pages.

1. Show on all devices Default

2. Hide on desktop

3. Hide on mobile

💡 Tip: Adjust these visibility settings to remove the form from crowded views or emphasize it where users most often need to get in touch.

Text and layout settings

Fine-tune labeling, headings, and layout alignment for the Contact form block. These content-focused settings direct user attention, reinforce branding, and improve accessibility and understanding.

1. Text alignment — Set how all text aligns within the block: left, center, or right.

2. Icon — Optionally add an icon for visual emphasis or brand recognition.

   1. Icons support clear, quick recognition of a form’s purpose.

3. Caption — Insert a short introductory phrase above your main heading.

4. Heading — Choose the main title for your form. Default: Contact form

5. Heading size — The Heading size setting lets you choose from predefined text scales used consistently across your storefront. Each option defines the visual weight and hierarchy of your banner or section headings.

   1. Available options: XS, S, M, L, XL, Jumbo

6. Heading type — Define the heading’s structural level for search engines and accessibility. Default: h2

   1. Available options: p, h1, h2, h3, h4, h5, h6.

7. Subheading — Include additional descriptive guidance to encourage or instruct users.

8. Mobile text alignment — Specifically adjust alignment for mobile screens to preserve readability and flow.

📝 Note: Use brief and descriptive headings for clarity, and consider customizing alignment or adding icons to fit each section’s style.

Usage notes

Preview the Contact form block in each context and orientation to ensure headings stand out and the button is clear and actionable. Use the visibility and button style controls to prevent clutter or competition with other elements. Always review color contrast, text legibility, and form spacing for accessibility. Responsive settings and concise guidance will support both usability and completion rates.

💡 Tip: Adapting your Contact form block in each section — with clear hierarchy, short instructions, and the right button style — creates a seamless, high-converting user experience.