# Contact form

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

A Contact form is helpful in generating leads, boosting sales and conversions by understanding your customers' needs.&#x20;

## How to add a Contact form

{% hint style="success" %}
Steps

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

## How to edit a Contact form

### Section settings

Adjust the **Color scheme** and **Container color scheme** for this section.

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

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

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

### Block settings

#### 1) Custom field

You can add multiple fields with different types to the contact form section by adding **Custom field** blocks. They are used to collect customization information via your contact form.

As you can see in the screenshots below, you can select a preferred **Field type** such as Text, Textarea, Phone, Select, Checkbox, or Radio. (Note: The phone field type can only be added once)

Give the custom field the **Label** and **Placeholder** to distinguish it from other fields. Leave them blank if you do not want to display them.

<div><figure><img src="/files/DafdM5z8pdZIeiRjJy9q" alt=""><figcaption></figcaption></figure> <figure><img src="/files/MRV73k6g2I4Q9f6B0KjC" alt=""><figcaption></figcaption></figure></div>

You can choose to set up this section as required by enabling the **Required** checkbox. Moreover, check the **Full width** checkbox to display the custom field in full width.

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

#### a) Select

If your field type is **Select**, you can add multiple options for it in the **Options** field.&#x20;

Each option is separated by a comma (e.g: Option 1, Option 2, Option 3).

<div><figure><img src="/files/FcJ3UlelOQSohrynlOM2" alt=""><figcaption></figcaption></figure> <figure><img src="/files/oHLL5eTTFAGnvRpBHBt6" alt=""><figcaption></figcaption></figure></div>

#### b) Checkbox

If your field type is **Checkbox**, you will have option to give the **Checked value** and **Uncheck value** fields suitable values.&#x20;

For example:&#x20;

* Checked value: Yes
* Unchecked value: No

<div><figure><img src="/files/3pIeQrhA1JWuAjM4c5O4" alt=""><figcaption></figcaption></figure> <figure><img src="/files/GrwqNaOxuUgrW87RtxZW" alt=""><figcaption></figcaption></figure></div>

#### c) Radio

If your field type is **Radio**, you can add multiple options for it in the **Options** field.&#x20;

Each option is separated by a comma (e.g: Option 1, Option 2, Option 3).

<div><figure><img src="/files/eQKHtIfmQFEarwbfbbNS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ANM1bEPTfwxWENgANZbA" alt=""><figcaption></figcaption></figure></div>

#### 2) Image card

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

#### a) General settings

Adjust the **Color scheme** for the Image card block.

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

Click **Select image** to assign the image to the banner on the desktop and use the slider to change the **Image overlay opacity**.

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

Add some text for the banner’s **Heading, Subheading**, and **Description.** Leave them blank if you do not want to display them.

You can also change the **Heading size** (Heading 1/ Heading 2/ Heading 3) to make your image card block look more balanced.

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

Add a call-to-action button that directs customers to the target page specified in the **Card link** field. Add a **Label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**

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

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

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

* **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
* **Content alignment**: Left/ Center/ Right
* **Content spacing**: Small/ Medium/ Large

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

#### b) Mobile Layout

You can also adjust the **Color scheme** for the Image card block on the mobile device.

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

Especially, if you want to display a different card image on the mobile device, you can insert another image to the **Image** field.

You are able to display the content below or above the image by enabling/disabling the **Show content below image** checkbox.

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

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

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

{% tab title="Disable" %}

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

Moreover, the block also allows you to change **Content alignment** (Left/ Center/ Right) on mobile.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/sleek-theme/theme-sections/contact-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.