# Contact page

Use the **Contact page template** to let customers message you through the contact form.

* Customize the **content and layout** your contact page
* Add **custom fields and buttons** to the custom form
* Use the **FAQ section** to answer common questions about your products

{% 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 %}

## Create page and assign template

***

In your Shopify admin, **create a page** and **assign the \`contact\` template** to the page.

{% stepper %}
{% step %}
From your Shopify admin, go to **Online store > Pages**. Click **Add page**.

{% hint style="success" %}
Pages are a Shopify feature: learn more in Shopify's guide for [creating pages](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages).
{% endhint %}
{% endstep %}

{% step %}
Enter a page **Title** (e.g. "Contact us").

{% hint style="info" %}
The title will not appear in the template. The title will be used for the page URL (e.g. **`www.store.com/contact-us`**).\
\
You don't need to add anything to the **Content** field. You will add the page content by editing the template in the theme editor.
{% endhint %}
{% endstep %}

{% step %}
Click the **Theme template** dropdown to assign the `contact` template to the page.

{% hint style="info" %}
If the theme isn't published, learn how to [assign templates from unpublished themes](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#assign-templates-from-unpublished-theme)
{% endhint %}
{% endstep %}

{% step %}
Click **Save**.
{% endstep %}
{% endstepper %}

## Customize contact page layout

***

In the theme editor, you can **customize the contact page template** using theme sections.

By default, the Contact template includes the **contact form** and a **FAQ section** for common questions. You can add other theme sections to further customize your page.

{% stepper %}
{% step %}

#### Open "contact" template

In your **Theme editor**, use the template selector to open the `contact` template.
{% endstep %}

{% step %}

#### Preview page

Under "PREVIEW", click **Change** and select the page you created in the Shopify admin.

A warning symbol **(!)** next to the page name means that the template is not assigned. Click the page name to assign the template in the Shopify admin.
{% endstep %}

{% step %}

#### Customize sections

Edit the preset theme sections to add custom page content and styles.

Under **Template**, click **(+) Add section** to further customize your page with [theme sections](https://help.fluorescent.co/cornerstone/pages/theme-sections).
{% endstep %}
{% endstepper %}

## Add contact form fields and options

***

Use the **Contact form** blocks to add custom text fields, buttons, and options for customers to fill out, and choose to make them required before submitting a message.

Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<details>

<summary><mark style="color:blue;"><strong>STEPS: Add contact form blocks</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Block** to open the settings.

   > Click **(+) Add block** to add a new **block**.

   > See the list below for an overview of [all available blocks](#available-blocks).
2. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FOcIEQOBbGwGiPeSEuTGv%2Fshopify-content-drag-handles.jpeg?alt=media\&token=80f5a54b-7347-4c2a-b126-eb69640ab472)

   > Click **Remove block** or the eye icon to delete or hide a block.
3. Click **Save**.

</details>

### Contact form blocks

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Email</strong></td><td>A text field for your customer's email.</td></tr><tr><td><strong>Phone</strong></td><td>text field for the customer's phone number.</td></tr><tr><td><strong>Text line</strong></td><td>Show a text field for customers to add a single word or line.</td></tr><tr><td><strong>Text area</strong></td><td>Show a text field for customers to add multiple lines.</td></tr><tr><td><strong>Checkbox option</strong></td><td>Add multiple checkboxes that allow for more than one selection.</td></tr><tr><td><strong>Radio buttons</strong></td><td>A list of buttons for multiple options that requires a single choice.</td></tr><tr><td><strong>Select dropdown</strong></td><td>Show a menu of multiple options that requires a single choice.</td></tr><tr><td><strong>Heading</strong></td><td>Enter text to display as a title above any blocks.</td></tr><tr><td><strong>Spacer</strong></td><td>Add a margin of space between other blocks.</td></tr></tbody></table>

### Show reCAPTCHA terms

***

`Click Contact form section to find settings`

<table><thead><tr><th width="233">Setting</th><th>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.<br><br>Google reCAPTCHA is enabled by default on all Shopify stores to minimize spam from bots.</td></tr></tbody></table>

### Contact form header

***

Customize the section **Headings**, including font size and alignment.

`Click Contact form section to find settings`

<table><thead><tr><th width="220">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Position the section headings in the center.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Enter text to display a small label above the heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter text to display a section title in the top-left corner.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Adjust the text size between small (<strong>1</strong>) and large (<strong>8</strong>)</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Enter text to display a section subheading below the heading. Use the formatting buttons to add text styles, links, or lists.</td></tr></tbody></table>

## Section style and layout

***

Adjust the overall section style by changing the **content width** and **spacing** above and below the section.

`Click Contact form section to find settings`

<table><thead><tr><th width="227">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at Full width or use the slider to set a <strong>custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom content width</mark></td><td>Set the maximum width of the section: between 400 and 1200 pixels.<br><br>The section will change in size to fit smaller screen sizes.</td></tr><tr><td><mark style="color:blue;">Top spacing</mark></td><td>Increase or decrease the amount of space above the section.</td></tr><tr><td><mark style="color:blue;">Bottom spacing</mark></td><td>Increase or decrease the amount of space below the section.</td></tr><tr><td><mark style="color:blue;">Enable animation</mark></td><td>Choose whether to display visual effects when scrolling, hovering, or interacting with the section.<br><br>See the <a href="../../theme-styles/animation">Animation guide</a> to learn more.</td></tr></tbody></table>

***

> **Related links**
>
> [Templates](https://help.fluorescent.co/cornerstone/pages/templates)