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
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!
- 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
Here's how we set up the 'Contact form' homepage section in our demo shops for Turbo!
-
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 areaExample 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.