Flex Guide: Contact Form Section

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.

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!

Email

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!

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

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.

Flex Homepage

Online Store 2.0

Supported Versions

In This Article

Using the Contact Form Section