Contact form

Contact form

Start your free trial
Start your free trial

General

Online store speed
Online store speed
Accessibility
Accessibility
Theme updates
Theme updates

Theme styles

Style presets
Style presets
Colors
Colors
Fonts
Fonts
Animation
Animation
Social media
Social media

Header

Announcement bar
Announcement bar
Mobile menu
Mobile menu
Search bar
Search bar

Sections

Products

Product listings
Product listings
Product badges
Product badges
Quick view
Quick view
Quick add
Quick add

Product page

Product template
Product template
Variant chips
Variant chips
Sticky add-to-cart bar
Sticky add-to-cart bar
Sibling product swatches
Sibling product swatches
Product recommendations
Product recommendations

Collection page

Collections template
Collections template
Banner
Banner
Product grid
Product grid
Filters and sorting
Filters and sorting

Cart

Quick cart
Quick cart
Cart page
Cart page
Added-to-cart popup
Added-to-cart popup
Cross sells
Cross sells
Free shipping bar
Free shipping bar
Low inventory warning
Low inventory warning

Pages

Templates
Templates
Home page
Home page
About page
About page
Blogs page
Blogs page
Blog post
Blog post
Collections list
Collections list
Contact page
Contact page
Password page
Password page
Search page
Search page
404 page
404 page

Support

Support policy
Support policy
Shopify vs Theme issues
Shopify vs Theme issues
Store access requests
Store access requests

Contact form

Use the Contact form section to let customers send you a message 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.

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

Note | Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or use metafields and dynamic sources.
icon
STEPS

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. Learn how to use templates in our Templates guide.
  3. Under Template, click (+) Add section and select Contact form.
  4. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add blocks

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

icon
STEPS

In your theme editor (Customize):

  1. Click on a Block to open the settings.
  2. Click (+) Add block to add a new block.

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

  3. (Optional.) Click and hold the drag-and-drop handles ⋮⋮ to re-order the blocks.
  4. Click Remove block or the eye icon to delete or hide a block.

  5. Click Save.

Settings reference

Click (+) Add block to find the following blocks.

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.

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.

Click the Contact form section to find the following settings.

Header content

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

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

Layout

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

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. Go to our Animation guide to learn more.