In this documentation, we will discuss the customization of the QuForm widget, brought to you by the Element Pack Pro addon for Elementor.
Enable The QuForm Widget
To use the QuForm widget from Element Pack Pro, first, you have to enable the widget.
- Go to WordPress dashboard > Element Pack Pro Plugin dashboard.
- Then, Click the 3rd Party Widgets Tab.
- Search the QuForm Widget Name.
- Enable the QuForm Widget.
- Hit the Save Settings Button.
Note: To use this widget in the Elementor editor, you need to install the QuForm Plugin separately.
Inserting the QuForm widget
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the QuForm 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 QU Form and selected it.
(Note: To customize the form in the editor, create a form first in the QuForm dashboard that includes the information you want to collect from your audience.)
Work with The Style Tab
Label Section
Go to Style > Label
1. Color: You can change the label text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Sub Label Section
Go to Style > Sub Label
1. Color: You can change the sub-label text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Description Section
Go to Style > Description
1. Color: You can change the description text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Input Section
Go to Style > Input
1. Text Color: You can change the input text color with this option.
2. Background Color: You can change the input field background color with this option.
3. Textarea Height: You can adjust the textarea height with this option.
4. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
5. Element Space: You can adjust the space between the form elements with this option.
6. Border Style: Enable the switcher to get more options to customize the border.
7. Border Type: You can add or change the border type with this option.
8. Border Radius: This option controls the roundness of the border.
Submit Button Section
Go to Style > Submit Button
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 background color with this option.
3. Border Type: You can add or change the border type with this option.
4. Border Width: Set the thickness of the border with this option.
5. Border Color: You can change the border color with this option.
6. Border Radius: This option controls the roundness of the border.
7. Box Shadow: You can add a shadow effect to the submit button with this option.
8. Padding: You can adjust the inner space of the button with this option.
9.Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now let’s proceed to the Hover Tab –
10. Text Color: You can change the submit button text hover color with this option.
11. Background Color: You can change the button background hover color with this option.
12. Border Color: You can change the border hover color with this option.
Error Section
Go to Style > Error
1. Color: You can change the error text color with this option.
2. Background: You can change the error background color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Additional Option Section
Go to Style > Additional Option
1. Fullwidth Button: Enable the switcher to make the submit button fullwidth.
All done! You have successfully customized the QuForm widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the QuForm widget. Please visit the demo page for examples.
Thanks for being with us.
