Contact form
Overview
A contact section combining a form panel with an optional map or image panel and repeatable contact info blocks. Section settings cover the media panel, header (tagline, heading, description), contact info card typography, form layout and submit button, container, color scheme, and spacing. Contact Info blocks are added to display location, phone, email, or any other structured contact details alongside the form.
Section Configuration
| Setting |
Description |
| Show Media |
Toggles the map/image panel beside the form. Enabled by default. |
| Image |
Static image displayed in the media panel. Visible when Show Media is enabled. |
| Map Embed |
Paste a Google Maps or other map <iframe> embed code to display an interactive map. Visible when Show Media is enabled. |
| Setting |
Description |
| Tagline |
Short text above the heading. Default: "Add a tagline". |
| Tagline Size |
Large, Medium, or Small. Default: Medium. |
| Tagline Weight |
Thin (100) to Black (900). Default: Normal (400). |
| Tagline Case |
None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. |
| Tagline Font Family |
Default or Heading font. |
| Tagline Color Style |
Default, Heading, or Body color preset. |
Heading
| Setting |
Description |
| Heading |
Main section heading. Supports inline rich text. Default: "Let's get in touch". |
| Heading Size |
H1–H6 or Large, Medium, Small. Default: H3. |
| Heading Weight |
Thin (100) to Black (900). Default: Bold (700). |
| Heading Case |
None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
| Heading Tag |
Semantic HTML heading level (H1–H6). Default: H2. |
| Heading Font Family |
Default or Body font. |
| Heading Color Style |
Default or Body color preset. |
| Heading Link Style |
Default or Link style when heading contains a hyperlink. |
| Setting |
Description |
| Header Margin – Desktop |
Bottom spacing between header and content below on desktop. Range: 0–100 px, default 35 px. |
| Header Margin – Mobile |
Bottom spacing between header and content below on mobile. Range: 0–100 px, default 15 px. |
Card Settings
Typography applied to Contact Info block headings and body text.
Card Heading
| Setting |
Description |
| Card Heading Size |
H5, H6, or Large, Medium, Small. Default: Medium. |
| Card Heading Weight |
Thin (100) to Black (900). Default: Bold (700). |
| Card Heading Case |
None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
| Card Heading Tag |
Semantic HTML heading level (H1–H6). Default: H3. |
| Card Heading Font Family |
Default or Body font. Default: Body font. |
| Card Heading Color Style |
Default or Body color preset. |
Card Text
| Setting |
Description |
| Card Text Size |
Large, Medium, or Small. Default: Medium. |
| Card Text Weight |
Thin (100) to Black (900). Default: Normal (400). |
| Card Text Case |
None, Uppercase, Capitalize, or Lowercase. Default: None. |
| Card Text Font Family |
Default or Heading font. |
| Card Text Color Style |
Default or Heading color preset. |
| Desktop Text Alignment |
Card content alignment on desktop. Default: Left. |
| Mobile Text Alignment |
Card content alignment on mobile. Default: Left. |
| Setting |
Description |
| Form Position |
Position of the form panel relative to the media/info panel on desktop: First or Second. Default: First. |
| Consent Text |
Small text shown beside the submit checkbox. Default: "I consent to being contacted regarding my inquiry." |
| Consent Text Size |
Large, Medium, or Small. Default: Small. |
| Consent Text Weight |
Thin (100) to Black (900). Default: Normal (400). |
| Consent Text Case |
None, Uppercase, Capitalize, or Lowercase. Default: None. |
| Consent Text Font Family |
Default or Heading font. |
| Consent Text Color Style |
Default or Heading color preset. |
| Submit Button Label |
Button text. Default: "Send message". |
| Submit Button Type |
Primary, Secondary, Styled, or Link (underlined). Default: Styled. |
| Submit Button Case |
None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
Layout Settings
| Setting |
Description |
| Container Layout |
Page Width, Contained Content, or Container Fluid. Default: Contained Content. |
| Border Style |
None, Top, Bottom, or Top & Bottom. Visible when not Page Width. Default: None. |
| Container Size |
Max container width as a percentage of page width. Range: 50–100%, default 100%. |
| Desktop Text Alignment |
Header text alignment on desktop. Default: Left. |
| Mobile Text Alignment |
Header text alignment on mobile. Default: Left. |
| Color Scheme |
Shopify color scheme applied to the section. Default: Scheme 1. |