Contact form

Theme section

Use the Contact form section to let customers get in touch with you directly from any page.

Add custom text fields, buttons, and options for customers to fill out, and choose to make them required before submitting a message.

To create a full contact page, see the contact page template.

Shopify | Sending and receiving messages through the contact form is a Shopify feature. You can test Shopify's free theme Dawn to see if an issue is platform-related. For assistance, you can contact Shopify support ↗.

Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

STEPS

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   Learn how to use templates in our Templates guide.

2. Under Template, click (+) Add section and select Contact form.

3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add contact form fields and options

Use the Contact form blocks to add custom text fields, buttons, and options for customers to fill out, and choose to make them required before submitting a message.

STEPS

In your theme editor (Customize):

1. Click on a Block to open the settings.

   Click (+) Add block to add a new block.

   See the list below for an overview of all available blocks.

2. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

   

   Click Remove block or the eye icon to delete or hide a block.

3. Click Save.

Available blocks

Block	Description
Email	Show a field for customers to enter their email. This field is Required by default.
Phone	Show a field for customers to enter their phone number. Choose to make this a Required field.
Text line	Show a text field for customers to add a single word or line. Enter a label for the field (e.g. "Name"). Choose to make this field Required.
Text area	Show a text field for customers to add multiple lines. Choose to make this a Required field. Enter a label for the field (e.g. "Message").
Checkbox option	Show a checkbox that customers can click to select options or agree to terms. Choose to make this a Required checkbox.
Radio buttons	Show a list of buttons to let customers select a single option out of a maximum of six. Enter a label for the radio buttons (e.g. "Select an option").
Select dropdown	Show a menu dropdown to let customers select a single option out of a maximum of six.
Heading	Enter text to display as a title above any blocks.
Spacer	Add a margin of space between other blocks.test

Section content

Customize the section Headings and choose to display a Phone number field as well as reCAPTCHA terms if you have spam protection enabled.

STEPS

In your theme editor (Customize):

1. Click on the Contact form section to open the settings.

2. Change the Heading text as a title for your section.

   Delete the text in this field to remove the heading.

3. Enter Subheading text to display more information below the Heading.

4. Select the Alignment for the Heading and Subheading. Either Heading and text left, Heading and text center, or Heading center, text left.

5. Set the Heading size to Small, Medium, or Large.

6. Uncheck the Show reCAPTCHA terms if your store has spam protection enabled.

7. Click Save.

Section style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

1. Click on the Collapsible row list section to open the settings.

2. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

   Learn more about Section animations in Stiletto.

3. Choose to display a Top divider that separates sections with a Solid line.

   The Top divider uses the color of Lines and borders set in the Theme settings.

4. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

5. Set the Content width to display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

6. Click Save.

Settings reference

Click the Contact form section to find the following settings.

Setting	Description
Alignment	Set the position of the section Heading and Text.
Heading	Enter text to display a section title in the top-left corner.
Heading size	Display heading text as Small, Medium, or Large.
Subheading	Enter text to display a section subheading below the heading. Use the formatting buttons to add text styles, links, or lists.
Show reCAPTCHA terms	Choose to show a reCAPTCHA to verify users if you have spam protection enabled.

Section style

Setting	Description
Enable animation	Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.
Top divider	Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings.
Padding	Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.
Content width	Display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

\

---

Related links

Contact page Newsletter