Skip to main content

​
What It Does

The Contact Form section creates a comprehensive contact page combining a submission form with optional Google Maps location display and customizable information blocks. Customers can send messages while viewing your location and additional contact details like hours, phone, or email.

​
Getting Started

1

Add the Section

Add the Contact Form section to your Contact page template through the Theme Customizer
2

Configure Basic Settings

Set your heading and introductory content to guide customers through form submission
3

Set Up Google Maps (Optional)

Add your Google Maps API key and location coordinates to display an embedded map
4

Add Information Blocks

Create blocks for hours, phone, email, or other contact details to supplement the form

​
Settings

Type: Text field
Default: “Contact us”Main heading displayed above the contact form. Sets expectations for customer inquiries.Examples:
  • “Get In Touch”
  • “We’re Here to Help”
  • “Contact Our Team”
  • “Send Us a Message”
Type: Rich text editor
Default: Response time messageIntroductory paragraph below the heading. Use this to set response time expectations, explain what types of inquiries you handle, or provide pre-form guidance.Common Uses:
  • Response timeframe (“We’ll respond within 24 hours”)
  • Business hours context
  • Alternative contact methods
  • Privacy/data handling notice
  • Department routing instructions
Type: Text field
Default: EmptyYour Google Maps API key required to display the embedded map. Without this, the map won’t render even if coordinates are provided.How to Get an API Key:
  1. Visit Google Cloud Console
  2. Create a new project or select existing
  3. Enable “Maps JavaScript API”
  4. Create credentials (API Key)
  5. Restrict key to your domain for security
  6. Copy and paste the key here
Security Note: Always restrict your API key to your store’s domain to prevent unauthorized usage and unexpected charges.
Type: Text field
Default: “51.2163125745749” (Antwerp example)Latitude coordinate for your business location. Determines the north-south position on the map.Finding Coordinates:
  • Open Google Maps
  • Right-click your location
  • Click “What’s here?”
  • Copy the first number (latitude)
Format: Decimal degrees (e.g., 40.7128 for New York)
Type: Text field
Default: “4.407547635829268” (Antwerp example)Longitude coordinate for your business location. Determines the east-west position on the map.Finding Coordinates:
  • Open Google Maps
  • Right-click your location
  • Click “What’s here?”
  • Copy the second number (longitude)
Format: Decimal degrees (e.g., -74.0060 for New York)
Type: Range slider
Range: 0-21
Default: 10Controls how close the map view is to your location. Lower numbers show wider area context, higher numbers show street-level detail.Zoom Guidelines:
  • 1-5: World/continent view (too wide for contact pages)
  • 6-8: Country/state view (regional context)
  • 9-11: City view (shows surrounding area) ← Most common
  • 12-14: Neighborhood view (local streets visible)
  • 15-17: Street view (building level detail)
  • 18-21: Extreme close-up (rarely useful)
Recommended: 10-13 for most businesses (shows location with sufficient context)

​
Best practices

Set Clear Expectations

Include expected response time in your introductory content. Customers appreciate knowing when to expect a reply (24 hours, 2 business days, etc.).

Provide Multiple Contact Options

Use info blocks to offer phone, email, and social media alternatives. Some customers prefer different communication channels.

Optimize Map Zoom Level

Test zoom levels 10-13 to find the sweet spot showing your location with enough neighborhood context for visitors to orient themselves.

Secure Your API Key

Always restrict your Google Maps API key to your store’s domain in Google Cloud Console to prevent unauthorized usage and billing surprises.

List Complete Hours

Create an info block with full weekly hours including holidays or seasonal variations. Reduces “Are you open?” inquiries.

Segment Contact Information

Create separate info blocks for different contact types (hours/phone/email) rather than one large block. Improves scannability.

Include Alternative Contact

For high-volume stores, mention alternative support channels (live chat, FAQ, knowledge base) to reduce form submission backlog.

Mobile-Friendly Formatting

Keep info block content concise. Long text blocks become difficult to scan on mobile devices where this section is most accessed.

​
Common Use Cases

​
Standard Business Contact Page

  • Title: “Get In Touch”
  • Content: Response time and business hour context
  • Google Maps showing store/office location (zoom 12)
  • Info blocks: Hours, Phone, Email
  • Best for: Retail stores, restaurants, service businesses with physical locations

​
E-commerce Customer Support

  • Title: “Contact Support”
  • Content: “Our team responds within 24 hours”
  • No map (online-only business)
  • Info blocks: Support hours, Email separated by topic (Orders/Returns/General)
  • Best for: Online-only stores, dropshipping, digital products

​
Multi-Location Business

  • Title: “Visit Our Stores”
  • Content: “Select location for specific details”
  • Google Maps showing headquarters or flagship location
  • Info blocks: Location 1 address/phone, Location 2 address/phone, etc.
  • Best for: Chain stores, franchise operations, multi-location retailers

​
Wholesale/B2B Inquiries

  • Title: “Wholesale Inquiries”
  • Content: “Interested in stocking our products? We’ll respond within 2 business days.”
  • No map (privacy for business operations)
  • Info blocks: Sales email, Required information list, Terms
  • Best for: Brands selling to retailers, B2B operations, wholesale businesses

​
Appointment-Based Business

  • Title: “Schedule a Consultation”
  • Content: “Fill out this form or call to book your appointment”
  • Google Maps showing studio/office (zoom 13)
  • Info blocks: Booking phone, Hours, Services offered
  • Best for: Salons, consultants, showrooms, studios requiring appointments

​
Layout Behavior

​
Desktop Layout

The section typically displays in a two-column layout:
  • Left column: Contact form (name, email, message fields)
  • Right column: Google Maps (if configured) + information blocks stacked below
Information blocks appear as individual cards with distinct titles, making it easy to scan for specific contact details.

​
Mobile Layout

On mobile devices, the layout stacks vertically:
  1. Title and introductory content (top)
  2. Contact form fields (full width)
  3. Google Maps (if present, full width)
  4. Information blocks (full width, stacked)
Each element takes full screen width for optimal mobile usability.

​
Map Display Behavior

  • With API key + coordinates: Embedded interactive Google Map displays
  • Missing API key: Map does not render (no error shown to customers)
  • With map: Form and blocks adjust to accommodate map space
  • Without map: Form and blocks expand to use available space
  • About - Use on About page for company background before contact section
  • Footer - Include basic contact info in footer for site-wide access
  • Newsletter - Alternative email capture method for marketing (vs. support inquiries)
  • Page - Combine with rich text content for comprehensive contact pages
  • Accordions - Add FAQ accordion above contact form to reduce form submissions

​
Technical Notes

​
Form Submission Behavior

The contact form submits to Shopify’s built-in contact form handler. Submissions are sent to the store owner’s primary email configured in Shopify admin (Settings > Store details > Store contact email). Form submissions are not stored in Shopify admin - they only arrive via email. Consider using a customer support app if you need submission tracking, auto-responses, or ticket management.

​
Google Maps API Requirements

To display the embedded map:
  1. API Key Required: Even with valid coordinates, map won’t display without a valid API key
  2. API Enabled: “Maps JavaScript API” must be enabled in your Google Cloud project
  3. Billing Enabled: Google requires billing information even though Maps usage is free up to generous limits
  4. Domain Restrictions: Recommended to restrict API key to your store’s domain for security
Cost Consideration: Google Maps provides $200 free monthly credit, which covers approximately 28,000 map loads. Most stores stay well within free tier limits.

​
Information Block Limits

While the section supports up to 9999 information blocks, practical limit is 4-6 blocks:
  • 4 blocks: Ideal (Hours, Phone, Email, Address) - easy to scan
  • 6 blocks: Maximum recommended before overwhelming customers
  • 7+ blocks: Consider using an accordion section instead for collapsible organization

​
Coordinate Precision

Latitude and longitude coordinates support up to 15 decimal places, providing accuracy down to millimeter level. However, 6-7 decimal places (accurate to ~10cm) is more than sufficient for business location mapping. Example precision levels:
  • 2 decimal places: ~1km accuracy
  • 4 decimal places: ~11m accuracy
  • 6 decimal places: ~0.11m accuracy (recommended)

​
Form Field Customization

The contact form fields (Name, Email, Phone Number, Message) are hardcoded in the theme and cannot be customized through the Theme Customizer. To add custom fields or change labels, you’ll need to edit the contact-form.liquid file directly or use a contact form app.

​
Troubleshooting

Map not displaying:
  • Verify API key is correct and copied completely (no extra spaces)
  • Check that “Maps JavaScript API” is enabled in Google Cloud Console
  • Confirm billing is enabled in your Google Cloud account
  • Ensure API key is not restricted to different domains
  • Test coordinates in regular Google Maps to verify they’re valid
Form submissions not received:
  • Check Shopify Admin > Settings > Store details > Store contact email is correct
  • Verify email isn’t going to spam folder
  • Confirm email address can receive external emails (not blocked)
  • Test with a different email address to rule out email provider issues
Information blocks not visible:
  • Ensure blocks have both Title AND Content filled
  • Check that blocks weren’t accidentally hidden/deleted
  • Verify section is published (not draft mode)
Map showing wrong location:
  • Verify latitude and longitude aren’t swapped (lat is always first)
  • Confirm coordinates use decimal format, not degrees/minutes/seconds
  • Check for typos in coordinate numbers (easy to mistype decimal places)
Layout looks broken:
  • If map is very large, adjust zoom level to 10-13 range
  • Ensure info block content isn’t excessively long (break into multiple blocks if needed)
  • Check that custom CSS isn’t conflicting with section styles