Turbo Guide: Contact Form Section

 

Supported Versions

The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.

In This Article

• Contact Form Section Settings
• Adding Fields to the Contact Form
• Examples
• Mobile Layout

Using the Contact Form Section 

The Turbo theme includes a 'Contact Form' section that you can add to your homepage. This section provides an easy way for shoppers to contact you which can go a long way toward building confidence in your brand and making it easy for customers to find and get in touch with you with any questions or concerns.

The form used here is the standard Shopify contact form and submissions are sent to your store’s public contact email address just like the forms on contact pages. 

Within the 'Contact Form' section, you can enable a 'heading', 'subheading', and 'text' along with adding an image, and configuring the 'text position' and 'text alignment.'

The actual contact form is created by adding content blocks! The available field options are: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.

In order to set up the Contact Form, click into Customize (your Theme Editor) > Sections > Add Section > Contact Form.

Contact Form Section Settings

Image 

You can choose to upload an image for your contact form section! 1024 x 1024px is the recommended image size. The image will display above your subheading and text. 

Heading/Subheading/Text 

Within the contact form section, you can choose to add a 'heading', 'subheading' and 'text'. You can add one, add all three, whatever you'd like! This is a great way to add some important info that you want your customers to read before they contact you.

Text position 

Here you can choose the position of your 'subheading,' 'text' and 'image' (if you've added them!) Choose from left, center, or right:

Text alignment 

Here you can choose the alignment of your 'subheading' and 'text' (if you've added them!) Choose from left, center, or right:

Show social media icons

If you'd like your social media icons to display in the contact form section, if you have URLs added under Theme Settings > Social Media, and enable the 'show social media icons' setting, they will display under the text. 

Logo

If you'd like a logo to appear within the contact form, you can upload an image under the 'logo' field. It will then display at the top of your contact form. The recommended image size is 500px by 500px. 

 

Adding Fields to the Contact Form 

The contact form fields get added as content blocks through the Theme Editor (Customize) under Sections > Contact Form > scroll down to Add content. The fields available to add to the contact form are: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.

Checkbox

• The 'checkbox' field option allows your customers to check all options that may apply.
• The 'checkbox' includes a 'Title' field and 'Option' fields where you can add in your options (choose from 1 - 10).
• You can enable this field to be required as well if you wish!

 

Email 

• The 'email' field allows customers to input their email address.
• The 'email' field option must be included and will always be a required field.
• This field option includes a 'Label' field and a 'Placeholder' field

Drop-down 

• The 'drop-down' field option allows you customers to choose an option from a drop-down menu!
• This field includes a 'Title' field, 'Placeholder' text and 'Option' fields where you can add in your options (choose from 1 - 10).
• You can enable this field to be required as well if you wish!

Paragraph 

• The 'paragraph' field option is a great way to display any text you'd like to add to your contact form such as reply times, holiday notices, or any other information you'd like your customers to be aware of!

Radio buttons 

• The 'radio buttons' field allows your customers to choose only one of a predefined set of options.

• The 'radio buttons' field option includes a 'Title' field and 'Option' fields where you can add in your options (choose from 1 - 10).

• You can enable this field to be required as well if you wish!

 

Text area 

• The 'text area' field option can be used for your customers to add a message or provide more information.
• The 'text area' field option includes a 'Title' field and a 'Placeholder' field.
• You can enable this field to be required as well if you wish!

Text field

• The 'text' field allows your customers to input text such as their name.
• The 'text' field includes a 'Label' field and a 'Placeholder' field which will pop up when you click into the text input field.
• You can enable this field to be required as well if you wish!

Examples

• Demo Shop Examples
• Additional Examples 

• Demo Shop Examples

  Here's how we set up the 'Contact form' homepage section in our demo shops for Turbo!

  • Seoul
  • Florence

  • Seoul

    
    Section settings

    Heading - added

    Subheading - added

    Text - added

    Text position - left

    Text alignment - left

  • Florence

    
    Section settings

    Subheading - added

    Text - added

    Text position - center

    Text alignment - center

• Additional Examples

  Example 1

  
  Section details:

  Image - added
  Subheading - added
  Text position - left
  Text alignment - center
  Show social media icons - enabled
  Content blocks: paragraph, text field, email, drop-down, text area

   

  Example 2

  Section details:

  Image - added
  Subheading - added
  Text position - center
  Text alignment - center
  Content blocks: text field, email, radio buttons, text area

Mobile layout

When viewed on a mobile device, the 'contact form' section stacks vertically with the text above the form.