Contact Form

The Contact Form section lets customers send messages directly from your storefront. It combines a customizable content area with a contact form, making it suitable for Contact Us, customer support, inquiries, or service pages.

1. Section settings

Click the section name to see section settings on the right-hand sidebar.

1.1 Appearance

• Reveal on scroll: Enable animation when the section becomes visible while scrolling.

• Make section full width: Enable this option to make the section expand to the full width of the screen.

• Desktop layout split: Enable this option to display the content area and contact form in a split layout on desktop.

• Color scheme: Select the color style applied to the section. You can choose an available color scheme or customize it through Edit scheme.

1.2 Button

The button settings control the appearance of the Send message button.

• Button style: Choose between Solid and Outline styles.

• Show button icon: Enable or disable the icon displayed inside the button.

• Uppercase: Enable this option to display the button text in uppercase.

1.3 Section padding

Use these settings to adjust the spacing around the section and maintain a balanced layout across different screen sizes.

Available options:

• Top padding

• Bottom padding

• Mobile top padding

• Mobile bottom padding

1.4 Scrollspy navigation item

The Scrollspy navigation item setting allows you to define the section title used for scroll-based navigation.

• Title: Enter the title used to identify this section in Scrollspy navigation.

2. Container Block - Section header

The Section header container is used to build the content displayed next to the contact form.

Click Add block under the Contact form section to add the Section header container.

2.1 Block settings

The Section header container includes settings for controlling the content layout.

• Text alignment: Choose the alignment of the content, such as left, center, or right.

• Custom width: Enable this option to customize the width of the Section header content area.

2.2 Child Blocks

Click Add block inside the Section header container to add content.

The available child blocks include:

• Heading

• Text

• Icon with text

• Spacer

Child blocks can be reordered by dragging and dropping them in the Theme Editor.

Note: Child blocks must be added under the Section header container.

3. Contact form

The contact form is displayed alongside the Section header content and allows customers to submit their information and message.

Where are contact form submissions sent?

When a customer submits the contact form, the message is sent to your store’s Sender email address configured in Shopify Admin → Settings → Notifications → Sender email:

The submission does not go to a subscription/customer list like the Email signup form.