In this documentation, we will discuss the customization of the WeForms widget, brought to you by the Element Pack Pro addon for Elementor.

Enable The WeForms Widget

To use the WeForms widget from Element Pack Pro, first, you have to enable the widget.

1. Go to WordPress dashboard > Element Pack Pro Plugin dashboard.
2. Then, Click the 3rd Party Widgets Tab.
3. Search the WeForms Widget Name.
4. Enable the WeForms Widget.
5. Hit the Save Settings Button.

Note: To use this widget in the Elementor editor, you need to install the WeForms Plugin separately.

Inserting the WeForms widget

1. Go to the Elementor Editor Page and Hit the “+” icon Button.

2. Search the WeForms widget.

3. Drag the widget and drop it on the editor page.

Work With The Content Tab

Layout Section

Go to Content > Layout

1. Select Form: You can select the form that you have already created. Here we have created a form named Contact Form and selected it.

2. Custom Attributes: Here you can set custom attributes for the WeForm.

(Note: To customize the form in the editor, create a form first in the WeForms dashboard that includes the information you want to collect from your audience.)

Work with The Style Tab

Form Fields Section

Go to Style > Form Fields

1. Large Field Width: You can adjust the input fields’ width with this option.

2. Field Spacing: This option allows you to adjust the space between the form fields.

3. Padding: You can adjust the inner space of the input field with this option.

4. Border Radius: This option allows you to adjust the roundness of the border.

5. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

6. Field Text Color: You can change the input text color with this option.

7. Field Placeholder Color: You can change the input field placeholder color with this option.

In this section, we have two more tabs. These are Normal and Focus. Let’s start with the Normal Tab – 

1. Border Type: This option allows you to add borders to your items. You can select various border types from this option, such as Solid, Double, Dotted, Dashed and Groove.

2. Box Shadow: You can add a shadow effect to the input field with this option.

3. Background Color: You can change the background color of the input field with this option.

Now, let’s proceed to the Focus Tab – 

4. Border Type: You can add a border and change its type with this option.

5. Box Shadow: You can add a shadow effect to the focus input field with this option.

6. Background Color: You can change the focus input field background color with this option.

Form Fields Label Section

Go to Style > Form Fields Label

1. Margin: You can adjust the space around the form field’s label with this option.

2. Label Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

3. Help Text Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

4. Label Text Color: You can change the label text color with this option.

5. Required Label Color: You can change the required label color with this option.

6. Help Text Color: You can change the help text color with this option.

Submit Button Section

Go to Style > Submit Button

1. Button Full Width: Enable the switcher to make the button full-width.

2. Button Width: You can adjust the button width with this option.

3. Margin: You can adjust the space around the button with this option.

4. Padding: You can adjust the inner space of the submit button with this option.

5. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

6. Border Type: You can add or change border types to the submit button with this option.

7. Border Radius: This option controls the roundness of the border.\

8. Box Shadow: You can add a shadow effect to the submit button and customize it with this option.

9. Text Shadow: You can create a shadow for the submit button text and customize it with this option.

In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab – 

1. Text Color: You can change the submit button text color with this option.

2. Background Color: You can change the submit button background color with this option.

Now let’s proceed to the Hover Tab – 

3. Text Color: You can change the submit button text hover color with this option.

4. Background Color: You can change the button background hover color with this option.

5. Border Color: You can change the border hover color with this option.

Section Break Section

Go to Style > Section Break

1. Separator Color: You can change the separator color with this option.

In this section, we have two more tabs. These are Title & Description. Let’s start with the Title Tab – 

2. Color: You can change the title text color with this option.

3.Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Now, let’s start with the Description Tab – 

4. Color: You can change the description text color with this option.

5. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

All done! You have successfully customized the WeForms widget on your website. 

Video Assist

You can also watch the video tutorial to learn more about the WeForms widget. Please visit the demo page for examples.

Thanks for being with us.