Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Contact form

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.

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

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

  2. In the side panel, click (+) Add section and select Contect form.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

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

The following blocks are available to add to the Contact form section with adjustable Block widths:

Configuration Settings

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.

Choose to make this field Required.

Enter a label for the field (e.g. "Name").

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.

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.

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

Customize the look of your section by changing the style and layout.

In your theme editor (Customize):

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

  2. Choose whether 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 Lines and borders color selected in the Theme Settings.

  4. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

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

  6. Click Save.

Section settings

Click on the Contact form section to find the following settings:

Configuration Settings

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 bold, italic, or linked text.

Show reCAPTCHA terms

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

Section style settings

Click on the Contact form section to find the following section style settings:

Configuration Settings

Enable animation

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

Learn more about Section animations in Stiletto.

Top divider

Display a Solid line above the section to separate it from the above section.

Padding

Add spacing around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Content width

Set the Content width of the section to Full width or use the slider to use a custom width between 400 - 1000 pixels.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.