.png){kind=logo}
Contact form
What is the contact form section?
The Contact form is a useful section that provides a convenient way for customers to get in touch with the merchant directly through the website. Customers simply need to input their details and send a message directly to the merchant.
Many customizable fields such as name, email, message, checkboxes, radio buttons, and others can be set up in the form to gather specific information. This information will be reflected in the merchant's email, helping them in responding to customer queries efficiently.
How to add contact form section
.svg){kind=icon}
- Access the Theme Editor: Navigate to `
Online Store > Themes > Customize`. - Add a Section: Click on `
Add section`and select the desired section from the list of available sections. - Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.
General section settings
Within this section, you'll find common settings like section headers, containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.
Section Settings
- Subheading: Add an optional subheading above the form.
- Subheading Size: Adjust the subheading size (Small, Medium, Large).
- Heading: Customize the main heading of the section.
- Heading Size: Choose the heading size (Small, Medium, Large, Extra-Large).
- Text: Provide additional context or instructions for users filling out the form.
- Contact Information: Add extra details like an email, phone number, or address to be displayed alongside the form.
- Form Position on Desktop: Set the form’s alignment on the desktop layout (Left, Center, Right).
- Text Alignment: Control the alignment of text content for both desktop and mobile views.
- Content Position on Desktop: Define how the content is positioned (Start, Center, End).
- Content Maximum Width: Adjust the maximum width of the form when centered (applies only if the form is center-aligned).
- Show reCAPTCHA Terms: Enable or disable reCAPTCHA to prevent spam submissions.
Color Settings
- Color Scheme: Select a color scheme for the section.
Block Settings
- Name: Add a name field with an option to make it required and adjust width on desktop.
- Email: Include an email input field with an adjustable width.
- Phone: Add an optional phone number field with a required toggle.
- Message: Provide a message text area with an option to make it required.
- Text Field: Create a custom input field, choosing between text, textarea, number, or email input types.
- Dropdown: Offer a dropdown selection with multiple options (each option is entered on a new line).
- Heading: Insert a heading block to visually separate different sections within the form.
- Checkbox: Add a checkbox option for agreements, confirmations, or subscriptions.
Radio Buttons: Include multiple-choice selection using radio buttons.
You can have each block displayed as half width by ticking the Half width on desktop setting. This will automatically be full width on mobile. You can also set the input as required.
This section is usually displayed in the Contact page. For details on setting up the contact page, refer to the Contact page guide.
