Hello everyone, today we are going to talk about Lead Form and its newly launched styler for Elementor.
The lead form builder is a free WordPress plugin which has a ton of features. It also has a pro version which you can buy for better control over the forms. The Lead form has various input fields that will fulfill all your needs for creating a beautiful and powerful form. Once the form is created attach it to any post or page using shortcode generated for that form. To know more about Lead form builder, navigate to this Post.
Now let us move on to talk about its highly customizable styler for Elementor.
You need to have Elementor installed for styler to work. You also should have created a form using the Lead form builder. Open any post or page of your choice to edit with Elementor. Now go to the search area and type Lead form Styler there you will see the widget named as Lead Form Styler.
Drag and drop that widget to Elementor content area. Now all the styler settings are visible in Elmentor editor panel. In the content tab you can see that it displays the list of already created forms. Select the form that you wish to edit.
In the style tab, you can see separate sections for each control.
Lead Form General Style – Here you can adjust the whole width of the form. If the form is reduced in width, alignment ( Left, Center, Right) can be applied to form.
Label and Title Styling – You can change the color and manage typography of all the form labels and the title of the form as well. If needed you can hide the title.
Field Styling- This section has two separate tabs. First is for color and second for dimensions. In the color tab, you will find many color controls. Color for all the fields can be changed. After this, you can adjust the color and typography for input text, placeholder text along with the select (dropdown ) option text. In the dimensions tab, you can set the alignment for the field label. Adjust the spacing between the label and input field as well as spacing between fields. Manage the height and width of various input fields with textarea. You can give border-radius to these fields and margin around it.
Radio and Checkbox Styling- Styled radio and checkboxes look very attractive. You can create those good looking and interactive radio buttons and checkboxes from here. Change the switcher to yes to change default style. Here again, as the previous section, you will see two tabs color and dimension. Size of the buttons and their symbol ( radio button dot & check-mark) can be adjusted. You can adjust the spacing between buttons and their respective label. Apply the background color for the checked and unchecked state of these buttons. The border-radius of radio buttons and checkbox can be adjusted which can make checkbox circular and radio button rectangular.
Color options for radio and checkbox ( Pro )
1. Radio and checkbox label color and font size.
2. Border width and color control for radio and checkbox.
3. Background color option for checked and unchecked state of radio and checkbox .
4. Symbol color option for checked and unchecked state of radio and checkbox .
Button Styling- The padding inside the button and margin around it can be set. You can also change the typography and color for the button text. There are options for changing the size of the button along with its alignment. Color for hover and normal state of the button can be given. To make the button look oval in shape border-radius can be applied. You can set the type of border, give color and adjust the width of the button.
Form Submission Message- ( Pro )When the form is submitted by the user a message is displayed, which you might not see at the moment because the form is not submitted yet. To preview the message without submitting the form for styling purpose, enable the preview option for form submission message. You can style this message box as per your need. Give it a nice background color along with a suitable text color. If you want to apply a border around this message box, you can do so by choosing the type of the border, its color, and width along with border-radius. Typography for the message text can also be adjusted from here.
Elementor opens up a sea of possibilities for designing. Now you can utilize those fantastic Elementor features to design your favorite lead form and make it look lovely. You check our demo for styled forms here. If you like the styler and want to customize your own form you can download the free version from here and if you want complete control over every element of the form get the pro version here.