# Contact Form

This guide will help you to **Customize Contact Form**.

<div id="bkmrk-drag-and-drop%C2%A0contac">1. 1. **Drag and Drop** Contact Form from left side Widget Panel or simply click on it if already present in page to open **Dialog Box**. Now in Dialog Box Click on **Add New Field** to add new input field to your Form. Enter Button label and check **use reCAPTCHA** box if you want to use it as shown image below. If you don’t know how to setup **reCAPTCHA** then follow this guide. Setup [reCAPTCHA for Contact Form](https://dotroll.com/en/knowledge-base/books/website-builder/page/how-to-add-recaptcha)![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-drag.png)

</div><div id="bkmrk-now-select%C2%A0alignment">1. 1. Now select **Alignment** for your Contact Form as per requirements. **Form ID** and **Form Name** this fields is used in **E-mail template.**![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-drag2.png)
    2. To add new fields just click on **Add New Field**. To customize newly added field just click on that particular field as shown in image below. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-add-field.png)

</div><div id="bkmrk-now-add%C2%A0label%C2%A0for-in">1. 1. Now add **Label** for input field and select Type of that field. We have different input types like **Text** for names or surnames, **E-mail** for e-mail, **Text area** for messages etc. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-customize-field.png)

</div><div id="bkmrk-to-add-the-file-uplo">1. 1. To add the file upload option in contact form, Please select **File** form **Type** section dropdown as shown in figure. ![](https://dotroll.com/wp-content/uploads/2020/08/Input-type-file.png)

</div><div id="bkmrk-check%C2%A0use-label-as-p">1. 1. Check **Use Label as Placeholder** box to place your label as a **Placeholder**. If you want any field as a **required field** then check **Required** box. Enter **CSS class** and **ID** if you need them. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-customize-field2.png)

</div><div id="bkmrk-you-can-add-multiple">1. 1. You can add multiple input fields into your **Contact Form** as shown image below. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-multiple-fields.png)

</div><div id="bkmrk-you-can-set%C2%A0reply-to">1. 1. You can set **Reply To** as shown in the image below. ![](https://dotroll.com/wp-content/uploads/2020/08/Reply_to.png)

</div><div id="bkmrk-you-can-add%C2%A0custom-s">1. You can add **Custom Style** for **Contact Form** by following below image steps. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-styling.png)

</div><div id="bkmrk-"></div>