# Contact form

It includes various input fields for collecting details about customer inquiries, making it ideal for handling detailed requests or general questions. With flexible layout options, the section can incorporate images or informational text to enhance brand awareness and provide context for inquiries.

<figure><img src="/files/6gvqkQKHQ2AwHJCEgBrf" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Contact form** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** provide options to customize the layout, background, and alignment.

* **Layout**: Choose the layout for the Contact form section:

{% tabs %}
{% tab title="Image left" %}
Image displays on the left, Contact form on the right.
{% endtab %}

{% tab title="Image right" %}
Image displays on the right, Contact form on the left.
{% endtab %}

{% tab title="Text left" %}
Text card displays on the left, Contact form on the right.
{% endtab %}

{% tab title="Text right" %}
Text card displays on the right, Contact form on the left.
{% endtab %}

{% tab title="None" %}
Only the Contact form is displayed, centered in the section.
{% endtab %}
{% endtabs %}

* **Position**: adjusts the vertical alignment of the Contact form, Text card, and Image card within the section: Top, Middle or Bottom.
* **Add space between image and container**: create spacing between the image and the contact form—this applies only when an image card is active.

### 3, Block settings:

The Contact form section includes multiple blocks for customizing fields, layout, and additional content.

1. **Message block:** Allows customers to write detailed inquiries and special requests.&#x20;
2. **Phone number block:** Lets customers provide their phone number for follow-up communication.&#x20;
3. **Rich text:** Enter text for a heading and description, useful for dividing long forms. Add supplementary text below the heading, providing additional information.
4. **Custom field block**

* **Field type**: Choose the field type:

{% tabs %}
{% tab title="Text short" %}
Creates a one-line input for short text entries.
{% endtab %}

{% tab title="Text - long" %}
Creates a multi-line input for longer responses.
{% endtab %}

{% tab title="Dropdown" %}
Creates a dropdown menu for selecting one option from a list.
{% endtab %}

{% tab title="Checkbox" %}
Adds a checkbox for customer acknowledgment or agreement.
{% endtab %}

{% tab title="Radio buttons" %}
Similar to a dropdown, but presents options as a list with radio buttons.
{% endtab %}
{% endtabs %}

* **Label**: Enter a label for the input field.
* **Placeholder**: Add placeholder text (applicable for Text - Short and Text - Long fields).
* **Required**: If checked, this field must be completed to submit the form.

  * **Dropdown values**: Enter values for dropdown options, separated by commas.
  * **Checkbox value**: Specify the value that appears when the checkbox is checked or unchecked.
  * **Radio buttons**: Enter values for radio button options, separated by commas. Choose display style: **Horizontal**: Displays options in a row. **Vertical**: Displays options in a column.

5. **Image card block** *(Visible when layout is set to “Image left” or “Image right”)*

* **Image**: Select an image for the card and assign a link. Adjust the overlay opacity from **0% to 100%**.
* **Text**: Add content over the image, including a heading and description.
* **Desktop content position**: Adjust the content position (e.g., Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right).
* **Desktop content width**: Adjust the width of the content area on desktop; content width is optimized for mobile automatically.
* **Button**: Create a button with a label and link. Choose the button style (**Solid**, **Outline**, or **Text**).
* **Mobile layout**: Set text alignment on mobile to **Left**, **Center**, or **Right**.*Note*: The Image card block will always appear above the Contact form on mobile.

6. **Text card block** *(Visible when layout is set to “Text left” or “Text right”)*

* Add a heading and description for the Text card block.
* **Show social media icons**: Display social media icons at the bottom of the text card if desired.
* **Mobile layout**: Align content on mobile to **Left**, **Center**, or **Right**.*Note*: The Text card block also will always appear above the Contact form on mobile.

{% hint style="info" %}
**Note*****: How to view contact form submissions?***&#x20;

When a customer submits the Contact form section, the submission will be sent to your store's **sender email** address. To update or change the **sender email** address, go to the **Notifications** settings page in your Shopify admin.
{% endhint %}

<figure><img src="/files/2RU12Pv7ZsvY1d1qjxQa" 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://help.byinspiredlabs.com/section/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.