# Contact form

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(19)_cvMyIosQ.jpg)

Let customers easily reach out with inquiries, order details, or support requests with a flexible Contact Form section.

## How to add a Contact form section to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Contact form** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Contact form section

### Section settings

* **Container:** Choose between a *Full* width layout or a *Fixed* width container for the contact form.
* **Direction:** Set the layout direction of form elements to either *Vertical* or *Horizontal*.

<Tabs>
<Tab title="Vertical">

![image](https://docs-assets.foxecom.app/pebble-theme/image_FxBjGcce.png)

</Tab>

<Tab title="Horizontal">

![image](https://docs-assets.foxecom.app/pebble-theme/image_W9jZpsMG.png)

</Tab>
</Tabs>

* **Vertical on mobile:** Enable this option to force a vertical layout specifically on mobile devices.
* **Alignment:** Controls the alignment of the content (Left, Center, or Right).

<Tabs>
<Tab title="Left">

![image](https://docs-assets.foxecom.app/pebble-theme/image_5IMQuvPf.png)

</Tab>

<Tab title="Center">

![image](https://docs-assets.foxecom.app/pebble-theme/image_veflvxsP.png)

</Tab>

<Tab title="Right">

![image](https://docs-assets.foxecom.app/pebble-theme/image_ma6jIEZe.png)

</Tab>
</Tabs>

* **Position:** Adjusts the placement of the form content (Top, Center, or Bottom).

<Tabs>
<Tab title="Top">

![image](https://docs-assets.foxecom.app/pebble-theme/image_J3eTKl3l.png)

</Tab>

<Tab title="Center">

![image](https://docs-assets.foxecom.app/pebble-theme/image_DPvyETDa.png)

</Tab>

<Tab title="Bottom">

![image](https://docs-assets.foxecom.app/pebble-theme/image_2EoiPRF3.png)

</Tab>
</Tabs>

* **Horizontal gap:** Sets the horizontal spacing between elements in pixels.
* **Vertical gap:** Sets the vertical spacing between elements in pixels.
* **Mobile layout:**
  * **Horizontal gap:** Controls the horizontal spacing between elements on mobile.
  * **Vertical gap:** Controls the vertical spacing between elements on mobile.

### Nested dynamic blocks

#### Contact form

<Hint type="success">

📝 Learn more about Contact form block: [Contact form](https://docs.foxecom.com/pebble-theme/theme-blocks/forms#contact-form)

</Hint>

#### Other blocks

You can add multiple dynamic blocks within this section. Learn more about each block type here.

<PageLink href="https://docs.foxecom.com/pebble-theme/theme-blocks/overview">Theme blocks</PageLink>