Contact
A professional contact form with optional Google Maps integration. Capture customer inquiries with customizable fields and styling.
Overview
The Contact section makes it easy for customers to reach you. It includes form validation, spam protection, and optional map integration.
📝
Custom Fields
Name, email, phone, message
🗺️
Map Integration
Google Maps or static image
🛡️
Spam Protection
Honeypot and validation
📧
Email Notifications
Direct to your inbox
When to Use
- Contact page — Primary use case for customer inquiries
- About page — Combined with company information
- Store locator page — With map integration
Quick Setup
Add Contact Form in 3 Steps
- 1Create a new page in Shopify admin and assign the Contact template
- 2In the Theme Editor, customize the Contact section
- 3Optionally add a Map using Google Maps or a static image
Section Settings
Map
| Setting | Type | Default | Description |
|---|---|---|---|
| Google Maps API key | text | - | Your Google Maps Embed API key. Required for interactive map. |
| Map query | text | - | Location search query (e.g., '123 Main St, New York, NY' or business name). |
| Map link | url | - | Link to open when clicking the map. Usually a Google Maps URL. |
| Desktop image | image | - | Static map image for desktop (used when no API key is provided). |
| Mobile image | image | - | Optimized map image for mobile screens. |
💡 Map Options:
• Interactive map — Requires Google Maps API key
• Static image — Upload a screenshot of your location (no API key needed)
• No map — Leave all map fields empty
Form Labels
Customize the form field labels and placeholders:
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | Page title | Section heading. Defaults to the page title if left empty. |
| Name label | text | Name | Label for the name field. |
| Name placeholder | text | John Doe | Placeholder text for the name field. |
| Email label | text | Label for the email field. | |
| Email placeholder | text | you@example.com | Placeholder text for the email field. |
| Phone label | text | Phone | Label for the phone field. |
| Phone placeholder | text | +1 (555) 555-5555 | Placeholder text for the phone field. |
| Message label | text | Message | Label for the message textarea. |
| Message placeholder | text | How can we help? | Placeholder text for the message field. |
| Button | text | Send | Submit button label. |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Desktop top/bottom | range | 0px | Margins on desktop. |
| Mobile top/bottom | range | 0px | Margins on mobile. |
Google Maps Setup
To use an interactive Google Map:
Step 1: Get an API Key
- Go to Google Cloud Console
- Create a new project (or select existing)
- Enable the Maps Embed API
- Create credentials → API Key
- Restrict the key to your domain for security
Step 2: Configure the Section
- Paste your API key in the Google Maps API key field
- Enter your location in Map query (e.g., "123 Main Street, New York, NY")
- Add a Map link pointing to your Google Maps business listing
⚠️ API Key Security: Always restrict your API key to your store's domain(s) in the Google Cloud Console to prevent unauthorized usage.
Form Submission Behavior
How It Works
- Customer fills out the form
- Form submits to Shopify's built-in contact form handler
- Email is sent to your store's customer service email
- Success message displays to the customer
Where Submissions Go
Contact form submissions are sent to the email address configured in Shopify Admin → Settings → Store details → Store contact email.
Viewing Submissions
You can also view submissions in Settings → Notifications → Customer notifications → Contact customer.
Best Practices
Form Design
- Keep it simple — The default fields cover most needs
- Use clear labels — Avoid jargon or abbreviations
- Set helpful placeholders — Show examples of expected input
- Test the form — Submit a test message to verify delivery
Map Usage
- Interactive maps look professional — Worth the API setup
- Static images work too — A simple screenshot with a link is effective
- Include a Map link — Let customers open in Google Maps for directions
Accessibility
- All form fields have proper labels
- Error messages are clear and helpful
- Success messages confirm submission
- Form works with keyboard navigation
Troubleshooting
Form submissions not received
- Check your store's contact email in Shopify Settings
- Verify email isn't going to spam
- Ensure customer email notifications are enabled
Map not displaying
- Verify API key is correct and active
- Check that Maps Embed API is enabled in Google Cloud
- Ensure map query returns a valid location
- Try using static images as a fallback
Form shows errors
- Required fields must be filled out
- Email must be valid format
- Check for special characters that may cause issues
Success message not showing
- Form must submit without errors
- Page should scroll to show the success message
- Check for JavaScript errors in browser console