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 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

Click (+) Add block to find the following 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.
Text input	Show a text field for customers to add a single word or line.
Text area	Show a text field for customers to add multiple lines. In the block settings, add Placeholder text and change the Height.
Checkbox option	Show a checkbox that customers can click to select options or agree to terms.
Radio buttons	Show a list of buttons to let customers select a single option. In the block settings, add text for up to 10 the radio button options.
Select dropdown	Show a menu dropdown to let customers select a single. In the block settings, add text for up to 10 dropdown options.
Spacer	Add a margin of space between other blocks. In the block settings, choose to Show divider and change the Spacing size: either Small, Medium, Large, or Extra large.
Submit	Show the contact button that lets visitors send their message. The default text is “Submit”. Set the Button size to Medium or Large.

Click a contact field or option Block to find the following settings.

Setting	Description
Label	Add text to display a label above the field or option.
Required	Choose whether to make a field or option required to submit a message.
Block width	Change the width of the block to display the Full width of the section or Half width. On mobile, all blocks appear full width.

Settings reference

Click the Contact form section to find the following settings.

Header content

Setting	Description
Center header content	Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.
Accent	Add text to show a small heading above the main section heading.
Heading	Add text to show a main heading above the section.
Heading size	Change the font size of the heading from small (1) to large (8).
Subheading	Add text to show a subheading below the main heading.

Form

Setting	Description
Show reCAPTCHA terms	Choose to show a reCAPTCHA form to verify users if you have spam protection enabled.

Layout

Setting	Description
Content width	Display the section at Full width or use the slider to set a custom width
Custom content width	Set the maximum width of the section: between 400 and 1200 pixels. The section will change in size to fit smaller screen sizes.

Section style

Setting	Description
Top spacing	Increase or decrease the amount of space above the section.
Bottom spacing	Increase or decrease the amount of space below the section.
Enable animation	Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

\

---

Related links

Contact page Newsletter