# 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](https://help.fluorescent.co/eclipse/pages/contact-page).

{% 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FX9JiuYbOivmCaiZDv6li%2Fcontact-form.jpg?alt=media&#x26;token=651db824-7eea-4da2-aabc-75f5614fdf9d" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#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="../overview/content-blocks#heading-block">#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="../overview/content-blocks#text-block">#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="../overview/content-blocks#spacer-block">#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>