> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Contact Form
> Contact form section with Google Maps integration and customizable information blocks
## 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
Add the Contact Form section to your **Contact** page template through the Theme Customizer
Set your heading and introductory content to guide customers through form submission
Add your Google Maps API key and location coordinates to display an embedded map
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 message
Introductory 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:** Empty
Your 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](https://console.cloud.google.com/)
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:** 10
Controls 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)
**Block Type:** Info\
**Limit:** Unlimited (9999 max)
Create individual information cards displaying contact details, business hours, or other relevant information alongside the form.
### Block Settings
**Title** (Text field)\
Label for this information block (e.g., "Business Hours", "Phone", "Email", "Address")
**Content** (Rich text editor)\
Detailed information for this block. Supports formatting, links, and line breaks.
### Common Block Examples
**Business Hours**
```
Title: "Store Hours"
Content:
Monday - Friday: 9am - 6pm
Saturday: 10am - 4pm
Sunday: Closed
```
**Phone Contact**
```
Title: "Call Us"
Content:
Main: (555) 123-4567
Support: (555) 123-4568
```
**Email Contact**
```
Title: "Email"
Content:
General: info@store.com
Support: help@store.com
Press: media@store.com
```
**Physical Address**
```
Title: "Visit Us"
Content:
123 Main Street
Suite 400
San Francisco, CA 94102
```
**Social Media**
```
Title: "Follow Us"
Content:
Instagram: @yourstore
Twitter: @yourstore
Facebook: /yourstore
```
## Best practices
Include expected response time in your introductory content. Customers appreciate knowing when to expect a reply (24 hours, 2 business days, etc.).
Use info blocks to offer phone, email, and social media alternatives. Some customers prefer different communication channels.
Test zoom levels 10-13 to find the sweet spot showing your location with enough neighborhood context for visitors to orient themselves.
Always restrict your Google Maps API key to your store's domain in Google Cloud Console to prevent unauthorized usage and billing surprises.
Create an info block with full weekly hours including holidays or seasonal variations. Reduces "Are you open?" inquiries.
Create separate info blocks for different contact types (hours/phone/email) rather than one large block. Improves scannability.
For high-volume stores, mention alternative support channels (live chat, FAQ, knowledge base) to reduce form submission backlog.
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
## Related Sections
* **[About](/themes/mojave/about)** - Use on About page for company background before contact section
* **[Footer](/themes/mojave/footer/footer)** - Include basic contact info in footer for site-wide access
* **[Newsletter](/themes/mojave/newsletter)** - Alternative email capture method for marketing (vs. support inquiries)
* **[Page](/themes/mojave/page)** - Combine with rich text content for comprehensive contact pages
* **[Accordions](/themes/mojave/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](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