> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/contact-form.md).

# Contact form

## Contact form

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Contact form</mark>](#contact-form-block)" blocks.\
**Tip:** Press **"Add block"** to use the "Contact form" block. Each block can be added individually and customized in different ways.\ <mark style="color:orange;">**Note!**</mark> This section supports a maximum of **2 nested blocks**. Any additional blocks will be ignored.
{% endhint %}

### Layout

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

The layout settings change the look and feel of the section.

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Use custom width**\
Enable the option to display the related settings.

**Width**
\
Set the width of input fields using the scale from 30% to 100%.

**Min width**\
Set the minimum width of the contact form fields to maintain readability on larger screens. The value can be set to range from 400 to 1400 pixels.

**Position**\
Choose where the contact form is placed within the section.

* **"Side"**. Aligns the form to the left.
* **"Center"**. Centers the form within the section.

### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

***

## Contact form (block)

{% hint style="success" %}
Provides additional blocks to display each input field in the Contact form: "Field: Name", "Field: Email", "Field: Phone", "Field: Message", and "Field: Submit".

**Tip:** Hide the unnecessary field by pressing the eye icon that appears when the block is hovered over.
{% endhint %}

**Alignment**\
Change the alignment of the confirmation button displayed at the bottom of the contact form to "Left," "Center," or "Right." Leave the "Auto" option to use the default settings.

***

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

<figure><img src="/files/d2xlMllDKwSYjjBUrz89" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/DCXoGLXEsHJE2JVBOJoB" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### Edit fields' text

{% hint style="success" %}
**Tip:** The text can be edited in your *Shopify admin -> Edit default theme content -> Theme content*.
{% endhint %}

* Press the dotted \[...] button in the top right corner of the settings panel to navigate to Theme content:

<figure><img src="/files/ZnVtjEuXeAhgI6RJ519B" alt=""><figcaption></figcaption></figure>

* Then, choose the **"Templates"** tab and scroll down to the **"Contact form"** settings:

<figure><img src="/files/8IgSnj07Hj4Ec950NhLg" alt=""><figcaption></figcaption></figure>