> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/contact-page/contact-form.md). # Contact form The **Contact form** section puts a working message form on your storefront, so a visitor with a question can write to you without leaving the page or opening their email app. Submitted messages arrive at the sender email set in your Shopify admin. It is the section that makes a contact page useful. The settings below cover the heading above the form, the wording inside each field, and the list of subjects a visitor can pick from, so the messages you receive already say what they are about.
### Section settings #### General settings
| Setting | Description | | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Color scheme** | The background and text colors of the form area, taken from **Theme settings > Colors**. A scheme that differs from the page body marks the form off as the part to fill in. | | **Heading** | The line above the form telling visitors what it is for, such as an invitation to ask a question or request a quote. | | **Enable heading underline animation** | Draws an animated line under that heading so the eye lands on it first. Switch it off if the page already has several moving elements. | | **Underline style** |

The shape of that line, which sets the tone of the page.

\* Note: Only appears when Enable heading underline animation is enabled

| | **Underline color** |

The color of that line. Use an accent color so it reads as a highlight rather than as part of the text.
\* Note: Only appears when Enable heading underline animation is enabled

| | **Description** | A short line under the heading, usually explaining how quickly you reply or what to include in the message. | | **Alignment** |

Where the heading and its line sit above the form.

| #### Contact form
| Setting | Description | | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Name, Email, Message, Button label** | The wording shown inside each field before the visitor types, and the text on the send button. Clear prompts such as *Enter your email* reduce the number of forms sent with something missing. | | **Option** | A dropdown listing the subjects a visitor can choose, for example an order question or a wholesale request. Filling it in means every message reaches you already labelled with its topic. | #### Section padding
| Setting | Description | | ---------- | -------------------------------------------------------------------------------------------- | | **Top** | Adds space above the heading. Increase it when the form sits too close to the section above. | | **Bottom** | Adds space under the send button, so it does not touch the next section or the footer. | #### Section divider
| Setting | Description | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show divider** | Draws a horizontal line separating this section from the one next to it. Useful when both use the same color scheme and would otherwise read as one block. | ### What changes on the storefront * Visitors can send you a message from the storefront instead of looking for an email address. * The dropdown and the field prompts decide how usable the incoming messages are, since a message with a subject and a valid email can be answered straight away. ### Related pages * [Contact page](/velare/customize-your-pages/contact-page.md): how to create the page this section sits on * [Page template sections](/velare/customize-your-pages/contact-page/page-template-sections.md): the other sections placed around this form * [Colors](/velare/set-up-your-store/colors.md): the schemes offered in **Color scheme** --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://uxsmart.gitbook.io/velare/customize-your-pages/contact-page/contact-form.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.