> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Contact form

> Shopify's contact form built from field blocks, with a topic list, messages at each field and a kept draft, plus phone, email and text panels beside it.

![Contact form on the storefront](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/contact-form.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=c21df0d9bbbafa411bbdcaffd54f3408)

Contact form, highlighted with the demo content

## Where to find it

The contact template (page.contact), shown on the demo at /pages/contact. Create a page in **Online Store → Pages** (or open the Contact page Shopify may already have), choose **contact** under **Theme template** and save. In the theme editor choose **Pages**, then **contact**, and select **Contact form**. The template also has Page heading and the FAQ section (Quick answers).

## How it works

* Messages arrive at the sender email set in Settings → Notifications.
* Each Form field block adds a field; its Label names the answer in the email you receive. The first Email field is the address you reply to, and if there is none the form adds a required Email field first.
* Long text fields are always full width, and Character limit adds a counter. Half width puts two fields side by side on wide screens; under 750 px fields stack.
* The Topic block is a drop-down of your Topics. A hint after a vertical bar shows under it when that topic is chosen, and a link ending in ?topic= and the topic name, such as /pages/contact?topic=warranty-claim, chooses it.
* Mistakes show at the field: a required field left empty, an incomplete email address or a phone number with letters. Fields are checked when shoppers leave them and again on Send; errors returned by Shopify show in a summary at the top, which takes focus.
* With Keep an unsent message on, what a shopper types is kept on their device; if they leave and come back, the form shows We kept the message you started with a Clear the form button. It is cleared once the message is sent.
* After sending, the form is replaced by the After sending Heading and Text, a Send another message button and your link. A Link label without a Link goes to the home page.
* Phone, Email address and Text blocks show as panels beside the form, or under it below 1000 px. A Phone block with weekday hours shows an open or closed line for the phone line; an Email address block has a Copy address button.

![Contact form in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-contact-form.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=8872f4b0ebff377525abc48665b7981b)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Add, remove and drag Form field blocks. Set Label, Type, Required, Placeholder, Hint and Width; type Drop-down options one per line for a drop-down.
* Set a Character limit on the message field, such as 2000.
* In the Topic block, type Topics one per line, with a hint after a vertical bar, such as `Returns | Add the order number.`
* Edit Heading, Button label and Note beside the button, and under After sending the Heading, Text, Link label and Link.
* Add a Phone block (up to 2) with Phone number and Hours text; fill in Monday to Sunday and Time zone for the open line, in the same format as [Stores](https://docs.kwebby.com/kelvin/sections/stores.md).
* Add an Email address block (up to 2), leaving Email address blank for the store's contact email, and Text blocks (up to 4) for stores or business orders.

## Settings

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |
| **Link id** | Text. Lets a link such as #message jump to this section. Letters, numbers and hyphens. |
| **Heading** | Text. Default: Send a message. |
| **Note beside the button** | Formatted text. |
| **Button label** | Text. Leave blank for Send message. |
| **Keep an unsent message** | On or off. Saves what a shopper types on their own device, so it is still there if they leave and come back. Default: on. |

**After sending**

| Setting | What it does |
| - | - |
| **Heading** | Text. Default: Message sent. |
| **Text** | Formatted text. |
| **Link label** | Text. |
| **Link** | Link: a page, product, collection or web address. |

## Blocks

Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Form field

| Setting | What it does |
| - | - |
| **Label** | Text. Also names the field in the email you receive. Default: Name. |
| **Type** | Options: Text, Email, Phone, Long text, Drop-down. The first email field is the address replies go to. Default: Text. |
| **Required** | On or off. Default: off. |
| **Drop-down options** | Text (several lines). One per line. Used when the type is Drop-down. |
| **Placeholder** | Text. |
| **Hint** | Formatted text (one line). A short note under the field. |
| **Width** | Options: Half, Full. Long text is always full width. Default: Half. |
| **Character limit** | Number. For long text. Shows a counter. |

### Topic (up to 1)

| Setting | What it does |
| - | - |
| **Label** | Text. Default: Topic. |
| **Topics** | Text (several lines). One per line. Add a hint after a \| to show it when the topic is chosen. A link ending in ?topic= and the topic's name, such as ?topic=warranty-claim, chooses it. Default: Order \| Add your order number so we can find it straight away. Product question \| Tell us the product and what you plan to use it with. Returns \| Add the order number. Warranty claim \| Describe the fault and add the order number. |
| **Hint** | Text. Default: We route your message to the right team. |
| **Required** | On or off. Default: on. |

### Phone (up to 2)

| Setting | What it does |
| - | - |
| **Label** | Text. Default: Phone. |
| **Phone number** | Text. |
| **Hours text** | Text. Such as the days and times someone answers. |

**Open line**

| Setting | What it does |
| - | - |
| **Monday** | Text. |
| **Tuesday** | Text. |
| **Wednesday** | Text. |
| **Thursday** | Text. |
| **Friday** | Text. |
| **Saturday** | Text. |
| **Sunday** | Text. |
| **Time zone** | Text. An offset from UTC, such as -05:00, or a time zone name, such as America/New\_York, which also follows daylight saving time. Default: -05:00. |

### Email address (up to 2)

| Setting | What it does |
| - | - |
| **Label** | Text. Default: Email. |
| **Email address** | Text. Leave blank to use the store's contact email. |
| **Note** | Text. Such as how soon you reply. |

### Text (up to 4)

| Setting | What it does |
| - | - |
| **Icon** | Options: None, Info, Pin, Grid, Truck, Return, Shield, Chat. Default: Info. |
| **Label** | Text. Default: Stores. |
| **Text** | Formatted text. |
| **Link label** | Text. |
| **Link** | Link: a page, product, collection or web address. |
| **Use a quieter background** | On or off. Default: off. |

> [!NOTE]
>
> Give every field a different Label: two fields with the same label share one entry in the email.
>
> Shopify's contact form does not accept file uploads.
>
> On install there is no Phone block, the Email address block has no Note, and the Stores text block has no link until you add one. A new Phone block starts with Phone number and Hours text blank.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.