> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Form: Contact

**Theme:** Shine · **Section type:** All-template section

The Form: Contact section adds a contact form with an optional image. Customers send you a message from your store, and you can add your own text fields and dropdowns to ask for the details you need.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 3 Custom text field blocks and up to 3 Custom dropdown blocks.
![Form: Contact section with a custom dropdown and an image](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-contact-form-1_1iftd93.jpg)

**What you can do**
- Add the section and set up the form
- Ask for more details with custom fields
- Add an image and choose the layout
- See what customers see
- Change the contact form settings
- Fix common problems

---

## Add the section and set up the form
1. In the theme editor, open the template where you want the section, for example your Contact page.
2. In the left sidebar, click **Add section** > **Form: Contact**.
3. Enter a **Section heading** and choose a **Heading size** from H2 to H5.
4. Under **Button**, enter a **Label** for the submit button and choose a **Style**.
5. Click **Save**.

The form always has 3 required fields: **Name**, **Email**, and **Message**. Messages are sent to your store's contact email address.

> **Caution:** Don't leave the button **Label** empty. If it's empty, the submit button is hidden and customers can't send the form.

> **Tip:** To make words in the heading stand out, put them between square brackets, for example: Get in \[touch]. Choose the style in **Theme settings** > **Typography** > **Highlighted heading style**.

## Ask for more details with custom fields
Custom fields appear between the **Email** field and the **Message** field, in the order of the blocks.

### Add a text field
1. In the left sidebar, under **Form: Contact**, click **Add block** > **Custom text field**.
2. Enter a **Label** and a **Placeholder**.
3. Optional: select **Required field** so customers must fill it in.
4. Optional: select **Use as text area** to show a larger, multi-line box.
5. Click **Save**.

### Add a dropdown
1. Click **Add block** > **Custom dropdown**.
2. Enter a **Label**.
3. In **Value**, enter the choices separated by commas, for example: Order question, Returns, Wholesale.
4. Click **Save**.

> **Tip:** The form has no phone field. To ask for a phone number, add a Custom text field with the label "Phone".

> **Note:** Give each custom field a different label. The label is the field name in the message you receive, so two fields with the same label can overwrite each other.

## Add an image and choose the layout
1. Under **Image**, select an **Image**. Without an image, the form shows in a narrower column.
2. Under **Large screen**, set **Section ordering** to **Text first** or **Image first**.
3. Under **Mobile screen**, set **Section ordering** to choose whether the form or the image comes first.
4. Click **Save**.

## What customers see
- **The form:** Name, Email, your custom fields, and Message, each with its label. Required fields show a red asterisk (*).
- **Logged-in customers:** Name and Email are filled in for them.
- **Sending:** customers can't send the form until all required fields are filled in and the email address is valid.
- **After sending:** a success message appears above the form. If something goes wrong, an error message appears instead.
- **Mobile:** the form and the image stack on top of each other.
![Contact form on mobile with the email field selected](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-contact-form-2_11n8j2n.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the section colors. Color schemes are set in Theme settings > Colors. |
| Section heading | Adds the heading above the form. To highlight words, put them between [ and ]. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | Adds an image next to the form. |

### Large screen / Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section ordering | Shows the form first (Text first) or the image first (Image first). Large screen and Mobile screen have separate settings. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the submit button text. The button is hidden if the label is empty. |
| Style | Shows the button as Filled, Outlined, or Text link. |

### Custom text field block
| Setting | What it does |
| ---- | ---- |
| Label | Sets the field name shown above the field and in the message you receive. |
| Placeholder | Sets the hint text inside the empty field. |
| Required field | Makes the field required and adds a red asterisk. |
| Use as text area | Shows a larger, multi-line box instead of a single line. |

### Custom dropdown block
| Setting | What it does |
| ---- | ---- |
| Label | Sets the dropdown name shown above it and in the message you receive. |
| Value | Sets the choices, separated by commas. The first value is selected by default. |

## Troubleshooting
**Customers can't find the submit button.**
The button **Label** under **Button** is empty. Enter a label, for example "Send message".

**I can't add another custom field.**
Each section holds up to 3 Custom text field blocks and 3 Custom dropdown blocks.

**I want to make a dropdown required.**
Dropdowns have no Required setting. A dropdown always sends a value, because the first choice is selected by default. Make the first value a clear default, for example "General question".

**I don't receive the messages.**
Messages go to your store's contact email. In the Shopify admin, check **Settings** > **Store details** and your spam folder.

## Related articles
- [Shine Newsletter](https://doc.ecomx.co/en/article/shine-newsletter-18to2us/)
- [Shine Popup](https://doc.ecomx.co/en/article/shine-popup-1hnw5zx/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)