Contact form
A guide to add a Contact form to your online store
Last updated
A guide to add a Contact form to your online store
Last updated
A Contact form is helpful in generating leads, boosting sales and conversions by understanding your customers' needs.
Steps
In the theme editor (Customize), click Add section.
Locate Contact form.
Make necessary changes.
Save.
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
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.
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).
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
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).
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
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.
Moreover, the block also allows you to change Content alignment (Left/ Center/ Right) on mobile.
