Contact Form Section
This guide describes setting up the Contact Form section.
Use this section to create a customizable contact page with content and form blocks that can be arranged either side-by-side or stacked. The section includes rich text content and a contact form with extensive styling options.
For general guidance with modifying sections, refer to [Sections overview], and [Shopify help: Sections and blocks].
Set up a Contact Form section
To set up a Contact Form section:
- Go to Customize theme
- In Theme editor, select the page where you want to add the Contact Form
- Select "Add section" > "Contact"
Note: This section cannot be added to header or footer areas.
From the side menu, select Contact Form to configure these settings:
| Setting name | Description |
|---|---|
| Layout | Choose between "Left / right" (side-by-side) or "Above / below" (stacked) layout. Default is left/right |
| Horizontal spacing size | Select None, Small, Medium, or Large padding. Default is large |
| Section padding | Adjust top and bottom padding independently (0-100px). Default is 100px |
| Color scheme | Select a color scheme to match your store's design |
| Indent section | Add left and right edge indentation when enabled |
Content Block Settings
| Setting name | Description |
|---|---|
| Content | Enter rich text content to display alongside the form |
| Text alignment | Choose desktop alignment (Left, Center, Right). Default is left |
| Mobile text alignment | Choose mobile-specific alignment. Default is left |
| Text size | Select from XXS to 2XL/desktop 7XL. Default is 2XL/desktop 4XL |
| Line height | Adjust text line height (1-3em). Default is 1.5 |
| Width (desktop) | Choose One third, One half, Two thirds, or Full width. Default is full |
| Vertical alignment | Position content Top, Middle, or Bottom. Default is top |
| Inner spacing | Adjust top and bottom padding (0-100px). Default is 20px |
Form Block Settings
| Setting name | Description |
|---|---|
| Label size | Choose text size for form labels (XXS to 2XL/desktop 6XL). Default is base |
| Input size | Select text size for form inputs. Default is base |
| Width (desktop) | Set form width (One third to Full width). Default is full |
| Vertical alignment | Position form Top, Middle, or Bottom. Default is top |
| Form alignment | Align form Left, Center, or Right. Default is left |
| Inner spacing | Adjust top and bottom padding (0-100px). Default is 20px |
Note: The section comes preset with both content and form blocks. The content block can be used twice, while the form block is limited to one instance.