Supported Versions
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 Banner Settings
The contact page banner image is completely optional in the contact page template! If you choose to enable the contact banner, the settings include options for the layout and advanced CSS as well.
Show banner/Image
To enable the banner image, you'll need to check off the 'show banner' setting. The contact page's title will then display on top of the banner image. A 1800 x 800px image size is recommended.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Subheading
If you'd like to include additional text on top of the banner image, below the page title, you can enter content in the 'subheading' field.
Width
The 'width' setting can be set to 'standard' or 'wide.' If you'd like your banner image to spread full-width, you can select 'wide.' If you'd like your banner image to be contained/not full-width, you can select 'standard.'
Banner height
You can select small, medium, or large for the height for the page's banner image.
Top/Bottom spacing
You can adjust the space above and below your banner image with the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
-
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.
Image
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).
Heading/Text
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.
Text alignment
Here you can choose the alignment of your heading, text and social icons. Choose from left, center or right.
Form position
With the 'form position' setting, you can choose to display your form on the right or the left side of the section.
Button style
For the contact form's 'submit' button, choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Background/Text Colors
You can choose the colors for the contact form background and text.
Width
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.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Animation
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:
Use placeholders
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.
Button style
With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).
Examples
Example 1 - Luxe Demo Shop
Example 2 - Bloom Demo Shop
