Contact Form

The new Contact Form widget for Elementor you will be able to create custom lead generation pages that perfectly suits your needs. Check the video below to see what you can do with the contact form widget

Add the Contact Form Widget to a Page

Activate the Elementor Page Builder >> Go to Pages >> Add a New Page >> Select the Elementor page template from the Page Attribute section as showing in the below screenshot:

Then click the Edit with the Elementor button to edit the page with the Elementor page builder.

After clicking on the Edit with Elementor button you will redirect to the Elementor page builder to see the Elementor Page Builder section appear. Drag and drop the Contact Form widget from the Houzez Elements section to the page as showing in the below screenshot:

Contact Form Fields Settings

Once you have dragged the element on the page, you will see the element options in the left tab and you will see the form fields settings. 

1. Form Name: Add the form name.
2. Add Item: Click the add item button to add the form fields.
3. Input Size: Select the size of the input fields.
4. Labels: Show or hide the field labels.
5. Google Recaptcha: Show/Hide Google reCaptcha on the form. (Please make sure you have enabled google reCaptcha in Theme Options -> Google reCaptcha and have added reCaptcha API keys)
6. GDPR Agreement: Show/Hide the GDPR Agreement.
   1. GDPR Agreement Label: Add the label for the GDPR Agreement link.
   2. GDPR Agreement Text: Add the text for the GDPR agreement.

Some Fields are given by default and some of them you can add by clicking the ADD Item Button then you will see some fields to fill 

1. Fields: Select the field type.
2. Label: Add the label for the field.
3. Placeholder: Add the placeholder for the field.
4. Column Width: Set the width of the field.
5. Column Width: Set the Column width of the field.

Contact Form Submit Button Settings

1. Text: Add the button text.
2. Size: Select the button size.
3. Column Width: Set the column width of the button.
4. Alignment: Set the alignment of the button.
5. Button ID: Add the custom id to the Button. (Please make sure the ID is unique and not used elsewhere on the page this form is displayed. This field allows <code>A-z 0-9</code> & underscore chars without spaces.)

Contact Form Email Settings

1. To: Add the email address when you want to receive the emails.
2. Subject: Set the subject as default.

Contact Form Redirect Settings

Add the page URL where you want to redirect to a specific page after submission for Contact form.

Contact Form Style Settings

1. Columns Gap: Set the column gaps of the form.
2. Rows Gap: Set the rows gap of form
3. Label Spacing: Set the label spacing.
4. Text Color: Select the Text color of the.
5. Typography: Select the font style for the form.

Contact Form Field Style Settings

1. Text Color: Select the price slider text color.
2. Typography: Select the font for the price slider.
3. Background Color: Select the field's background color.
4. Border Color: Select the border color of the fields.
5. Border Radius: Select the border radius of the fields.

Contact Form GDPR Style Settings

1. Tabs Color: Select the color of the text 
2. Typography: Select the font for the text

Contact Form Button Style Settings

You can set the button and hover button style settings.

1. Background Color: Set the button background color.
2. Text Color: Select the button text color.
3. Typography: Select the font for the button text.
4. Border Type: Select the border type for the button.
5. Border Radius: Set the border radius for the button's border.
6. Text Padding: Set the text padding for the button.