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 Contact Form Section
The Flex 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 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 content section to include and text and an image. The actual form is created by adding content blocks! The contact form itself includes more advanced field options: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.
Additionally, you can configure width, spacing and animation settings for the Contact Form. Custom CSS can be included in this section as well for further customization.
In order to set up the Contact Form, click into Customize (your Theme Editor) > Sections > Add Section > Contact Form.
Contact Form Section Settings
The section settings determine the look and layout of this section! These are divided into settings for the content section, general form options, layout and advanced settings.
Content Section
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).
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.
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.
Contact form
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).
Colors: Background/Text
You can choose the colors for the contact form background and text.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Contact Form section loads in.
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 section '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.'
Advanced
In the advanced settings, you can add in your own CSS class and 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.
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
Example 1
Section details:
- Image - added
- Heading - added
- Display social media icons - enabled (solid icon style)
- Text alignment - left
- Form position - right
- Width - standard
- Custom CSS - added black order to the contact form:
-
.contact-form__form {
border: 5px solid black;
}
-
- Content blocks added: paragraph x 2, text field, email, drop-down, text area, radio buttons
Example 2
Section details:
- Heading - added
- Text - added
- Display social media icons - added (solid icon style)
- Text alignment - center
- Form position - left
- Width - wide
- Custom CSS - increased heading size:
-
h2 {
font-size: 100px;
}
-
- Content blocks added: text field, email, checkbox, text area
Mobile Layout
When viewed on a mobile device, the contact form will stack vertically with the content section appearing above the form.
