Contact Form

This guide will help you to Customize Contact Form.

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. It is highly suggested to protect your forms from spam through the use of recaptcha. If you don't know how to setup reCAPTCHA then follow this guide. Setup reCAPTCHA for Contact Form

Contact-form-drag.png

2) Now select Alignment for your Contact Form as per requirements. Form ID and Form Name this fields is used in E-mail template.

Contact-form-drag2.png

3) 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.

Contact-form-add-field.png

4) 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.

Contact-form-customize-field.png

5) 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.

Contact-form-customize-field2.png

6) You can add multiple input fields into your Contact Form as shown image below.

Contact-form-multiple-fields.png

7) You can add Custom Style for Contact Form by following below image steps.

Contact-form-styling.png

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Button

This Guide will Help you to edit Button Widget Settings and Style. Button Widget Settings When...

Icon

This Guide will Help you to edit Icon Widget Settings and Style. Drag Icon Widget When you Drag...

Primary Menu

When the first Theme is selected it automatically gives the Predefined Style for Menu but if you...

List

This Guide will Help you to edit List Widget Settings and Style. Drag List Widget When you Drag...

Chart

This Guide will Help you to edit Chart Widget Settings and Style. Drag Chart Widget When you...