> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customizing the Contact Form

# Form editor's layout
When customizing the Contact Form in the Omega Chat app, you will see a structured layout similar to the image below. The form editor provides an intuitive way to modify fields, update labels, and change form behavior:
1. **Left Sidebar**: Used for switching between different form editing sections:
    * **Content**: Manage form fields like Name, Email, Phone, etc.
    * **Appearance**: Customize the design, colors, and styling of the form.
    * **After Submission**: Configure post-submission actions such as thank-you messages and redirects.
    * **Email**: Set up email notifications for form submissions.
    * **Settings**: Adjust general settings like auto-close options and required fields.
2. **Main Edit Panel**: Displays option to edit the form
3. **Main Preview Panel**: A real-time visual representation of the form as it appears to customers. This section allows you to preview changes before saving.
4. **Top Bar**: Edits the form name and status (e.g., Active or Inactive), enabling quick identification.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1r7ilv5.png)

# Form Editor
### Section 1: Content
The **Content** section consists of four main parts that allow users to configure their Contact Form:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_y5opqz.png)


**1. Header**
* Users can **edit the Title and Content** of the form header to provide a personalized message to customers.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_18yg8ys.png)

**2. Content**
* This section allows users to **add various input fields** to collect information from customers.
* Available field types include: Email, Phone, Text, Number,...
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1igcbhj.png)

* Each field can be customized by editing:

* **Label** (the field name visible to users) **Placeholder** (instructional text inside the input box) **Width** (adjusting the size of the input field) **Required option** (determining if the field must be filled before submission)
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_ngbosn.png)
**3. Subscription**
* If users include **email** and **phone** fields in their form, an option will appear to allow customers to **subscribe** to receive marketing SMS or emails.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1ek47d8.png)

**4. Footer**
* Users can **add text** to the footer, such as additional disclaimers or instructions.
* Users can **edit the submit button text** to match their branding or customer interaction strategy.
* An **option to contact customer support** is available to remove the "Powered by Omega" branding from the form.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_fwqrc0.png)

### 
### Section 2: Appearance
This section allows you to customize the visual aspects of your form to align with your brand and aesthetic preferences. Here are the customizable options:
* **Edit Form Size**
Adjust the width and height of the form to fit your desired layout or space constraints.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1u5dmnf.png)

* **Add Image**
Include images in your form to enhance visual appeal or provide additional context. You can upload images and adjust the position and size of the image. 
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1tvzhlm.png)

* **Header Style**
Modify the header section of your form, including font size and color, to make it stand out.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_7mh4c7.png)

* **Input Field Style**
Customize the fields where users input their information. Options include text style and color adjustments.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_57it37.png)

* **Button Style**
Style the form's button to reflect your brand’s look by altering its color, shape, and hover effects.
* ![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1nqw5u.png)

* **Form Background**
Change the background of the form to a solid color to make it visually appealing and cohesive with the overall theme.
* ![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_968q7t.png)

**Note on Choosing Colors for Your Contact Form:**
When customizing your contact form, ensure that your selected **text, background, and border colors** provide good readability and visual balance. Here are some key tips to avoid color mismatches:
* **Contrast is key:** Use a high contrast between text and background to maintain readability. For example, dark text on a light background or vice versa works best.
* **Avoid similar shades:** Colors that are too close in tone (e.g., light gray text on a white background) can make text difficult to read.
* **Border visibility:** Ensure the border color complements the background while still being distinguishable.
* **Consider accessibility:** Use color combinations that are accessible for users with visual impairments. Tools like contrast checkers can help verify readability.
* **Stay consistent:** Maintain a consistent color scheme that aligns with your brand or website theme for a professional look.
These appearance settings are designed to enhance user experience and ensure consistency with your branding strategy.
### 
### Section 3: After Submission
This section will help you to configure the form after your customers' submission. Here's the setting options:
* Set delay for another response
* Close form automatically
* Redirect visitor
* Thank you message
* ![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1e1fqnt.png)

### 
### Section 4: Settings
This section will include 2 main parts: General and Triggering. For general, you can configure the overall settings for your Contact Form and Targeting settings allow you to specify where and to whom your form is displayed.
#### 
General
The General settings include:
* **Form Type**: Choose the type of form you wish to implement. For the **Button** form type, you can select the chat widget option and set trigger conditions that activate the form before a chat session begins.
* **Data Sync to Shopify**: Enable the option to sync form data automatically to Shopify for seamless integration. For a detail guide, please visit [Data Sync to Shopify Page.](https://help.omegatheme.com/en/article/data-sync-with-shopify-pein20/)
#### 
Targeting

* **Device Targeting**: Decide whether to display the form on desktop, mobile, or both.
* **Location Targeting**: Choose specific countries to either display the form or exclude it, tailoring visibility according to your geographical preferences.
### 
### Section 5: Email

You can enter 1 or multiple email addresses to receive notifications whenever customers leave information or messages through the Contact Form. ![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_98hwsn.png)

Emails are dispatched 2 minutes after a new response is received. Any responses that come in within that 2-minute window will be sent together in a single notification.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_m259jt.png)