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

# Form

> Put a form you've built on any page, such as a contact form or a quote request.

The Form section puts a form you've built on a page, such as a contact form, a quote request or an event sign-up. You build the form once in the **Forms** manager, then place it on as many pages as you like.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![Parker's contact form as visitors see it: a raised card with eyebrow, heading "Send us a message", an intro line, the fields Your name, Email address, Phone (optional).](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/form/guides-sections-form-overview-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=33b08c41e322f8fb63174587d12be103)

A contact form placed on a page.

## When to use it

* To let visitors contact you from your Contact Us page.
* To collect quote requests, bookings or event RSVPs.
* To repeat the same form on several pages, such as a short inquiry form on each service page.

## Before you start: build the form

The Form section shows a form but doesn't build one. Create the form first in the **Forms** manager, from a template or a blank form. See [Build a form](https://docs.fetchski-attract.com/guides/forms/build-a-form.md).

A new site already has a **Contact Us** form on its Contact Us page, ready to use.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Conversion** → **Form**. Then choose **Edit**, and on the **Form** tab pick the form to show under **Form**.

Until you pick a form, visitors don't see the section. You see a short note in its place.

## What you can change

Select the form section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has 5 tabs.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

The form's fields, its thank-you message and where its submissions go all belong to the form itself. Change them in the **Forms** manager, and every page that shows the form updates.

![The Form section editor open on the Form tab beside the live contact form, with the three tabs (Form, Styling, CSS) and the Form picker, set to Contact Us, ringed.](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/form/guides-sections-form-editor-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=e211c8c5a6c96eb36d8392ab2f6d4c11)

Pick which form this section shows.

> [accordion] Form
>
> * **Form**: the form to show here. It's required. To build or change the form itself, open the **Forms** manager.

> [accordion] Styling
>
> By default, a form looks the way it was styled in the **Forms** manager, on every page. To give it a different look on this page only, turn on **Restyle for this placement**.
>
> When it's on, these options replace the form's own styling here:
>
> * **Show eyebrow** and **Eyebrow**: a short line above the heading.
>
> * **Heading**: the form's title. It starts as "Send us a message".
>
> * **Intro**: one short sentence under the heading.
>
> * **Band style**: **Plain**, **Raised (card)** or **Accent (solid band)**. For an accent band, you can choose its **Band color**.
>
> * **Header alignment**: **Center** or **Left**.
>
> * **Content width**: **Narrow**, **Normal** or **Wide**.
>
> * **Label spacing**: the space between each field's label and its box, from **Compact** to **Spacious**.
>
> > [!WARNING]
> >
> > **Turning this on can change your words, not just the look.** The options start from their defaults, not from the form's own styling. So the eyebrow shows "Get in touch", the heading "Send us a message", the intro a sample sentence, and the button on the **Button** tab "Submit". Re-enter your own heading, intro, eyebrow and button label here. The form's fields and its other pages don't change.

> [accordion] Background
>
> Give the section its own background color, from your site's palette or a custom color. These options appear once **Restyle for this placement** is on. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> The look of the send button, and its **Button label**. It starts as "Submit". These options appear once **Restyle for this placement** is on. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this form on this page only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![The same contact form as a solid accent band, left-aligned, wide, with the heading "Questions about your first visit?".](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/form/guides-sections-form-accent-band-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=320111c7884b28a1ef3fb189670c0163)

The same form, restyled as a bold band on one page.

**A bold band on one page.** Turn on **Restyle for this placement**, set **Band style** to **Accent (solid band)**, **Header alignment** to **Left**, and **Content width** to **Wide**.

![A short quote request form on a plain background, narrow and centered, with Roomy label spacing.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/form/guides-sections-form-plain-narrow-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=3e36b38e770a975dea113c66730ed057)

A quiet, narrow form that sits on the page.

**A quiet form.** Turn on **Restyle for this placement**, set **Band style** to **Plain**, **Content width** to **Narrow**, and **Label spacing** to **Roomy**.

## What visitors see

While the form sends, a status message in the form reads "Submitting…". Then the form is replaced by its thank-you message, which you set on the form in the **Forms** manager. If a field needs fixing, the visitor sees what's wrong next to it.

Every submission is saved in the CMS. The form's own settings decide who else gets it, such as an email to your team. See [Form submissions](https://docs.fetchski-attract.com/guides/forms/form-submissions.md) and [Email notifications](https://docs.fetchski-attract.com/guides/forms/email-notifications.md).

![The contact form after a visitor sent it: the form replaced by the thank-you heading and message.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/form/guides-sections-form-thank-you-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=ac5a62fe2e6bbfba6383298dff2f6501)

Visitors see your thank-you message once the form is sent.

## Good to know

* **Publish the form first.** Visitors can only send a form that's published. A form made from a template starts as a draft.
* **A form needs at least one field.** Until it has one, visitors don't see it.
* **Test it signed out.** Sign out, or use a private window, to send a test submission as a visitor.
* **Forms need JavaScript.** Visitors who have JavaScript turned off in their browser don't see the form.
* **Where it fits.** The Form section is full width. It isn't offered inside columns or in a blog post's body, but you can add it after a post.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Build a form](https://docs.fetchski-attract.com/guides/forms/build-a-form.md)
>
> create the form, its fields and its thank-you message.

> [card] [Form submissions](https://docs.fetchski-attract.com/guides/forms/form-submissions.md)
>
> read and export what visitors send.

> [card] [Email notifications](https://docs.fetchski-attract.com/guides/forms/email-notifications.md)
>
> get an email for each submission.

> [card] [Spam protection](https://docs.fetchski-attract.com/guides/forms/spam-protection.md)
>
> keep bots out of your forms.


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