Contact form settings

Contact form section guide

The Contact form section is a versatile communication tool that enables direct interaction between your customers and your business.

It includes essential input fields for customers:

Full Name
Email
Phone Number
Message

You can further customize this section by adding:

A main heading
An image
A color scheme that matches your design and enhances readability

In the demo store, we’ve created a contact page using a custom page template and the main contact form section. Additional sections have been added to enhance the layout and create a more visually appealing and informative contact page, offering both functionality and strong design.

To know how to apply templates, read this article "Applying templates"

Demo Contact Page

How to access the Contact form section

From any page, click on “Add Section” and choose “Contact form” from the list.

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

Once the “Contact form” section is added, you can customize its appearance and functionality using the available settings.

How to configure the Contact form section

Basic Components

The “Contact form” section consists of general settings.

To start customizing your contact form, click on the “Contact form” section to access its settings.

Select a setting described in the following table:

Setting	Description
Heading	To add a heading to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading, such as making its font bold or light, italic, or adding a hyperlink. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	This setting offers three options to control the size of the heading: Small Medium Large
Section color scheme	A color scheme consists of a predefined set of colors you can apply to this section for consistent styling. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Learn more about color schemes.
Switch section background	Within each color scheme, you can define a secondary background in addition to the main background. When you enable Switch section background, the main background of the section changes to the secondary background.
Form color scheme	Choose the color scheme for the form, including background, text, and button colors, to match the section or site design.
Switch form background	Within each color scheme, you can define a secondary background in addition to the main background. When you enable Switch form background, the main background of the form changes to the secondary background.
Submit button style	Choose the button’s appearance: Primary: Uses the primary button color defined in color scheme. Secondary: Uses the secondary button color defined in each color scheme. Outline: A button with a border and no fill. Link: A minimal button style aligned with the text.
Image	You can upload a map image with a marker for your physical address.
Image link	You can add a link to a map for this image.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding (mobile)' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding (mobile)' setting works similarly to the 'Top padding (Mobile)' setting but controls the space at the bottom of the section for mobile devices.