> ## 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).

# Blum Contact Form

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

The **Contact form** section lets customers send you a message from any page of your store. You can add your own text fields and dropdowns to collect the details you need, such as an order number or a topic.

> **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.
![Contact form with an image and custom dropdown fields](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/contact-1_1hhpy34.png)

**What you can do**
- Add the section and set up the form
- Add your own fields
- Add an image next to the form
- See what customers see
- Look up every setting
- 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** > **Contact form**.
3. Under **General**, enter a **Section heading**.
4. Under **Button**, enter the button **Label**, for example "Send message".
5. Click **Save**.

The form always includes **Name**, **Email**, and **Message** fields. **Email** and **Message** are required.

> **Tip:** Messages are sent to the store email address set in your Shopify admin settings. Send yourself a test message before you share the page.

## Add your own fields

1. Click the **Contact form** section.
2. Click **Add block**, then select a field type:
   - **Custom text field**: a one-line text field or a larger text area.
   - **Custom dropdown**: a list of options to choose from.
3. Enter a **Label** for the field.
4. For a text field, enter a **Placeholder**. Check **Required field** if customers must fill it in, and check **Use as text area** for a larger box.
5. For a dropdown, enter the options in **Value**, separated by commas. For example: Order question, Returns, Wholesale.
6. Click **Save**.

Your custom fields show between the **Email** and **Message** fields, in the order of the blocks.

## Add an image next to the form

1. Click the **Contact form** section.
2. Under **Image**, select an **Image**. A 1000 × 1000 px image is recommended.
3. Select an **Image ratio**: **Square (1:1)**, **Portrait (2:3)**, **Landscape (3:2)**, or **Adapt to image**.
4. Under **Layout**, select a **Content ordering on desktop**: **Text first** (form on the left) or **Image first** (image on the left).
5. Click **Save**.

## What customers see

- **Form:** customers fill in the fields and click the button. The browser asks them to fill in any required field they left empty.
- **After sending:** a success message appears above the form. If something went wrong, an error message appears instead.
- **Logged-in customers:** their name and email address are filled in for them.
- **Image:** on desktop, the image takes about a third of the width, next to the form. On mobile, the image shows below the form.
- **Without an image:** the form is centered on the page.
![Contact form on a phone with the image below the form](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/contact-2_9898g0.png)

## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You can edit color schemes in Theme settings > Colors. |
| Section heading | The heading above the form. Leave it empty to hide it. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Content ordering on desktop | Places the form first (Text first) or the image first (Image first) on desktop. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image

| Setting | What it does |
| ---- | ---- |
| Image | The image next to the form. A 1000 × 1000 px .png is recommended. |
| Image ratio | Sets the shape of the image: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |

### Button

| Setting | What it does |
| ---- | ---- |
| Label | The text on the send button. |

### Custom text field block settings

| Setting | What it does |
| ---- | ---- |
| Label | The name of the field. It also appears in the message you receive. |
| Placeholder | Example text shown inside the empty field. |
| Required field | Makes customers fill in the field before they can send the form. |
| Use as text area | Shows a larger box for longer answers. |

### Custom dropdown block settings

| Setting | What it does |
| ---- | ---- |
| Label | The name of the dropdown. It also appears in the message you receive. |
| Value | The options in the dropdown. Separate each option with a comma. |

## Troubleshooting

**I don't receive the messages.**
Messages are sent to the store email address set in your Shopify admin settings. Check that this address is correct, and check your spam folder.

**I can't add another field.**
Each section holds up to 3 custom text fields and 3 custom dropdowns.

**Two fields show the same answer in my email.**
Give every custom field a different **Label**. The label is used as the field name in the message.

**The image doesn't move to the left.**
**Content ordering on desktop** only works on desktop. On mobile, the image always shows below the form.

## Related articles

- [Blum Map](https://doc.ecomx.co/en/article/blum-map-oa3cgv/)
- [Blum Address List](https://doc.ecomx.co/en/article/blum-address-list-1617ruh/)
- [Blum Collapsible Content](https://doc.ecomx.co/en/article/blum-collapsible-content-5u481c/)
- [Blum Page Template](https://doc.ecomx.co/en/article/blum-page-template-wpdqk1/)