Overview

Completely customize the look & feel of any form on your WordPress website (inluding Contact Form 7, Gravity Form and Ninja Form).

Form Styler Ultimate lets you easily style forms on your WordPress site. It has tons of features that gives absolute control on the appearance of your forms.

Tested and compatible with some of the famous themeforest themes, like Avada, Betheme, X Theme, Enfold, The7, Bridge as well as WordPress default themes, like Twenty Fifteen.

Why use Form Styler Ultimate WordPress Plugin?

Tired of the ugly forms that Gravity Forms, Ninja Forms and Contact Form 7 create? Want to style your existing forms easily, without touching a single line of code? Want to make cool, minimalistic design forms on-the-fly? Then, this plugin is for you!

Features

• Compatible with Gravity Forms, Ninja Forms and Contact Form 7Our plugin is out-of-the-box compatible with these famous WordPress form plugins. Just pick the form where you want your style to be applied. No coding skills needed!
• Compatible with WooCommerce FormsOur plugin is compatible with WooCommerce. Which means that you can style the 6 default WooCommerce forms: checkout forms, login & register forms, edit billing & shipping address forms and edit account details form.
• Compatible with any formStyle any form on your site. Login forms, WooCommerce forms, newsletter forms, even search boxes! Just add your form's class and you are set.
• Ready-to-use themesChoose between 11 ready-to-use themes and make cool forms on the fly!
• Multiple themes on same pageYou can use multiple themes on the same page.
• Customizable themesYou can customize each theme separately.
• Unlimited styling optionsStyle the form the way you want! Choose background color, borders, margin, padding options and many, many more.
• Google fontsSelect from a large library of Google fonts and set the desired typography for all your inputs, labels, placeholders, submit buttons, etc.
• Input text fieldsFully customize the input text fields and textareas.
• Gravity Forms complex fieldsFully compatible with address, name and password fiels of Gravity Forms.
• Dropdown arrowsRemove the boring arrows from your dropdowns and select your own by the famous Font Awesome vector library. Further customize the arrows by changing color, size, etc.
• Radio and checkboxesNo more boring checkboxes or radio buttons. Just select your own Font Awesome icons. Further customize the icons by changing color, size, etc.
• Date pickersYou can even customize the appearance of the date picker on the date field.
• Submit buttonFully customize your submit button. Set the width, position (left, center, right), font, colors, border radius, padding, etc.
• Validation errorsCustomize general or input specific validation errors or even invalid input validation borders!
• Confirmation messageAnd of course, you can customize the final confirmation message the user sees after submiting the form.
• Hide labelsYou have the ability to hide labels for fields. Useful when you want to use placeholders only.
• Automatically add placeholdersNo need to add placeholders if you choose to hide labels. They are automatically added by our plugin!
• Responsive DesignForms will look great on both desktop and mobile sites.
• Export/ImportEasily export the form styles you create.

Installation

There are two primary methods for installing any WordPress plugin.

Install with a zip file

1. From your WordPress dashboard, choose Plugins > Add New
2. Select Upload from the set of links at the top of the page (the second link)
3. From here, browse for the zip file included in your plugin purchase titled form-styler-ultimate.zip and click the Install Now button
4. Once installation is complete, click Activate Plugin to activate it and enable its features.

Install by FTP Manager

If you are have no previous web experience and have no idea what an FTP Manager is, then this option is not for you.

1. Access your host through the FTP manager
2. Access the plugins directory of your WordPress install /(WordPress directory)/wp-content/plugins/

   If WordPress is installed on the root folder the directory is /wp-content/plugins/

3. Find the directory titled form-styler-ultimate.zip and upload it and all files within to the directory from the previous step.
4. From your WordPress dashboard, choose Plugins > Installed Plugins
5. Locate the newly added plugin and click on the Activate link to enable its features.

Quick Start Guide

Step 1: Create a form style

In order to customize your forms, you must first create a style.

A style is a collection of settings that define the way the form appears.

To do so, at your WordPress backend, click the Form Styler button on the menu.

A pop-up with some basic instructions will appear. Close the popup and click the Add new style button on the top right corner of your page.

A new pop-up will appear. Here you can set a name for your form and select the forms where you want it to be attached.

Here is a list of the available fields. Fill the form and press the Add new style button.

• TitleInsert a title for you style. This name will only be seen at the dashboard, so that you can easily differentiate the various styles that you will create.
• Gravity FormsThis dropdown field will only appear if you have Gravity Forms plugin enabled and have created a form. Use it to select the Gravity Forms you want to attach the style to. If you want to attach the style to all Gravity Forms (current and future), just select the All selection.
• Ninja FormsThis dropdown field will only appear if you have Ninja Forms plugin enabled. Use it to select the Ninja Forms you want to attach the style to. If you want to attach the style to all Ninja Forms (current and future), just select the All selection.
• Contact Forms 7This dropdown field will only appear if you have Contact Forms 7 plugin enabled. Use it to select the Contact Forms 7 you want to attach the style to. If you want to attach the style to all Contact Forms 7 (current and future), just select the All selection.
• WooCommerce FormsThis dropdown field will only appear if you have WooCommerce plugin enabled. Use it to select the WooCommerce forms you want to attach the style to.
• Extra Forms SelectorsHere you can enter you own CSS selectors and style any form at your site. If you want to add more than one form, just add the classes in a comma separated fashion as shown below:

.customform_1,.customform_2

For a list of known plugins and the CSS classes you need to add, you can check here.

Step 2: Select a theme

You have now created your first style. Press the Themes button on the left menu to see the available themes.

Here you will see a list of the available 11 themes. Press the ACTIVATE button under the theme you want to activate.

Step 3: Pick your options

In the popup that appears, you can select your basic form style options. This will help you to set up your form easily and fast, by just setting some initial values. Just select the basic colors and the spacings and press the Activate button.

Step 4: Customize the style settings

You have now created your form style.If you want to further customize your form style, you can do so by going to the desired subsection (eg. General, Inputs, etc.), make the desired changes and press Save Changes to save them.

Themes

In order to style your form easier, you can select between 7 cool themes.

1. Bordered
2. Bordered Full
3. Bordered Rounded
4. Minimal Bottom Bordered
5. Minimal Rounded
6. Minimal Square
7. Minimal Square Distant

Style settings

The style options are logically divided into 9 subsections as seen on the image below.

1. General
2. Labels
3. Inputs
4. Select inputs
5. Radio/checkbox lists
6. Dates
7. Submit button
8. Validation errors
9. Confirmation message

In order to start tweaking the options, you have to understand some basic terminology first.

First of all, we have the Row Item, the Label and the Input.

Gravity Forms has some complex fields. These are: the address field, the name field and the password field.

These complex fields consists of subinputs and sublabels as seen below.

We also have the Select inputs section (which are the dropdown inputs in our forms).

And we also have the Radio/Checkbox lists section.

For Gravity Forms and Ninja Forms, we have the Dates section.

We have the Submit button section.

We have the Validation errors section.

And lastly, we have the Confirmation message section.

Import & export

With our plugin you can easily export a form theme and import it to another website (or inside a different style on your current site). To do so:

1. Go to the style from which you want to export the settings.
2. Click the Import/Export button.
3. Click the Export button.
4. Copy the code from the pop-up that will appear.
5. Go to the desired style where you want to import the theme.
6. Click the Import/Export button.
7. Click the Import button.
8. Click the OK button at the warning pop-up that will appear.

Troubleshooting & Limitations

Radio buttons or checkboxes are not clickable at my Contact Form 7

In order for the Contact Form 7 to be compatible with our plugin, you must add the use_label_element tag at your checkbox and radio element.

[radio radio-761 use_label_element default:1 "Topping 1" "Topping 2"]
[checkbox checkbox-17 use_label_element "Topping 1" "Topping 2"]

Minimum requirements

Depending on your current setup (if you use Contact Forms 7, Gravity Forms or Ninja Forms), our plugin is compatible with at least these plugin versions:

• Gravity Forms > 2.3.0
• Ninja Forms > 3.3.0
• Contact Form 7 > 5.0.0

Tested plugins and CSS classes

Here is a list of plugins with which Form Styler Ultimate is compatible:

.mc4wp-form

.yikes-easy-mc-form

.post-password-form

.elementor-form

.thrv-contact-form

.caldera-grid

Changelog

07.01.2021 version 1.15

• Fix - Compatibility with Wordpress 5.6

26.03.2020 version 1.14

• Add - Upload button inherit styling option for Gravity and CF7
• Add - Upload button add text
• Add - Input custom height option
• Add - Textarea custom height option
• Add - Hide input validation errors option
• Fix - Validation errors 3rds

14.06.2019 version 1.13

• Fix - Gravity name fields responsive fix
• Fix - Checkbox font fixes

15.05.2019 version 1.12

• Fix - For multipage gravity forms, if submit button is on the right, put previous button on the left

31.03.2019 version 1.11

• Add - Footer border and padding options for Gravity Forms
• Fix - General bug fixes

28.03.2019 version 1.11

• Add - Form title font and padding option for Gravity Forms
• Add - Form description font and padding option for Gravity Forms

21.02.2019 version 1.10

• Fix - Respect Gravity Forms name inline elements

06.02.2019 version 1.9

• Fix - Respect Gravity Forms and Ninja Forms halves, thirds, quarters and inline elements
• Add - Horizontal spacing between inline elements (in px)

23.01.2019 version 1.8

• Fix - Bug fixes with CSS minification

22.01.2019 version 1.7

• Fix - Mixed content warning for custom image on radios/checkboxes

09.01.2019 version 1.6

• Fix - Ninja Form Recaptcha bug fix

20.12.2018 version 1.5

• Fix - Compatibility with MailChimp for WordPress plugin
• Fix - Compatibility with WordPress password protected forms
• Add - Form paragraph text font option
• Add - Form a text font option
• Add - Form a color on hover option
• Add - WooCommerce Lost your password form page

18.12.2018 version 1.4

• Add - Custom image option for radios and checkboxes

14.12.2018 version 1.3

• Add - Display type option (multiple lines or single line) for radio and checkboxes
• Fix - CF7 acceptance checkbox

12.12.2018 version 1.2

• Add - Additional icons for radio and checkboxes
• Fix - WooCommerce State/County select fix

04.12.2018 version 1.1

• Add - 4 new themes
• Add - Skin option in pick your options popup
• Add - Border width (px) option in pick your options popup
• Add - Submit button width select option: 100%, auto or custom width

08.11.2018 version 1.0

• Initial release