Section: Contact Form

Everything you'll need to know on how to setup your Contact Form section.

The Contact Form section displays a customer enquiry form with three layout choices, an editorial info panel (background image, availability chip, contact details, socials, embedded map), configurable trust badges, a subject dropdown with up to six options, a character counter, an optional GDPR consent checkbox, and full layout/spacing controls. Submissions use Shopify's native customer contact form and arrive at the email configured in Settings → General.

This section is most commonly placed on the Contact page template, but you can add it to any template. Steps below.

1) Open the page where you want the form (usually the Contact template), then click Add section in the left sidebar.

2) Search for Contact Form, then click it.

3) Done — configure the fields below.

Color scheme for the entire section. Pick from the schemes defined in Theme Settings → Colors.

Three layouts: Split (info + form) shows the info panel on one side and the form on the other (best when contact details are key). Stacked shows the info panel above the form, full-width (good for mobile-first or when both pieces should be visible without scrolling sideways). Centered shows only the form in a centered card (best when the form is the focus). Default: Split.

How strongly the info panel stands out against the form. Brand background (button colour) uses the scheme's button colour for maximum contrast. Foreground colour uses the scheme's text colour (high contrast, neutral). Neutral uses the scheme's background colour (subtle separation). Hidden when Layout style is Centered. Default: Brand background.

Text alignment of the heading and subtext. Only visible when Layout style is Centered. Default: Left.

Subtle background pattern behind the section. Tick to show, untick for a clean solid background. Default: on.

The info panel only appears when Layout style is Split or Stacked. Use it to display contact details, availability and socials.

Optional photo that fills the info panel behind your text. Best for editorial layouts. Recommended size: 1200×1600 px (portrait) for Split, 2000×800 px (landscape) for Stacked. Leave empty to use the accent colour as a solid background.

Darkens the background image so text stays readable. Range 0–90%, step 5%. Default: 55%. Only used when a background image is set.

Pill at the top of the info panel with a pulsing dot — communicates response time at a glance. Tick to show. Default: on.

Short copy inside the availability chip. Default: We reply within 24 hours. Keep it concrete — vague claims (Fast reply) under-perform.

Small uppercase label above the info heading. Default: Let's talk.

Main heading inside the info panel. Default: Get in touch.

Short paragraph below the heading. Default: We'd love to hear from you. Send us a message and we'll respond as soon as possible.

Your contact email shown in the info panel as a clickable mailto: link with an envelope icon. Leave empty to hide.

Your contact phone shown as a clickable tel: link with a phone icon. Leave empty to hide.

Physical address (street, city, country) shown with a location pin icon. Leave empty to hide.

Business hours (e.g. Mon–Fri, 9am–6pm) shown with a clock icon. Leave empty to hide.

Renders the social icons configured in Theme Settings → Social Media at the bottom of the info panel. Tick to show. Default: on.

Paste an iframe embed code from Google Maps, Mapbox or Apple Maps to show a map under the contact details. To get a Google Maps embed: open maps.google.com, search your address, click Share → Embed a map, copy the HTML and paste it here. Leave empty to hide the map.

Three reassurance lines shown above the form. Tick to show. Default: on.

First badge text. Default: Reply within 24h.

Second badge text. Default: Secure & private.

Third badge text. Default: Real humans, no bots.

Tick to display the visitor's name input. Default: on.

Tick to make the name field mandatory. Visitors get an inline validation error if they submit without it. Default: off.

Tick to display an optional phone input. Default: off. Useful when you want to call back rather than email.

Tick to show a subject select so visitors can categorise their enquiry. Helps route messages internally. Default: on.

Up to six dropdown values. Defaults: General inquiry, Order support, Wholesale, Press. Options 5 and 6 are empty by default — fill them in to add more rows, leave them empty to keep the list short.

Initial visible rows of the message textarea (4–12). Default: 6. Visitors can drag to resize if their browser supports it.

Live counter under the message field showing characters used / max. Helps visitors stay within the limit. Default: on.

Hard cap on message length in characters (200–4000). Default: 1000. Pair with the character counter so visitors see the limit in real time.

GDPR / privacy consent checkbox displayed above the submit button. The form cannot be submitted unless the visitor ticks it. Default: off. Turn on for EU traffic.

Label shown next to the consent checkbox. Default: I agree to the privacy policy and the processing of my data.

Leave blank to use translated default. Customize the submit button text (e.g. Send message, Get in touch). Falls back to the theme's translation when empty.

Maximum width of the form column (480–900 px, step 20). Default: 720 px. Narrower forms feel tighter and faster to fill; wider forms breathe more.

Maximum width of the whole section card (800–1280 px, step 20). Default: 1080 px. Sets the outer container — applies to all three layouts.

Tick to make the card span the full viewport, ignoring the max-width above. Useful for edge-to-edge editorial layouts. Default: off.

Corner radius of the centered card (0–40 px, step 2). Default: 18 px. Only visible when Layout style is Centered.

Drop shadow under the centered card: None, Soft, Medium, Strong. Default: Medium. Only visible when Layout style is Centered.

Hairline border around the centered card. Tick to show. Default: on. Only visible when Layout style is Centered.

Space above the section in pixels (0–120, step 4). Default: 80 px.

Space below the section in pixels (0–120, step 4). Default: 80 px.

Submissions are sent to the email address configured in Settings → General → Sender email (or, if not set, to the store owner email). The form uses Shopify's built-in customer contact form, so no external setup is needed. Replies go from your support inbox.

Split is the default — desktop visitors see info on one side, form on the other. Best when you want to display contact details prominently. Stacked puts the info panel above the form full-width — better when both pieces should be visible without horizontal scanning, especially on tablet. Centered hides the info panel and centers the form in a card — best when the contact form is the only thing on the page or when the info panel adds noise.

Shopify's contact form ships with built-in honeypot anti-spam. For stronger protection, install a reCAPTCHA app from the Shopify App Store, or enable storefront reCAPTCHA in Settings → Customer accounts. The consent checkbox setting also reduces bot submissions.

Shopify's native contact form doesn't support file uploads. For attachments, install a form-builder app — these install as app blocks you can add to the page in the editor.

Fill the Subject options 1–6 fields under Form fields. Leave any option empty to remove it from the list. The chosen subject is included in the submission email so you can route messages by category.

By design — on screens 899 px and narrower, the Split layout stacks vertically so each piece is fully readable. If you want a side-by-side layout that holds longer, drop the Card max width setting. If you prefer the stacked behaviour at all sizes, switch to Stacked layout directly.