Flex features a Contact Page template that combines a contact form with an optional banner, additional sections, and customizable features and settings.
Assign the template to a static page through the Pages admin, then customize the template with the theme editor.
Connect Template to a Page
In your Online Store, open the Pages admin. Create a new page (Add page) or open a current page.
Add a Title if absent, then use the Theme template dropdown to connect the contact template.
Save, then return to the Themes area of your Online Store.
Adding to the Content field is optional and will appear before/above the contact form
Open Template in Theme Editor
In the theme editor (Customize), use the page selector to open Pages, then contact.
Contact Banner (Optional)
The Contact page template's Banner section is an optional enhancement.
Open Banner in the left sidebar to customize it. To disable the banner, click the eye icon beside the section.
Image
Click Select Image to connect an image. Enable Dark banner image to add an overlay between the image and page title.
Subheading
Include an optional Subheading using the provided field. This will appear below the page title.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Banner height
Select Small, Medium, or Large to control the Banner height.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Contact Form Blocks
The Contact form itself is customized using content blocks.
To add more text fields or another block, select (+) Add block, then Checkbox, Drop-down, Paragraph, Radio buttons, Text area, or Text field.
Dropdown, Checkbox, and Radio buttons
Dropdown and Radio buttons only allow one selection, while Checkbox allows single or multiple selections.
For each of these options, customize the Label using the provided field.
If you're using a dropdown, customize the Placeholder text with the provided field.
Enable the Field is required setting to make the field type mandatory.
Add your options by adding them to the Option 1-6 fields. To use fewer than 6, leave the remaining fields blank.
Paragraph
Add Text using the provided rich text field.
Text field
The Text field block offers three options: Email, Text area, and Text field.
The Email option allows and requires customers to include their email address with the form submission.
Select Email from Field type, then add your Label and Placeholder using the provided text fields.
Text area
The Text area option provides customers with a larger text field for more detailed messages.
Select Text area from Field type, then add your Label and Placeholder using the provided text fields.
Select Field is required to make this text area mandatory for submission.
Text field
The Text field option provides customers with a text field for more brief information, such as a name, phone number, etc.
Select Text field from Field type, then add your Label and Placeholder using the provided text fields.
Select Field is required to make this text field mandatory for submission.
Contact Form Settings
Click Contact in the left sidebar to open general settings for the form.
Image
You can choose to upload an Image for your contact form section. Use a 1000 x 1000px image for the best results. The image will display beside the form.
Text
Include a Heading and Text using the provided fields.
Display social media icons
Enable Display show media icons to include icons for common social media platforms connected to the URLs added in the Social media portion of the Theme settings.
Text alignment
Use the Text alignment setting to adjust the alignment for your Heading, Text, and Social icons to the Left, Center, or Right.
Colors
Use the Background and Text color pickers to control the colors.
Form position
Use the Form position setting to position the form on the Right or Left side of the page.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
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 feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.