> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.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).

# Contact Form

# Contact Form

You can use a contact form on your builder to let a visitor contact you. This article will cover all the steps and functionalities of the contact form element. Follow all the steps accordingly.

**Table of Contents**

---

# Getting Started

## Adding a Contact Form to your site

Follow the steps below to add a Contact Form to your site. 

- Click on **Add Element** in an empty row and section
- From the **General Elements** section, select **Contact Form**

**Refer to the GIF below:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-09-04-at-50_ihdnv.gif)

---

# Editing the Contact Form Element

Follow the steps and instructions below to add and edit a **Contact Form** on your site.

The **Contact Form** element editor has the following options:

- Form Configuration
- Fields
- Form Style
- Input Label Style
- Input Field Style
- Button Text and Style

The **Contact Form** element editor**:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled_rkd8yt.png)


---

## Form Configuration

This option lets you configure your contact form and make it operational. You can configure it with Email and various platforms that we support, like Zapier, Pabbly, and Integromat.

Refer to the **GIF** below for the visual demonstration:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-21_11h9wzh.gif)

---

## Fields

This option lets you enable or disable any field on the contact form.

Refer to the **GIF** below to see the demonstration:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-24_16dzx9j.gif)

---

## Form Style

This option lets you stylize the outlook of the contact form. From changing its background color and style to adjusting the gap between the fields.

Refer to the **GIF** below to see the demonstration:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-24_1f4aer5.gif)

---

## Input Label Style

This option lets you stylize the input label on the contact form, as marked in the picture below. You change the color and text size and adjust the padding. 

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-1_1n00kq1.png)

---

## Input Field Style

This option lets you stylize the input label on the contact form, as shown in the GIF below. You change the color, and text size, adjust the padding, adjust the input height and change the background.

Refer to the **GIF** below to see the demonstration:



![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-25_1l548js.gif)


## Button Text Style

This option lets you customise the button's text in your contact form. You can change your button text, add a border around the button, adjust the spacing and alignment etc.



![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-30_xfl9wd.gif)

---