# Contact form

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fug7uejcSg9hsjH1SbNXn%2FFox-BG%20Light%20(19).jpg?alt=media&#x26;token=7cc2aff3-ce36-4374-bfff-545ea2730e91" alt=""><figcaption></figcaption></figure>

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 style="success" %}

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

## How to customize a Contact form section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### 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" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FjUmA2wxSeznyYnNI2eEh%2Fimage.png?alt=media&#x26;token=d80fb0dd-6ffb-41c7-86ee-493ebc23a4ea" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F00ChwVJ4ciNhDoQbcgtm%2Fimage.png?alt=media&#x26;token=d290ff81-6b30-4fbd-9671-3cfa44a87a89" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **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" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FXqhaclNjIhyZzoMKNMDH%2Fimage.png?alt=media&#x26;token=944fa4ad-46c0-47a5-b312-4d14f9329cdd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQpLawrzndaScurkWkiu7%2Fimage.png?alt=media&#x26;token=6bb37475-79d4-414f-aa1d-78e516803cb8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpBjFTmSrPbkdhVJ8Nljo%2Fimage.png?alt=media&#x26;token=4b5e56c8-4f39-43af-b8d5-e14a4dbfdc2c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Top" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F1XyqbwTc7WHoebh5IlJH%2Fimage.png?alt=media&#x26;token=0c8eb867-c929-4c0d-9e99-af3eb1b120e1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FbvZEgENQQ8rWaxC2Cc4v%2Fimage.png?alt=media&#x26;token=3bda467a-ae9a-428b-a3d6-bccb11d35717" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FPpakgXS4v5fPjClquRbT%2Fimage.png?alt=media&#x26;token=2e789509-ece4-40a1-97b8-4427041caf7c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **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 style="success" %}
📝 Learn more about Contact form block: [Contact form](https://docs.foxecom.com/pebble-theme/theme-blocks/forms#contact-form)
{% endhint %}

#### Other blocks

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

{% content-ref url="../theme-blocks" %}
[theme-blocks](https://docs.foxecom.com/pebble-theme/theme-blocks)
{% endcontent-ref %}