Divi WP Form styler module will allow you to style your WP forms. You don’t need to know any CSS to style form that was created with the WP form plugin. This is a freemium plugin that is available in the WordPress respiratory. Our styler module works excellent with the free version.
Please make sure you have a Contact Form by WPForms – Drag & Drop Form Builder for WordPress is installed before getting started. Please have a look at how you can create a form before you style it.
This Module Will require-
- DiviFlash Plugin
- Latest Version of Divi Theme or Builder.
- Contact Form by WPForms
How To Add A WP Form To Your Page with WP Form Styler?
Once you have entered the Divi Builder, you can click the gray plus button to add a new module to your page. Locate the WP Forms (purple one with Divi Flash favicon on it) within the list of modules and click on one to add it to your page. Once the module has been added, you will be greeted with the module list of options.
Let’s see what the options Divi form styler have-
WP Form Styler Content Options
The content option consists of options, like Selecting forms and backgrounds.
Here you need to select the form you would like to style. This form is created with Contact Form by WPForms. If it’s empty, please add a form before you style it.
Input & textarea Background
Here you can select the background for your input text area. You can also use a gradient color or background image. Background Image does have options like selecting image size, position, and repeat.
The next option is the button background. You can use color, gradient, and image for your button background.
This background option is for the whole module. Here you also can use color, gradient, and image for your background.
WP form styler can be given a custom label so that it does not need to only display as “Module-Type” on your page builder. You can use any name that is convenient for you.
WP Form Styler Design Options
Now the time is to see what we got as a design option.
Here you can style your label text. It has all the necessary text editing options to make your label eye-catching. The label settings have all the font designing options, including text alignment, color, and sizing.
Sub Label Text
You can style your sub-label with all the necessary text styling options.
Description options do the same job as a label or sub-label. You will find all the text styling options to style text.
Input & textarea Text
Those are the style for your placeholder text and your input text. This text style will apply to text you will be typing to fill the form and placeholder. It has the same style option as any other text.
Checkbox & Radio Text
Here is an option for you to customize radio and checkbox text. You can apply all the text styling options to your multiple-choice or checkbox text.
Here is an option to customize dropdown options for the WP forms. Including regular text customizer, you will find some other features like – Dropdown height adjustment option, Background colors (Solid, gradient, and image), Borders, Rounded corners, etc.
Styling the button according to the design is vital. Keeping that in mind, WP forms styler does have all the necessary element design beautiful buttons. You can align the button, style the text with all the text styling options. You can also have rounded corners, border styles, and many more.
Input and Textarea Border
Here is another option for you to style your input text area. Here you can customize your border with all the necessary options, rounded corners, and many more.
Sizing options help to create a responsive design. Here you have the opportunity to control the width and height of your form. This option is available in the regular Divi module and does the same thing for all modules.
Spacing is one of the core features of our modules. Default Divi modules come with two spacing areas one is for margin, and another is padding. We break this down into the individual elements in our module. You can use margin padding to the label, Input field, button. You have the regular margin padding as well.
WP Form Styler Advanced Options
If you are a developer and want to use your CSS instead of using the Design tab’s design controls, you can venture further into the Advanced tab. Here is the list of the option you got-
CSS ID & Classes
CSS ID: Assign a unique CSS ID to the element used to assign custom CSS styles from within your child theme or Divi’s custom CSS inputs.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child theme or from Divi’s custom CSS inputs.
Nine different custom CSS areas in the Divi WP form module you can target and set your custom CSS code there. In each CSS input box, there is a sign “?” that will tell you which class has been targeted.
Divi Builder offers the option to hide your chosen modules on specific devices. This option is also available in the WP form Module.
If you are using any animation or hover effect, then this duration, delay, and curve will define your transition length, time, and way. This is also available in all modules.
Here you can take full control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.
Scroll Effects are customizable animations that react to your visitors as they scroll up and down the page. This feature is available on every Divi module and works the same for all.
Any setting that has a mobile icon will allow you to customize it according to devices. You can select different settings for desktop, tablet & Mobile.
A mouse pointer in the setting will allow you to set a hover effect on this element.