Contact form

Featured links

1. Company XYZ documentation on headers settings
2. Company XYZ documentation on section backgrounds settings
3. Company XYZ documentation on colors settings
4. Company XYZ documentation on visibility settings
5. Shopify documentation on sections and blocks

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to collect customer messages in a clean, branded layout. You can introduce the form with optional heading content, adjust the submit button style, and fine-tune how the block appears across desktop and mobile. For a broader overview of how blocks work in the theme editor, see Shopify documentation on sections and blocks

Core settings

The core settings shape the form’s main call to action. Start here when you want the block to feel more prominent or easier to use on smaller screens.

1. Choose a button style that fits the page. Filled styles usually work best when sending a message is the main action, while plain styles feel lighter when the form sits beside other content.
2. Enable a full-width mobile button when phone usability matters. This makes the submit action easier to spot and tap in tighter layouts.

Tip

If this block is the main purpose of the page, use a stronger button style and the full-width mobile option to make completion feel more straightforward.

Header settings

Header settings help you explain the purpose of the form and give the block stronger structure. They are optional, but they can make the page clearer and easier to scan. See header settings for the shared header pattern.

1. Add a heading and subheading to tell visitors what the form is for, what they can ask about, or what response they should expect.
2. Use the caption and icon carefully if you want a little more personality or emphasis. In more formal layouts, a simple text-only header is often the cleaner choice.
3. Set the heading type to match the page structure so the block feels integrated instead of competing with the main page title.
4. Align the text to suit the layout. Left alignment is usually easiest to read, while centered text can work well in more promotional or minimal designs.

Avoid using the top page heading level here unless this block is meant to carry the main page title.

Standard block settings

Block background settings

These settings let you place the form over a color, gradient, image, or video background. They are useful when you want to separate the block from surrounding content or turn it into a more branded feature area. See background settings for the shared behavior.

1. Use a solid color or subtle gradient when readability is the priority. This is usually the safest option for forms.
2. Add an overlay over images or video so the heading area stays readable against busy media.
3. Set mobile-specific media only when needed if the desktop image or video crops awkwardly on smaller screens.
4. Use video backgrounds sparingly so motion does not distract from filling out the form.

Caution

After adding a background image, gradient, or video, check the block on both desktop and mobile to make sure text and actions still stand out clearly.

Color settings

These settings override the default colors for the block’s icon and text content. Use them when the form sits on a custom background or needs to match a specific campaign or page style. See color settings for the shared color behavior.

1. Adjust heading and supporting text colors together so the block feels consistent.
2. Use the icon color as an accent rather than the main source of emphasis.
3. Recheck contrast after any background change to keep the text easy to read.

Visibility settings

Visibility settings control whether the block appears on desktop, mobile, or both. This is useful when you want a simpler mobile layout or a device-specific contact experience. See visibility settings for the shared behavior.

1. Hide the block on one device only when another layout handles that audience well.
2. Use mobile-only or desktop-only display intentionally to reduce clutter, not to remove an important contact path.

Usage notes

1. Keep the purpose obvious. Use the heading and subheading to explain what the form is for and what visitors should send.
2. Make the action easy to spot. Choose a button style that stands out enough for the page, especially on mobile.
3. Protect readability. If you add a background image, gradient, or video, make sure text and controls remain clear at a glance.
4. Match the page hierarchy. Pick a heading type that fits the rest of the page so the block supports the layout instead of competing with it.
5. Use visibility with intent. Only hide the block on desktop or mobile when visitors still have a clear way to contact you.
6. Check both viewports. Review the block on desktop and mobile after making layout, alignment, visibility, or media changes, since the two views can behave differently.
7. Keep fallback styling available. Leave colors and media at their default or blank values when you want the theme’s built-in styling to stay in place; use explicit overrides only when you want the block to feel more independent.
8. Choose media for clarity. If you use different desktop and mobile media, confirm that cropping, loading, and text readability still work well in both views.
9. Make state messages readable. Keep any success or error messaging easy to scan so visitors can complete the form without confusion.