Appearance

Contact Form Section ​

What This Section Does ​

The Contact Form Section creates a complete contact page experience with a functional contact form alongside supporting content like business information, images, or additional text. You can arrange these elements in flexible layouts with customizable spacing and alignment.

Perfect for: Contact pages, customer service pages, support request pages, lead generation forms, business inquiry pages

How to Add It ​

Step 1: Add the Section

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Click Add section in the main content area
  4. Choose Contact Form from the list

Step 2: Configure Your Layout

  1. The section comes pre-configured with a contact form and sample content
  2. Customize the form fields using the Contact Form Block settings
  3. Add or modify the supporting content in the second column
  4. Adjust the column widths and spacing to match your design

Key Settings to Configure ​

Section Header ​

Heading: Main title for your contact section

  • When to use: Clear, welcoming titles like "Get in Touch" or "Contact Us"
  • Pro tip: Keep it concise and action-oriented

Subheading: Additional context or instructions

  • Best practice: Use this to set expectations ("We'll respond within 24 hours")

Layout Configuration ​

Column Widths: Control the balance between form and content

  • 1:1 (50/50): Equal emphasis on form and content
  • 1:2 (33/67): Smaller form, larger content area
  • 2:1 (67/33): Larger form, smaller content area

Reverse Layout: Swap the position of form and content

  • When to use: When content should appear first (like business hours)

Vertical Alignment: How content aligns when columns have different heights

  • Top: Natural flow, good for most cases
  • Center: Balanced look when content varies significantly
  • Bottom: Aligned at bottom, less common

Form Appearance ​

Form Max Width: Controls form width when no content block is present

  • Small to Medium: Best for simple contact forms
  • Large to Extra Large: Good for detailed inquiry forms
  • Full Width: Maximum space utilization

Blocks Gap: Spacing between form and content columns

  • Small gaps: Tight, cohesive layouts
  • Large gaps: More breathing room, better for complex content

Pro Tips for Success ​

Layout Best Practices

  • Balance your content: If your form is long, keep supporting content concise
  • Use reverse layout strategically: Put important business info (hours, address) first when needed
  • Test mobile experience: Forms automatically stack vertically on mobile devices
  • Consider form width: Narrower forms feel less intimidating and have higher completion rates

Common Mistakes

  • Overwhelming layouts: Don't pack too much content alongside complex forms
  • Poor column ratios: Match column widths to content importance
  • Inconsistent spacing: Use consistent gap settings throughout your site
  • Forgetting mobile: Always preview how the stacked mobile layout looks

Form Block Integration ​

This section works seamlessly with the Contact Form Block, which provides:

  • Multiple field types (text, email, phone, URL, number)
  • Double field layouts for compact forms (First Name/Last Name)
  • Textarea fields for longer messages
  • Custom validation and error handling
  • Flexible submit buttons with various styles

Refer to the Contact Form Block documentation for detailed field configuration options.

Content Block Options ​

The supporting content area accepts various block types:

  • Heading blocks for section titles
  • Text blocks for descriptions and contact information
  • Image blocks for photos, maps, or graphics
  • Custom HTML for embedded maps or special formatting