> 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/forms-1/contact-form.md). # Contact form The **Contact form** block lets shoppers send you a message without leaving the page. Add it to any compatible section, such as below your contact details, beside a map, or at the end of an information page. Customize the field labels to create a simple contact form or a more detailed enquiry form. Leave any optional field blank to hide it from the storefront. Form submissions are sent to ****.
### How to add it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. In the left sidebar, click the section that should carry the form. 3. Click **Add block** and choose **Contact form**. 4. Write the placeholder wording for the fields you want, and leave the rest empty. 5. Set the **Button label** and check the form in the preview. {% endhint %} *Result:* the form appears in the section with only the fields you gave wording to. ### General settings | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Name** |

The greyed out prompt inside the name box before shoppers type, for example Your name.

Leave it empty and the whole name field is dropped from the form.

| | **Email** | The prompt inside the email box. This is the field you need for a reply, so make the wording plain rather than clever. | | **Phone** | The prompt inside the phone box. Say if a number is optional, since asking for one puts some shoppers off finishing. | | **Select label** | The wording above the dropdown, telling shoppers what they are choosing, such as a subject or an enquiry type. | | **Option** | The choices in that dropdown, typed one after another and separated by commas. Each comma starts a new choice, so keep them short enough to read on a phone. | | **Message** | The prompt inside the large box where shoppers write. Use it to steer what you get back, for example asking for an order number. | | **Button label** | The words on the button that sends the form. Wording such as "Send message" tells shoppers what is about to happen better than a bare "Submit". | ### Size | Setting | Applies To | Description | | ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Width** | Desktop |

How wide the form runs on a computer screen.

| | **Custom Width** | Desktop |

Only visible when Width is Custom.

The exact share of the available width the form takes, from 0% to 100%. Useful for pairing the form with a map or address at half each.

| | **Mobile Width** | Mobile |

The same choice on phones, where a narrow form makes typing harder.

| | **Custom Mobile Width** | Mobile |

Only visible when Mobile Width is Custom.

The exact share of the phone screen the form takes, from 0% to 100%.

| ### Spacing These settings control the external spacing (padding) applied directly above and below this specific block. | Setting | Description | | ---------- | ----------------------------------------------------------------------------------------------------------------------------- | | **Top** | Adds space above the form so it does not run into the wording that explains it. Accepts 0px to 100px. | | **Bottom** | Leaves space under the form before the next block, which keeps the send button from sitting against it. Accepts 0px to 100px. | ### Block Submit button | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Button label** | The words shoppers read on the send button. | | **Type** |

How much the send button stands out

| | **Show icon** | *Adds a small icon to the left of the button label, or leaves the button as text only.* | ### What changes on the storefront * Shoppers get a way to ask a question on the spot instead of hunting for an email address. * Only the fields you gave placeholder wording to are shown, so the form is as short or as detailed as you make it. * The dropdown lets shoppers sort their own enquiry, which makes the replies easier to handle when several kinds of message arrive. ### Related pages * [Newsletter](/velare/customize-your-pages/forms-1/newsletter.md): the one field form for marketing signups * [Google maps](/velare/customize-your-pages/decorative/google-maps.md): the location block that often sits next to this form * [Forms](/velare/customize-your-pages/forms-1.md): the group this block belongs to --- # 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/forms-1/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.