The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Page.Contact Template
In the Flex theme, there is a page.contact template that includes the ability to add contact form so your customers can get in touch with you to ask any questions!
The contact form includes more advanced field options: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph. The submissions are sent to your store’s public contact email address just like the forms on contact pages.
The page.contact template also includes the ability to add a banner image at the top, add in additional sections (Map, Image with text overlay, and Rich text), and configure additional layout settings and even add in your own custom CSS.
When adding a Page in your Shopify Admin (Online Store > Pages), the page.contact template is named
page.contact and can be selected under Template > Template Suffix:
Once you've added your page content, you can head into the Theme Editor (Customize) > Select your Page.contact from the drop-down page selector. Your theme editor on the left will then update with the page settings. Here you can configure the contact form, contact banner and the contact sections!
Contact Page Settings
The contact page template includes settings for the banner, form, and sections.
Contact Form Settings
Within the contact form settings, you can add a content section, configure the contact form by adding content blocks, choose layout options and add in custom CSS.
You can choose to upload an image for your contact form section! 1000 x 1000px is the recommended image size. The image will display on the left or the right side of the section (depending on your form position setting).
You can enter a heading and text for your contact form section! This is a great way to add additional info that you'd like your customers to know before getting in touch with you. The text field is a rich text editor, so you can insert links, bold or italicize your text. The heading and text will display on the left or the right side of the section (depending on your form position setting).
Display 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.
The 'icon style' for the social media icons can be either 'outline' or 'solid' – you can choose the icon style under Theme Settings > Typography > Icon style, which will apply to all icons.
Here you can choose the alignment of your heading, text and social icons. Choose from left, center or right.
With the 'form position' setting, you can choose to display your form on the right or the left side of the section.
For the contact form's 'submit' button, choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
You can choose the colors for the contact form background and text.
The options under the 'width' setting include: 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
The 'animation' setting will determine how the contact form 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
Configuring the Contact Form
You can add fields to your contact form by clicking 'Add Content' under the Contact Form settings. The available field options for the contact form are: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.
Contact Sections Settings
Within the contact sections settings, you can add content blocks to the page if you'd like there to be other sections than just the contact form! The available content blocks that you can add to the contact page are: Map, Image with text overlay, and Rich text.
Theme Wide Form Settings
Additionally, there are some settings for the contact form that will apply to all forms theme-wide. The ability to show placeholder text for the fields within all forms and select the button style for the submit button.
These settings can be found by going into Customize (your Theme Editor) > Theme Settings > Elements > Forms:
If you want the labels for the form fields to display within the field, you can enable the 'use placeholders' setting. This will move the text from above the field, to inside it.
With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).
Example 1 - Luxe Demo Shop
Example 2 - Bloom Demo Shop