Contact Page Form

What this section does

The Contact form section powers the main inquiry area on the Contact page. It combines:

1. A heading and intro line.
2. A support details panel (email, phone, hours, or any rich text).
3. A customer form with name, email, phone, store selector, and message fields.

Where it appears

1. Template: Contact page (page.contact).
2. Section type: contact-form.
3. Section order on page.contact: after the page hero and before the store carousel.

How to set it up

1. Go to Online Store -> Themes.
2. Click Customize.
3. Open the Contact template/page.
4. Select Contact form in the left sidebar.
5. Configure section settings and save.

Key section settings explained

1. Heading: main section title.
2. Text: short intro under the heading.
3. Support heading: title above the support details panel.
4. Support text: rich text for email, phone, business hours, or response expectations.
5. Store dropdown label: label above the store selector field.
6. Store dropdown placeholder: initial unselected option text.
7. Store options (one per line): dropdown options shown to customers.
8. Button label: submit button text.

Form behavior

1. Required fields: Name, Email, Message.
2. Optional fields: Phone, Store selection.
3. Store options parsing: each non-empty line in Store options becomes one dropdown option.
4. Blank lines are ignored in store options.
5. On successful submit, customers see: Thanks — we’ll get back to you soon.
6. Shopify field mapping:
   • contact[name]
   • contact[email]
   • contact[phone]
   • contact[store_location]
   • contact[body]

Common tasks

Add or remove stores in the dropdown

1. Open Store options (one per line).
2. Add, edit, or remove lines.
3. Save and test the dropdown on the storefront.

Update support details

1. Edit Support heading and Support text.
2. Keep contact methods and hours current.
3. Save and verify formatting.

Change the submit call-to-action

1. Update Button label.
2. Save and submit a test form once.

Tips

1. Keep support text concise and scannable.
2. Use one store per line with consistent naming.
3. Keep placeholder text action-oriented (example: Choose a store).
4. Test on mobile to confirm two-column fields collapse cleanly.

FAQs

Why are no stores visible in the dropdown?

Store options is empty or only contains blank lines.

Why is the form not sending with partial details?

Name, Email, and Message are required.

Can merchants remove the store selector from settings only?

No. This section always renders the selector field; removing it requires code changes.

Related guides

• Store Locations Documentation
• About Contact Store Carousel Documentation
• Theme Documentation
• Contact page

Publish checklist

1. Confirm heading and intro copy.
2. Confirm support panel details (email, phone, hours).
3. Confirm store dropdown options are current.
4. Submit a test message.
5. Verify desktop and mobile layout.

Need help?

If you still need help, contact support via the Contact page.