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.
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.
Available blocks
Click (+) Add block to find the following blocks.
| Block | Description |
|---|---|
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
Last updated
