# Contact form
The **Contact Form** is a critical tool for businesses to maintain smooth communication with customers. It allows you to collect customer inquiries, feedback, or other important information directly on your website. {% hint style="info" %} Your contact form sends all submissions to the sender email address of your store. You can change the sender email address in the [**Notifications**](https://admin.shopify.com/settings/notifications?utm_source=foxecom\&utm_medium=help_center_foxify_contact_form\&utm_campaign=anchor_text\&utm_term=notifications) settings page of your Shopify admin. {% endhint %} ## How to add a contact form {% hint style="success" %} **Steps:** 1. In the FoxStudio editor, on the left Sidebar > Click **Add elements (**), or press **E**. 2. Select **Forms** > **Contact form.** 3. Drag the Contact form onto your canvas. {% endhint %} ## How to edit a contact form {% hint style="success" %} **Steps:** 1. **Select** the relevant contact form element in the editor. 2. Use the tools bar above the selected contact form element to quickly edit it. All the formatting tools below can be found in the right-handsided **Inspector** panel. {% endhint %} ### General settings #### **Contact fields** * Click **Add field** to add a new field to your contact form. * Each contact field includes: * **Label**: Set the title or name of the field that users will see. Example: "Name", "Email", "Phone Number". * **Field type**: Define the type of input the field accepts (Text, Select, Checkbox, etc.). * **Field name**: Assign a unique identifier to the field for backend reference. * Field names must be unique across the form. * Used for mapping submissions to email integrations or databases. * **Options** (for **Field type as Select**): Define preset options. * Enter each option on a new line. Example: ```rust Option 1 Option 2 Option 3 ``` * **Placeholder**: Displays sample text inside the field to guide users on what to enter. * **ID**: Adds a custom HTML ID to the field for advanced customizations or integrations. Useful for developers who want to apply custom styles or scripts. * **Required:** Makes the field mandatory for form submission. #### Form layout Choose between a single-column or 2-column layout for your form.

An example of Contact form with 2-column layout

#### Label position Set the position of field labels as **Above**, **Inline**, or **Hidden**. {% tabs %} {% tab title="Above" %} {% hint style="info" %} Labels are displayed on top of each field, which improves readability, especially on mobile devices. {% endhint %}
{% endtab %} {% tab title="Inline" %} {% hint style="info" %} Works well for shorter forms or to save space, where labels appear next to the input fields. This option works for desktop and tablet view only. {% endhint %}
{% endtab %} {% tab title="Hidden" %} {% hint style="info" %} Ideal for minimalist designs or when placeholder text inside fields already provides sufficient guidance. {% endhint %}
{% endtab %} {% endtabs %} #### Submit button * **Button label**: Edit the text displayed on the submit button (e.g., "Submit" or "Send Message"). * **Alignment**: Align the submit button to the left, center, or right. * **Button style**: Click **Select style** to choose from pre-defined styles in [Global styles](/foxify-app/page-management/global-styles.md) #### Message Set up messages displayed to users after form submission: * **Thank You Message**: This message appears when the form is successfully submitted. * **Error Message**: This message appears when the form submission fails due to an issue (e.g., missing required fields, or connectivity errors). :white\_check\_mark: *Tips:* * *Use a warm, reassuring tone to confirm the form submission and provide a timeline for follow-up.* * *Keep the error message clear and concise. Optionally, suggest next steps like refreshing the page or double-checking required fields.* ### Design settings {% hint style="success" %} Target specific parts of the Contact form for customization: * **Element container**: Adjust background colors, padding, borders, and spacing for the entire form container. * **Form inputs**: Customize the appearance of input fields, including height, borders, background colors, text styles, and spacing. * **Form labels:** Modify the font style, size, and colors of labels displayed in the form. * **Submit button**: Design the submit button's appearance, including its background color, border, padding, and text styling. * **Submit button hover**: Set styles for the button when hovered over (colors and borders). {% endhint %}
--- # 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/foxify-app/foxstudio/add-and-edit-elements/contact-form.md?ask= ``` 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.