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

# How to use a Contact form?

# Contact form creation

Contact form popup is a great way to keep in touch with your users. Provide help, or additional info letting them contact you.
To start the creation of a Contact form, you should click on **"Insert Contact Form Popup" **button in your editor page.(arrow on the left)
On the right side of the page you'll see a bar of your **Contact Form Element options**. (arrow on the right)

![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-popup-maker-1_zrfv4e.png)

Now, let's check them one by one!

There are 3 sections in the Subscription popup element options: **Content, Design, Settings**


# How to customize the form fields? | Content

![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-popup-maker-2_z6lmm7.png)

* You can Disable **(Off)** and Enable **(On)** the fields in the Contact form

* You must enable at least one of the following 2 fields: **Email, Phone**

* Customize the Texts of each field.

* Make the fields Required.

* All the fields are **draggable** so you can move their position with simple dragging.
 
![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-ordering_1sg008r.gif)


# How to cusomize the Design of the form? | Style

![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-popup-maker-3_gz4csv.png)

* Set up the **Sizing** and positinoning of the **Inputs** and the Button.

* Add a **Gradient** color for the button if you wish.

* Add a **Background image** for the button if you wish.

* Any customization is possible with the styling of the form.


# How to manage form submission details? | Settings

![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-popup-maker-4_2tbvey.png)

* Select the form behavior after the subscription. **Show a message**, **Redirect**, **Close the popup**, etc.

* Specify an email to receive the contact details.

There are also some custom functions you may use for the form submission:

![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-popup-js-events_hha2v8.png)

* **Contact Form Events** - you may use our "before" and "after" form submission JS events in order to process certain actions depending on our form submission.


# How to manage the contact details?

![](https://storage.crisp.chat/users/helpdesk/website/827841c5a93da800/contact-form-popup-maker-5_1xoypai.png)

* You can see the contact details of your users in the **Contacts** section of your Popup Maker account.

* Export the list of your contacts via the **"Export List"** blue button on the left side of the **Contacts** screen.