> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/contact-form.md).

# Contact form

Add a **Contact form** to allow customers to get in touch with questions and feedback.

* Add custom text fields, buttons, checkboxes, and other options for customers to fill out.
* To create a full contact page, see the [contact page template](/eclipse/pages/contact-page.md).

{% hint style="success" %}
Sending and receiving messages through the contact form is a Shopify feature. You can test Shopify's free theme Dawn to see if an issue is platform-related. For assistance, you can contact [Shopify support](https://help.shopify.com/en/support/).
{% endhint %}

<figure><img src="/files/RjRRMduI0QknSDY5NFkL" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Contact form**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

### Section header

***

The **Section header** appears above the section. Add **Headings** and **Text,** then adjust their **size** and **center** them in the header.

`Click Contact form section to find settings`

<table><thead><tr><th width="156">Setting</th><th width="419">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header</mark></td><td>Position the header content in the center above the section.</td><td></td></tr><tr><td><mark style="color:blue;">Overline</mark></td><td>The small text above the heading.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Overline"</mark></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the section.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Contact"</mark></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 5</mark></td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td><td><strong>H1 - H6</strong></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.</td><td></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the section text from small to large.</td><td><strong>1-8</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr></tbody></table>

## Set up contact form

***

Add various types of **form blocks** to create your contact form.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Text input</strong></td><td>Show a text field for customers to add a single word or line.</td><td></td></tr><tr><td><strong>Text area</strong></td><td>Show a text field for customers to add multiple lines.</td><td></td></tr><tr><td><strong>Select dropdown</strong></td><td>A menu of multiple options that requires a single choice.</td><td></td></tr><tr><td><strong>Radio buttons</strong></td><td>A list of buttons for multiple options that requires a single choice.</td><td></td></tr><tr><td><strong>Checkbox</strong></td><td>Multiple checkboxes that allow for more than one selection.</td><td></td></tr><tr><td><strong>Phone</strong></td><td>A text field for the customer's phone number.</td><td></td></tr><tr><td><strong>Email</strong></td><td>A text field for your customer's email.</td><td></td></tr><tr><td><strong>Submit</strong></td><td>(<em>Required</em>) The contact button that sends the message.</td><td></td></tr></tbody></table>

### Add content blocks

***

Click **(+) Add block** to add blocks for **Headings**, **Text**, and **Spacers** to help organize and explain the contact form fields. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#heading-block">/pages/1RQDWwxKzKWmtVBL177n#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#text-block">/pages/1RQDWwxKzKWmtVBL177n#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#spacer-block">/pages/1RQDWwxKzKWmtVBL177n#spacer-block</a></td></tr></tbody></table>

### Show reCAPTCHA terms

***

Google reCAPTCHA is enabled by default on all Shopify stores to minimize spam from bots.

`Click Contact form section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show reCAPTCHA terms</mark></td><td>Show the terms of service and privacy policy for Google's reCAPTCHA form.</td></tr></tbody></table>