Contact form

A guide to add a Contact form to your online store

A Contact form is helpful in generating leads, boosting sales and conversions by understanding your customers' needs.

How to add a Contact form

Steps

1. In the theme editor (Customize), click Add section.

2. Locate Contact form.

3. Make necessary changes.

4. Save.

How to edit a Contact form

Section settings

Adjust the Color scheme and Container color scheme for this section.

Use the provided text fields to add a suitable Heading.

• Leave it blank if you do not want to display it

You can also change the Heading size to:

• Heading xs

• Heading sm

• Heading md

• Heading lg

• Heading xl

• Heading 2xl

• Display md

• Display lg

• Display xl

Block settings

1) Custom field

You can add multiple fields with different types to the contact form section by adding Custom field blocks. They are used to collect customization information via your contact form.

As you can see in the screenshots below, you can select a preferred Field type such as Text, Textarea, Phone, Select, Checkbox, or Radio. (Note: The phone field type can only be added once)

Give the custom field the Label and Placeholder to distinguish it from other fields. Leave them blank if you do not want to display them.

You can choose to set up this section as required by enabling the Required checkbox. Moreover, check the Full width checkbox to display the custom field in full width.

a) Select

If your field type is Select, you can add multiple options for it in the Options field.

Each option is separated by a comma (e.g: Option 1, Option 2, Option 3).

b) Checkbox

If your field type is Checkbox, you will have option to give the Checked value and Uncheck value fields suitable values.

For example:

• Checked value: Yes

• Unchecked value: No

c) Radio

If your field type is Radio, you can add multiple options for it in the Options field.

Each option is separated by a comma (e.g: Option 1, Option 2, Option 3).

2) Image card

a) General settings

Adjust the Color scheme for the Image card block.

Click Select image to assign the image to the banner on the desktop and use the slider to change the Image overlay opacity.

Add some text for the banner’s Heading, Subheading, and Description. Leave them blank if you do not want to display them.

You can also change the Heading size (Heading 1/ Heading 2/ Heading 3) to make your image card block look more balanced.

Add a call-to-action button that directs customers to the target page specified in the Card link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

• Content position: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right

• Content alignment: Left/ Center/ Right

• Content spacing: Small/ Medium/ Large

b) Mobile Layout

You can also adjust the Color scheme for the Image card block on the mobile device.

Especially, if you want to display a different card image on the mobile device, you can insert another image to the Image field.

You are able to display the content below or above the image by enabling/disabling the Show content below image checkbox.

Enable

Disable

Moreover, the block also allows you to change Content alignment (Left/ Center/ Right) on mobile.