Contact form

The Contact form section allows customers to contact you directly from any page on your store.

It includes various input fields for collecting details about customer inquiries, making it ideal for handling detailed requests or general questions. With flexible layout options, the section can incorporate images or informational text to enhance brand awareness and provide context for inquiries.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Contact form section. The section will now be added to your page, ready for customization.

2, Section settings:

The Section settings provide options to customize the layout, background, and alignment.

• Layout: Choose the layout for the Contact form section:

Image left

Image displays on the left, Contact form on the right.

Image right

Text left

Text right

None

• Position: adjusts the vertical alignment of the Contact form, Text card, and Image card within the section: Top, Middle or Bottom.

• Add space between image and container: create spacing between the image and the contact form—this applies only when an image card is active.

3, Block settings:

The Contact form section includes multiple blocks for customizing fields, layout, and additional content.

1. Message block: Allows customers to write detailed inquiries and special requests.

2. Phone number block: Lets customers provide their phone number for follow-up communication.

3. Rich text: Enter text for a heading and description, useful for dividing long forms. Add supplementary text below the heading, providing additional information.

4. Custom field block

• Field type: Choose the field type:

Text short

Creates a one-line input for short text entries.

Text - long

Dropdown

Checkbox

Radio buttons

• Label: Enter a label for the input field.

• Placeholder: Add placeholder text (applicable for Text - Short and Text - Long fields).

• Required: If checked, this field must be completed to submit the form.

  • Dropdown values: Enter values for dropdown options, separated by commas.

  • Checkbox value: Specify the value that appears when the checkbox is checked or unchecked.

  • Radio buttons: Enter values for radio button options, separated by commas. Choose display style: Horizontal: Displays options in a row. Vertical: Displays options in a column.

1. Image card block (Visible when layout is set to “Image left” or “Image right”)

• Image: Select an image for the card and assign a link. Adjust the overlay opacity from 0% to 100%.

• Text: Add content over the image, including a heading and description.

• Desktop content position: Adjust the content position (e.g., Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right).

• Desktop content width: Adjust the width of the content area on desktop; content width is optimized for mobile automatically.

• Button: Create a button with a label and link. Choose the button style (Solid, Outline, or Text).

• Mobile layout: Set text alignment on mobile to Left, Center, or Right.Note: The Image card block will always appear above the Contact form on mobile.

1. Text card block (Visible when layout is set to “Text left” or “Text right”)

• Add a heading and description for the Text card block.

• Show social media icons: Display social media icons at the bottom of the text card if desired.

• Mobile layout: Align content on mobile to Left, Center, or Right.Note: The Text card block also will always appear above the Contact form on mobile.

Note: How to View Contact Form Submissions?

When a customer submits the Contact form section, the submission will be sent to your store's sender email address. To update or change the sender email address, go to the Notifications settings page in your Shopify admin.