Gravity Forms Styles Pro Documentation (v 2.4) by Warp Lord
Gravity Forms Styles Pro
This is an installation and usage guide. For information beyond the scope of this document and/or support, visit Gravity Forms Styles Pro website: http://gravitystylespro.com/
Installing Gravity Forms Styles Pro
Choosing a Gravity Forms Theme
Styling a form field with Style Selector
Using Styles Pro: Style Selector
Advanced Field and Button Styling
Icons and Images with Radio and Checkbox fields
IMPORTANT: This plugin serves as an add-on for Gravity Forms. You should have Gravity Forms (at least, version 2.0) installed on your WordPress for this add-on to work.
The plugin can be installed just like any other WordPress plugin. The straightforward way is through the Dashboard.
If for some reason you do not wish to use the WordPress dashboard to install the plugin, you can also install using an FTP program. Usually non-technical users are not advised to use this method.
It is highly recommended save settings as soon as the plugin is activated for the first time, or if you’ve just updated it. Do to that, go to Styles Pro Settings page and click on the Update All Settings button.
Once the plugin is activated, your forms settings will have a new page Styles Pro. The first option there, will be to select a theme for the current form. Each Form can have a different theme. You can use forms with more than one themes on the same page as well.
You can go to Form Settings > Styles Pro page from the Form Edit page.
On the Form Settings page, simply choose the theme using the select box and click Update Settings. Styles Pro theme should now be applied to your form.
You can select a Default theme for your site which will be applied to all Forms. By default, it is set to None. So all forms by default will have no theme applied to them. If a theme is selected for a particular form, that form will not use the default theme but the theme selected in the Form Settings.
Default Theme can be set from Styles Pro Settings page under Universal Settings section.
Gravity Forms Styles Pro comes with a GUI based Style Selector for fields, which you can use to easily create a form layout. All built-in Gravity Forms fields are supported.
Styles Selector can be found under Appearance when editing a field.
Style Selector has been designed to be intuitive to use. Usually hovering over an option should be enough to understand it. Please refer to the video for more information.
The following styling options can be chosen for each field.
All styles are responsive. Styles have been written keeping best UX practices in mind. You do not have to do any more settings, Styles Pro should adapt responsively based on the platform.
All themes come with default designs that can be adjusted to fit your needs. The following options are available for all themes.
You can reach the Styles Pro Settings page with any of the following methods:
From the Styles Pro Settings page you can customize all of your themes. Make sure you have the options opened for the theme you want to customize. You can open options for all Styles Pro themes you have installed from the select box on the top.
Select a theme you want to customize from the top. As soon as you select one, you will see the customization options appear for that theme below.
Font: You can choose to use your theme fonts, web-safe fonts, or choose from over 300 Google fonts.
You can also customize: Font size (in any CSS units), Color, Style.
You may also customize margin below the field. Useful when you want to give your forms more breathing space.
Labels: If required, you can choose a different Font for Labels and headings in the Form.
Form background: Some themes come with background images. You can either use them or None based on your preference. You can also use colors (can also have transparency) using the color picker or an image.
If you are using the same Google fonts in your forms as in your WordPress theme, then you might not want to load the fonts again for optimization purposes. You can do that by checking “Do not load this font” in the settings.
Button Colors: These settings will change the text and background color of the form’s Submit, Next and previous buttons.
List highlight background: This settings allows you to change the background color of List and Frame styles when selected.
You can further extend the customization of your field and buttons by unfolding advanced options. The following options will be revealed when you click Show advanced options button, labelled Advanced Field Styling.
These options give you the ability to modify field size and borders. You may also use different border and background color for a focused field. Any option left empty, will inherit previous styling.
Similarly, the following options will be revealed when you click on Show advanced options button, labelled Advanced Button Styling.
The following options gives you the ability to modify the size and borders of your button, and also modify the colors on hover state. Anything you leave blank will inherit previous styling.
Custom CSS: You can write your custom CSS here. If enabled, CSS defined here will be loaded on all pages that load Styles Pro.
Custom Styles Guide
We have made it significantly easy to override the notoriously difficult to override Gravity Forms Styles! A simple guide to using Styles Pro to write your custom styles will be published soon, however, you should find it easy to get started.
To use icons in your forms, you must first enable the iconsets you want to use in form settings (Form settings > Styles Pro.) You can use more than one iconsets on the same form.
To apply icons to fields, click on Field Icon button in the field appearance tab. This will open icon options.
NEW You can also add your own image as an icon for the field. It is advised to consider the image dimensions when using the image as a field icon.
In the icon selector. You can easily look for icons by searching in the textbox at the top. If you have more than one iconset enabled for the form. The search works simultaneously for all iconsets, click on each set to see the options available. You may select a color for your icon.
To add images or icons to Radio or Checkbox options, click on the icon next to the choice.
You can easily customize validation message from Form Settings > Styles Pro. Furthermore, you may choose to show the validation message in a pop-up and also automatically make the form scroll to the first field with error.
Support: https://gravitystylespro.com/support/
Themes: https://gravitystylespro.com/themes/
Custom themes: https://gravitystylespro.com/themes/custom/
Gravity Forms official website: https://gravityforms.com/
For more information, please visit: https://gravitystylespro.com/docs/