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

# Electro How to Use Electro Contact Form

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

The Contact form section lets customers send you a message from any page. Messages go to your store's email address, and you can add your own text fields and dropdowns to collect 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 fields and 3 Custom dropdowns.

![A Contact form section with a Topic dropdown and a required Subject field on large screens (Electro preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cf-1_octzvj.png)

**What you can do**
- Add the section and set up the form
- Add your own fields
- Add an image beside the form
- See what customers see
- Change the section 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** > **Contact form**.
3. Under **General**, enter a **Heading** and choose a **Heading size** from H2 to H5.
4. Under **Submit button**, enter a **Label** for the button.
5. Click **Save**.

The form always includes a name field, an email field, and a message field. The email and message fields are required.

> **Tip:** Messages are sent to your store's contact email, which you set in your Shopify admin under **Settings** > **General**. Send yourself a test message after you set up the form.

## Add your own fields
**Custom text field**
1. Click **Add block** > **Custom text field**.
2. Enter a **Label** and a **Placeholder**.
3. Optional: select **Field is required** so customers can't send the form without it.
4. Optional: select **Use as text area** for a larger, multi-line box.
5. Click **Save**.

**Custom dropdown**
1. Click **Add block** > **Custom dropdown**.
2. Enter a **Label**.
3. In **Value**, enter the options separated by commas, for example "Order question, Returns, Product support".
4. Click **Save**.

Custom fields appear between the email field and the message field, in the order of the blocks. Each answer is included in the message you receive, under the field's label.

> **Tip:** Give each custom field a different label. The label names the answer in the email you receive.

## Add an image beside the form
1. Click the **Contact form** section.
2. Under **Image**, select an **Image**. A 1600 x 800 px .png is recommended.
3. Under **Layout**, choose a **Content ordering on large screen**: **Text first** shows the form on the left, **Image first** shows the image on the left.
4. Click **Save**.

## What customers see
- **Form:** customers see the heading, name and email fields side by side, your custom fields, the message box, and the submit button. Required fields are marked with a red asterisk.
- **Signed-in customers:** the name and email fields are filled in for them.
- **After sending:** the page reloads and a confirmation message appears above the form. If something is missing, an error message appears instead.
- **With an image:** on large screens the image sits beside the form. On phones, the form and image stack.
- **Phones:** all fields take the full width.
![The Contact form on a phone, filled in and ready to send (Electro preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cf-2_k6xpnv.png =390x755)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background, text, and button colors of the section. You edit color schemes in Theme settings > Colors. |
| Heading | Sets the heading above the form. |
| Heading size | Sets the heading size, from H2 to H5. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Content ordering on large screen | Shows the form before the image (Text first) or the image before the form (Image first). Applies only when you add an image. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | Adds an image beside the form. A 1600 x 800 px .png is recommended. |

### Submit button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the text of the submit button. |

### Custom text field settings
| 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. |
| Field is required | Makes customers fill in the field before they can send the form. |
| Use as text area | Turns the field into a larger, multi-line box. |

### Custom dropdown settings
| Setting | What it does |
| ---- | ---- |
| Label | Sets the dropdown name shown above it and in the message you receive. |
| Value | Sets the options of the dropdown. Separate each value with a comma. The first value is selected by default. |

## Troubleshooting
**I'm not receiving contact form messages.**
Check your store's contact email in your Shopify admin, under **Settings** > **General**, and look in your spam folder.

**The submit button is missing.**
The button is hidden when the **Label** under **Submit button** is empty. Enter a label, for example "Send message".

**Two answers are merged or missing in the email.**
Give each custom field and dropdown a different **Label**. Fields with the same label share one entry in the message.

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

## Related articles
- [Electro How to Edit Electro Page Template](https://help.ecomx.co/en/article/electro-how-to-edit-electro-page-template-154imq0/)
- [Electro How to Use Electro Map Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-map-section-1u5oyhg/)
- [Electro How to Use Electro Collapsible Content](https://help.ecomx.co/en/article/electro-how-to-use-electro-collapsible-content-1h8lwhn/)
- [Electro How to Use Electro Newsletter](https://help.ecomx.co/en/article/electro-how-to-use-electro-newsletter-ddpw8v/)