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.

Shopify | 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 content blocks

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.

BlockDescription

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.

SettingDescription

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

SettingDescription

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

SettingDescription

Show reCAPTCHA terms

Choose to show a reCAPTCHA form to verify users if you have spam protection enabled.

Layout

SettingDescription

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

SettingDescription

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

Last updated