Contact Form

The Forms: Contact form section allows merchants to display a customizable contact form on any page.

It’s designed for collecting customer messages, feedback, or inquiries and can include headings, layout adjustments, images, background styling, and advanced color and hover effects.

Location: Sections -> Templates -> Forms -> Contact Form

---

Forms: Contact form — Options Overview

Option	Description
Heading	Defines the main title of the section displayed above the contact form. Useful for introducing the purpose of the form (e.g., “Contact Us”, “Get in Touch”).
Subheading	Adds a smaller descriptive text line above or below the heading. Often used for short introductions or additional context.
Heading	Input field for the main section heading text.
Description	Optional field for adding a paragraph under the heading. Can include brief instructions, contact information, or a welcome message.
Heading alignment	Aligns heading and description horizontally. Options: Left, Center.
Layout	Defines the overall layout and spacing of the section.
Top spacing	Controls the vertical space above the section. Options: None, Small, Medium, Normal. Used to adjust spacing between sections.
Width	Determines how wide the contact form appears within the page container. Options: • Default – matches page content width. • Boxed – adds inner padding and visual framing. • Wide – extends layout for large screens (1440px and more).
Image	Adds an optional image next to or above the contact form for visual enhancement.
Image display	Controls visibility of the image. Options: Hide, Show.
Image hover effect	Applies an animation when the image is hovered. Options: • Basic theme settings – inherits the default effect set in global theme settings. • Disable – no hover animation. • Zoom in #1 – image scales up slightly. • Zoom in and rotate – zooms and rotates gently. • Zoom in #2 – stronger zoom-in effect. • Zoom out #1 – image zooms out slightly. • Zoom out #2 – stronger zoom-out effect. • Slide – slides image in a direction. • Shine – adds a moving light reflection effect.
Image ratio	Controls the shape of the image container. Options: • Auto – keeps original image proportions. • Portrait (3:4) – taller image format. • Landscape (4:3) – wider format. • Square (1:1) – equal height and width. • Round (1:1) – circular image crop. • Social story (9:16) – vertical mobile-style image. • Widescreen (16:9) – cinematic wide image format.
Align text relative to image	Defines vertical alignment of form content relative to the image. Options: Top, Center.
Swap content	Reverses the layout order between the image and form — e.g., places image on the opposite side. Useful for alternating design flow across sections.
Content width	Sets how much horizontal space the text and form occupy within the section. Adjustable from 25% to 75%, controlling balance between image and text areas.
Dividing line	Adds a line separator for visual structure between the form and other sections.
Show	Toggles the dividing line’s visibility. When enabled, a thin horizontal line appears below the section.
Background	Defines the type of background used for the section.
Background type	Options: • Hide – transparent background. • Color – solid background color. • Gradient – smooth color transition between two or more tones. • Image – background image for the section.
Colors	Provides detailed color customization for text, input fields, buttons, and decorative lines.
Base	Defines the base color used for general text and background areas.
Accent	Sets an accent color for highlighting interactive elements such as links or icons.
Lines	Defines the color of section dividers, borders, or decorative lines.
Input	Group of settings for contact form field styling.
Background	Background color of input fields.
Border	Border color of input fields.
Text	Text color inside the form fields.
Background hover	Background color of input fields when hovered.
Border hover	Border color of input fields when hovered.
Outline hover	Outline or shadow color appearing around input fields on hover.
Text hover	Text color change when hovering over input text or placeholder.
Button	Group of options for submit button styling.
Show background	Toggles whether the button uses a solid background or transparent style.
Background	Main color of the button background.
Background gradient	Adds a gradient effect to the button background.
Border	Button border color.
Text	Text color of the button label.
Show background on hover	Enables a hover background change effect.
Background hover	Background color of the button when hovered.
Background gradient hover	Hover gradient transition applied to the button.
Border hover	Changes button border color when hovered.
Text hover	Defines button text color on hover.
Enable shadow	Enables drop shadow for the button, giving it a raised, clickable appearance.
Shadow	Color and intensity of the button’s shadow.
Shadow hover	Defines the shadow color and spread when the button is hovered, adding a dynamic depth effect.