> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/call-to-action/contact-form.md). # Contact Form A contact form with optional custom fields and dropdowns, paired with a column of content blocks for your contact details. Every "where's my order?" that reaches you by email is a sale you get to save. The **Contact Form** section is a two-column layout: Shopify's native contact form on one side, and a free content column on the other for your address, opening hours, phone number, or a photo of the shop. You can add your own **Text field** and **Dropdown** blocks to the form, so "What is this about?" gets answered before you reply.
{% hint style="info" %} **At a glance** | Where to find it | **Add section → Call to action** | | ----------------- | -------------------------------------------------- | | Form blocks | Text field, Dropdown — rendered inside the form | | Content blocks | Everything else — rendered in the column beside it | | Allowed on | Any template, and the footer | | Submissions go to | The customer email in **Settings → Store details** | | {% endhint %} | | *** ### How to add {% stepper %} {% step %} ### Open the right template In the theme editor, open your **Contact** page template — or any other template, the section isn't restricted to one. {% endstep %} {% step %} ### Add the section Click **Add section** and pick **Contact form** from the **Call to action** group. The preset arrives with a **Subheading**, **Heading**, **Text** and a **Contact info** block in the content column. {% endstep %} {% step %} ### Fill the content column Edit the **Contact info** block with your real phone number, email and opening hours. Add an **Image** if you have a storefront or team photo worth showing. {% endstep %} {% step %} ### Add your own questions (optional) Add **Text field** or **Dropdown** blocks for anything you'd otherwise have to ask in a reply — order number, company name, what the enquiry is about. {% endstep %} {% step %} ### Send yourself a test Publish, then submit the form as a customer would and check the message arrives. {% endstep %} {% endstepper %} {% hint style="warning" %} **Submissions go to your store contact email, not to an address set in the theme.** The section uses Shopify's native contact form, so messages land at the customer email address in **Settings → Store details** in your Shopify admin. If a test submission never arrives, that field is the first place to look. {% endhint %} {% hint style="success" icon="lightbulb" %} ### Good to know * **Blocks split into two groups, and that split decides the layout.** **Text field** and **Dropdown** blocks render *inside the form*. Every other block — Heading, Text, Image, Contact info, Button and so on — makes up the content column beside it. Remove all the content blocks and the form centres itself on the page. That is exactly what the **Swap form position** note means by *"Centered if no blocks are added."* * **Name and Email are always required and always shown.** They aren't settings. **Phone number** and **Message** are shown by default and can be switched off; your own **Text field** blocks have a **Required** checkbox each. * **The form has its own colour scheme.** **Form color scheme** (default *Background 2*) is separate from the section **Color scheme** (default *Background 1*), which is what gives the form its card-on-a-page look out of the box. Set them the same to flatten it. * **Field line style draws fields as underlines instead of boxes.** On by default — turn it off for a more conventional, boxed form. * **Dropdown values are one comma-separated line.** *Order question, Wholesale, Press, Something else* — commas separate the options, nothing else does. * **It can go in the footer.** Contact form is allowed in the footer section group as well as any template. {% endhint %} ### Customization ideas
Route the enquiry before you read it Add a **Dropdown** block named *What can we help with?* with values like *Order status, Returns, Wholesale, Press*. The answer arrives inside the message, so you can triage at a glance.
Contact details beside the form The **Contact info** block holds two items, each set to *Text*, *Phone number* or *Email* — phone and email types become tappable links. Add a short description line for opening hours.
Put the shop in the picture An **Image** block in the content column showing your storefront or team does more for trust than another paragraph of copy.
Wholesale enquiry form Add **Text field** blocks for company name, VAT number and expected volume, mark them required, and use this section on a dedicated `/pages/wholesale` template.
Flip the sides **Swap form position** moves the form to the other column — useful when the section above already leads the eye to one side.
Narrow it for a simple page **Content width** *Narrow* with no content blocks gives you a clean, centred form and nothing else.
*** ### Settings reference
Section settings | Setting | What it does | | ------------------ | --------------------------------------------------------------------------- | | Swap form position | Moves the form to the other column. Centred if no content blocks are added. | | Content width | *Narrow*, *Regular* or *Wide*. Default *Regular*. | **Form** | Setting | What it does | | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | Heading | Form heading. Defaults to *Get in touch*. Wrap a word in `{curly brackets}` for the secondary heading style, or `[square brackets]` to highlight it. | | Heading style / Heading tag | Defaults to *Section heading* and `h2`. | | Name placeholder / Email placeholder | Placeholder text for the two required fields. | | Show phone number / Phone number placeholder | Phone field. **On by default.** | | Show message / Message placeholder | Message textarea. **On by default.** | | Enable field line style | Underline-style fields instead of boxes. On by default. | **Checkbox** | Setting | What it does | | ---------------- | ------------------------------------------------------------------------------------------------------------- | | Enable checkbox | Adds a consent checkbox. Off by default. Adding a checkbox does not by itself make your store GDPR compliant. | | Make it required | On by default, once the checkbox is enabled. | | Text | Rich-text label, pre-filled with a link to your privacy policy. | **Section layout** | Setting | What it does | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | | Grid | *Page*, *Alternative*, *Secondary* or *Custom*. | | Width / Column gap | Only with **Grid → Custom**: 1040–2560 px, and a 1–80 px gap. | | Disable grid max-width | Ignores the grid's maximum width. | | Show bottom line | Draws a divider under the section. | | Section framing | *Disable*, *Enable* or *Grid*. Doesn't apply to a section using the primary colour scheme or when full-width is enabled. | **Color / Spacing** | Setting | What it does | | ----------------- | --------------------------------------------------------- | | Color scheme | Section colour scheme. Default *Background 1*. | | Form color scheme | Colour scheme of the form itself. Default *Background 2*. | | Top / Bottom | Vertical spacing multiplier, 0–2, default 1. | | Paddings | Inner padding of the framed card, 0–3. |
Block reference **Form field blocks** — rendered inside the form. | Block | Settings | | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | Text field | **Name** (the field label, default *Custom field*), **Placeholder**, **Use long text** (turns it into a textarea), **Required**. | | Dropdown | **Name**, **Placeholder**, **Values** — one line, options separated by commas. Default *value 1, value 2, value 3*. | **Content blocks** — rendered in the column beside the form. | Block | What it's for | | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Contact info | Two items, each set to *Text*, *Phone number* or *Email*, plus a description line. Defaults show an email, a phone number and *Mon–Fri, 10AM–9PM*. | | Heading / Subheading / Text | Copy above or beside the form. | | Image / Context image | A photo of the shop, the team, or a map screenshot. | | Button / Video button | A secondary action — booking link, FAQ page, intro video. | | Icon | A small glyph from the [icon catalog](https://volume-theme-fashion.myshopify.com/pages/icons). | | Inline image reveal / Stacking images on hover | Decorative image effects tied to heading text. | | Line / Empty space | Spacing and dividers inside the column. | | Custom Liquid | Anything else — an embedded map, an app snippet. |
### Best practices * **Keep it to four fields or fewer.** Name, email, subject, message. Each extra field measurably lowers completions — add one only when it saves you a round trip. * **Set response expectations.** "We reply within one business day" in a Text block does more to prevent a second message than anything else on the page. * **Offer the self-serve answer first.** Put a link to your shipping and returns policies above the form. The best support ticket is the one that never gets written. * **Don't publish a phone number you can't answer.** An unanswered number in the Contact info block costs more trust than having no number at all. ## Related * [Newsletter](/docs/volume-themes/sections/call-to-action/newsletter.md) — when you want a subscriber, not a reply --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/sections/call-to-action/contact-form.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.