Form Stylers
How to Configure and Style Form Styler #
Elementor Form Stylers allows you design the layout for popular plugins like Contact Form 7, WP Forms, Ninja Forms and Caldera Forms you have created. With this element, you can easily override the default styling for Contact Form 7, WP Forms, Ninja Forms, and Caldera Forms. You will be able to easily engage with your visitors by making the form attractive through this element.
Form Stylers supported by Spexo Addons #
Spexo Addons supports following Form stylers to make form building process easy and more attractive:
- Contact Form 7 Styler for Elementor
- WP Forms Styler for Elementor
- Ninja Forms Styler for Elementor
- Caldera Styler for Elementor
How To Activate Form Styler #
Before you begin, make sure to install & activate at least one of ‘Contact Form 7, WP Forms, Ninja Forms and Caldera Forms‘ Plugin. Afterward, simply just create a form through the plugin.
To use this Spexo Addons element, find the ‘Form Styler‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Form Styler’ into the ‘Drag widget here‘ or the ‘+’ section.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will be able to configure the settings for Form Styler.
General #
From this section, you can choose the ‘Form Source’ of your plugin from where the forms will be retrieved and displayed. You can use the drop-down to select one of these as your form source: Contact Form 7, WPForms, Ninja Forms & Caldera Forms Selection. You can use the drop-down menu to choose your preferred particular plugin form which you have created.
Besides, you have the freedom to use the toggle to show or hide the field placeholders and error notices for the form.
Click to see Live Demo #
How to Style Form Styler #
To customize Form Styler, click on the ‘Style’ tab, and you will find many different options here.
Container #
From here, you can change form alignment, background color, border color, and padding. Moreover, you can styling to border and box shadow as well.
Field Labels #
From here, you can set field label color, typography and spacing.
Fields (Input, Textarea) #
From here, you can set fields text color, placeholder color, background color, border color and box shadow with focused and normal options. You can use slider bar for change input width, input height, textarea message, textarear width and vertical gutter with supported all devices.
Moreover, you can change typography, transition duration, padding and styling to border with border radius.
Submit Button #
From this section, you can set button background, color, border color and box shadow with hovered and normal options. You cam change alignment, transition duration, typography, padding and top distance.
Besides, you can styling to border with border radius.
Checkbox & Radio #
From this section, you have the freedom to use the toggle to enable or disable the use custom style for the checkbox & radio and change size. If use custom style is enable then you can set static color, active color and border color.
Custom HTML #
From this section, you can set link color, divider color and typography.
Notices #
From notices section, you can set error text color, typography, error field color, error field background color, error field border color, success text color, success background color and success border color as well.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Contact Form 7, WP Forms, Ninja Forms and Caldera Forms as per your preference.
With the help of Contact Form 7, WP Forms Styler, Ninja Forms Styler and Caldera Styler this is how you can design an attractive Forms and get everyone’s attention.
Getting stuck? Feel to Contact Our Support for further assistance.
Functional Always active
Preferences
Statistics
Marketing
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.