Gravity Forms Supercharge Add-On

By Warp Lord

This is a quick installation and usage guide.
For support and further topics, please visit:
https://gravitysupercharge.com/

Installation

Quick Guide

Embedding in Pages

Form Height

Toggle Full Window Mode (Maximize)

Popups and Isolated Embeds (Shortcode)

Shortcode Parameters

trigger

mode

on_close

Supercharged Forms isolated from the theme styles

Isolated Page Template

Bundles Add-Ons / Modules

Live Merge Tags

Use in other inputs

Isolated Forms in Popups/iframes

Isolated Page Template

Live Merge Tags

Where merge tags work

Enable Live Merge Tags on The Form

Using Live Merge Tags

Merge tags for complex fields

Merge tags for multiple choice fields

Live Merge Tags in Input Fields

Customizing Styles and Themes

Default Color Presets

Percentage bar

Choices

Buttons

Buttons in Strips

Rating field

Button Design

Adding a Splash Screen

Radio/Checkbox Fields Styling

Columns

Styles

Image/icon settings

Island Mode For Fields

Field mode: Normal

Field mode: Island Mode

Form Navigation

Controls Bar Buttons

Under the Field Buttons

Button Icons and Text

Progress Indicators

The Progress

Animation

Free scroll

Scroll sideways

Fade

None

Useful Links

Plugin Website

Complete Documentation

Support

Plugin Author


Installation

Prerequisites: You must have Gravity Forms installed and activated on your WordPress to be able to Supercharge your forms. It is preferred to use the latest version of Gravity Forms, or at least a recent version. Gravity Forms Supercharge is an add-on for Gravity Forms and will not be usable without Gravity Forms.

Just like any WordPress plugin, Gravity Forms Supercharge Add-On can be installed using any of the standard methods. The simplest method is to download the installable plugin directly from CodeCanyon and upload it using the Plugins screen on your WordPress dashboard.

If you’ve downloaded the Main File from CodeCanyon, you’ll have to extract it to your computer before you can upload the plugin that’s bundled inside. The Main File also has (this) documentation bundled with it.


Quick Guide

Gravity Forms Supercharge can be used in a variety of different ways. Where possible, we’ve used common sense default options to minimize the work for most use cases. The number of features included might seem overwhelming to someone who just wants to Supercharge a form quickly. This guide is meant for those looking to quickly Supercharge their first Gravity Form.

  1. Install and activate Gravity Forms Supercharge Add-On
  2. Go to Form Options > Supercharge
  3. Check Enable and click Update Settings

That’s it. Your form should now be Supercharged. Make sure your form doesn’t have any page breaks. Multi-paged forms are not supported at this time.


Embedding in Pages

Gravity Forms that are added to the pages can be Supercharged, simply by checking Enabled on Supercharge settings on your forms. You can use the regular Gravity Forms shortcode or block to embed these forms.

Form Height

Frame height. All Supercharged Forms are framed. You can set the size of your frames from based on your form's requirements. You can also set different heights for different screen sizes, like small screens like mobile phones or medium screens like tablets or larger screen sizes like laptops and computers. You can set the Frame height setting in Form Settings > Supercharge screen.

Full window mode expands the form to take over the whole page.

Toggle Full Window Mode (Maximize)

Using the Regular Embed with Supercharged forms also adds the ability to maximize the form to take over the entire page. Users can click in and out of this mode by clicking on the maximize icon at the top right of the form. From the settings above, it's possible to make forms start out in maximized mode based on screen size. (See Form Height above.)


Popups and Isolated Embeds (Shortcode)

Supercharge comes with a built-in way of placing the forms in a popups. The popups are easy to setup and can be placed anywhere where a shortcode is accepted in WordPress.

The gfsupercharge_embed shortcode.

Here's an example of a simple shortcode embedding a form number 10. (The ID)

[gfsupercharge_embed id="10"]My Supercharged GF[/gfsupercharge_embed]

The shortcode above will create simple text that will trigger the popup when clicked. You can add anything in the content section of the shortcode instead of My Supercharged GF. It can be buttons, images, what have you. The shortcode creates a clickable area that triggers the popup and loads the form inside it when the popup is opened.

Shortcode Parameters

Other than the id, the shortcode takes several parameters.

For example, you can use the following shortcode to pass element selectors other than the clickable area that the shortcode generates. You can ignore it altogether and use only the selectors provided.

trigger

Example: trigger="#menu-buttons-1, .button-form-open"

There's no default value for this parameter.

mode

Three modes of form embedding can be defined. You can either have the form embedded in a popup, or directly on to the page. It's also possible to use a combination of the two, for example by having the form embedded on the page on desktops and on smaller screens, add a trigger text or image that launches the popup.

These are the possible values for the mode parameter:

Adding mode=“popup_embed” will enable both modes. For larger screens, like on the desktop, popup triggers will show, and on screens larger than 900, the form will show embedded directly onto the page. You can change the break point from 900 to whatever size you wish by adding the parameter mode_breakpoint to the shortcode. For example: mode_breakpoint=“768” will put the embed on to all screens that are wider than 768px.

You will also note that the embedded form's height is different to the one that you've set in the form settings for Regular Embed. Those settings do not apply to isolated embeds. But you can easily change the form height by adding the parameter embed_height to the shortcode. Example: embed_height =“650”. The default value is 550.

on_close

Lastly, there's the on_close parameter. This is useful to clean up the page when the popup is closed. When the popup is opened for the first time, the form is loaded on to the page. By default, when the user clicks on the close icon on the popup, the popup is simply hidden, and not removed from the page. Which is the best option for most use cases since removing the form altogether means that the form will open afresh when the popup is opened a second time. But if you're adding more than a couple of popup forms on the page, it can quickly add up.

Here are the possible values for this parameter:

Let's create a shortcode that uses all the possible parameters:

[gfsupercharge_embed id="10" trigger=".popup" mode="popup_embed" mode_breakpoint="850" embed_height="550" on_close="remove"]My Supercharged GF[/gfsupercharge_embed]

Supercharged Forms isolated from the theme styles

When dealing with style conflicts within forms from other themes and plugins, it's best to isolate the form form the entire theme. The simplest way to deal with a situation like this is to simply use the embed option by using gfsupercharge_embed shortcode. Here's an example:

[gfsupercharge_embed id="10" mode="embed" embed_height="550" on_close="remove"]My Supercharged GF[/gfsupercharge_embed]


Isolated Page Template

Enabling this module adds a new Page Template to your WordPress called GF Supercharge Only. You can set this template to your any page on your WordPress, make sure you place nothing but 1 Gravity Forms' shortcode or block.

This mode is best used for survey type forms. This page will not load any of the theme's stylesheets or scripts. So the chances of getting the site's header, footer or other thing would not get in the way, all the while making the page much very light by not loading anything but the form and Supercharge assets. Beware that your analytics and other scripts will also not work on this page, as regular WordPress header and footer are not loaded in this template. You can learn about how to add analytics and additional styles to this template here.


Bundles Add-Ons / Modules

Bundled Modules and Add-ons can be activated from Supercharge screen found in the Gravity Forms's Forms admin menu.

Live Merge Tags

This module enables another Gravity Forms Add-On by Warp Lord that is bundled within Supercharge Add-On plugin. It allows you to use data users have entered on the form, while they're on the form. As soon as a field that is used in a merge tag is updated, the merge tags used all over the form update their values as well.

We’ve bundled our Live Merge Tags add-on within Supercharge because we felt Supercharged forms without live data may just feel in complete. That means that you do not have to buy it to add it to the experience. You can enable it simply by going to the Supercharge Settings page and enabling it from the Modules list. Once the module is Enabled it can be activated for the forms on a per form basis, from the Form Settings page.

Use in other inputs

You can also use merge tags as default values for other fields.

Isolated Forms in Popups/iframes

This module enables you to isolate the Supercharged forms in iframes. You can directly embed those iframes to the page instead of the form or open them in popups. Details here.

Isolated Page Template

Enabling this module adds a new Page Template to your WordPress called GF Supercharge Fullscreen. You can set this template to your any page on your WordPress, make sure you place nothing but 1 Gravity Forms’ shortcode or block.

This mode is best used for survey type forms. This page will not load any of the theme’s stylesheets or scripts. So the chances of getting the site’s header, footer or other thing would not get in the way, all the while making the page much very light by not loading anything but the form and Supercharge assets. Beware that your analytics and other scripts will also not work on this page, as regular WordPress header and footer are not loaded in this template. You can learn about how to add analytics and additional styles to this template here.


Live Merge Tags

This module enables another Gravity Forms Add-On by Warp Lord that is bundled within Supercharge Add-On plugin. It allows you to use data users have entered on the form, while they're on the form. As soon as a field that is used in a merge tag is updated, the merge tags used all over the form update their values as well.

Where merge tags work

Enable Live Merge Tags on The Form

In order to use Live Merge Tags, please make sure that you have the module enabled from Supercharge Settings page.

Once the module is Enabled it can be activated for the forms on a per form basis, from the Form Settings page.

Using Live Merge Tags

For ease of use, Live Merge Tags follow the same structure that regular Gravity Forms merge tags use. For the uninitiated, here's a description about how to use them.

Here's the pattern:

{Field Name:ID}

Consider the following example, where the field Client Name, which is a text field with an ID 4.

{Client Name:4}

The Field Name field doesn't have to match the field's label, but it's good to keep it the same or very similar so it's easier to understand where it's coming from when you get back to it later. {:4} would work just as well.

Merge tags for complex fields

You may also use user inputs from complex fields. Like, name (with multiple fields), address etc., via complex fields. Simply add the complex field's ID after a dot with the field ID.

The complex field's IDs are not always intuitive though. In the following example, we'll use the first and the last name from this the Name field.

Welcome {Name Last:12.2} {Name Last:12.6}, I've always loved the name {Name First:12.3}. It's a pleasure to meet you.

Here: 12.2 is the Prefix field, 12.6 is the last name and 12.3 is the first name from the same complex Name field. You can find the sub-field's ID by looking at the markup.

The above example would display unique messages to different users based on the information received in the Name field.

Merge tags for multiple choice fields

Merge Tags for multiple choice fields, like Radio buttons, Checkboxes and Drop Downs work just just like they do for text based fields. The only difference being that here that instead of the underlying value of the choice selected, the label of that choice is shown, as for visual purposes it makes more sense. Since the value for the field could be in come cases quite different to its label.

In case of checkboxes, the choices are shown comma separated.

Live Merge Tags in Input Fields

Other than using merge tags in labels and field descriptions, you may also use Live Merge Tags the exact same way mentioned as above as Default values for the fields.

If a field has a merge tag inside it's default field. It'll update as soon as the field, which is referenced in the merge tag is updated. But that if the user makes a make a change to the target field (change the default value to something they prefer) Live Merge Tags will detect it and stop changing the field when the referenced fields are updated after that. So the users will not unknowingly change the value of the field by changing the reference.

When using on Supercharged forms, the fields will behave as “changed” if the user presses next on the field.

Please note that the version of the add-on bundled with Supercharge, though works with Supercharge as intended, it is not advised to use it outside of Gravity Supercharge.


Customizing Styles and Themes

You can customize the styles of your Supercharged forms from Supercharge Settings page. We have included an extensive theming system, that allows you to create themes with a single click and use them on multiple forms at once. If you do not wish to use themes, simply make changes to the Default theme. Those are the default styles for all forms, unless you change them.

You can find these settings in your WordPress dashboard menu for Gravity Forms. Under Forms > Settings > Supercharge. Or use the shortcut added in Form Settings (besides theme selection drop down.)

Before you make changes, select the theme you want to customize.

The purpose of adding Default colors to customize the themes is to significantly reduce the time to spread your chosen colors across your theme with different options. You can choose the Primary, Secondary, Contrast (to secondary) and the Bar color only, and your theme should adapt. You can also choose 2 fonts that you want use throughout the theme. Furthermore, you will also see how these colors spread out in your theme's style options, and you can swap any color with the other or a custom color of your choosing for any given option. For the most part, these options should take care of most of the design, you can play around with these to find your look then start to fine tune your theme using the advanced options below.

In the Theme Customization options, you're able to set styles in details field labels, description and fields themselves. You do not have to set all the options, but if you want you can drill down into specifics, for example, you might want to distinguish, size, color and font of the description and align it to the center. Similar options can be revealed for labels as well. The buttons and input fields contain more options.

Default Color Presets

Primary color:

The secondary color is mostly used to highlight the choices, percentage bar and buttons.

Percentage bar

Choices

The colors for the choices (radio/checkbox etc) are adapted colors. They are also based on the base colors. Here's a breakdown:

When Checked:

Buttons

Focused:

Buttons in Strips

Focused:

Rating field


Button Design

Buttons are a very important visual feature of Supercharged forms. We've worked extra hard to give you a much better time customizing them. The live updating visual aid comes in very handy when customizing Advanced button styling options.

The default colors that are based on your chosen theme colors can all be overridden. You can either choose from one of the other presets or use a customized color from the color picker.

Here's are some useful tricks:


Adding a Splash Screen

Splash screens can be added to the forms by way of adding a Splash field to the top of the form.

When the very first field in the form is a Splash field, form navigation in the header and footer of the form will stay hidden until. Once the user clicks on the button on the Splash screen, the navigation will start to show.

Splash fields used in any other position will behave as HTML fields. They will show as expected, but the header and footer will not be hide, since the form has already started.

Along with a Splash Image, you can add any HTML content and WordPress shortcodes to add to this field.

The Splash field has 2 simple layout options, along with the ability to add HTML Content, so it gives you free reign over it.


Radio/Checkbox Fields Styling

Using the Style Selector, you can display your options in a number of different ways.

Columns

Column options can be especially useful when using icons or images in your choices. You can save a lot of space and, better the user experience by displaying your options in columns. You can choose from 1 to 6 columns, or use automatic (based on the width of the text and/or image of the option. The fields automatically adjust for smaller screens, for example, 6 columns turn into 3 on medium sized screens and into 2 on smaller screen. Likewise, 3 columns turn into 2 on medium sized screens and 1 on very small screens. If you want to keep the columns on smaller screens you can use the Ignore Screen Breakpoint options.

Styles

There are 7 different styles you can choose. Furthermore, you can also display the options in a column-like look.

Note, that all the styles are compatible with fields with text alone, or added icons or images.

Image/icon settings

You can use these options to fine-tune the ornaments in your options. The options here allow swapping the position between text and image and adjusting the size of the ornament in the container.


Island Mode For Fields

This mode shows each field in it’s own wrapper. A popular style to add card/slide like feel to the form.

The background of the island can be set from the Theme Customization options.

Field mode: Normal

Field mode: Island Mode

 


Form Navigation

Form navigation behavior and placement can be configured from the Form Settings > Supercharge page.

Navigation controls can be added right under the fields, in the Controls Bar, or in a combination of the two. Use the Show Controls drop down to change how you want it to appear in your form.

Field and form navigation settings

Controls Bar Buttons

A top and/or bottom bar will be added to the form if any of the features that are added to it are activated. Like progress bars or buttons.

The controls bar buttons currently can be placed in 7 seven different ways. All options are represented with text and icons.

Under the Field Buttons

These buttons show immediately under the field. You can change the position and text of the buttons from these options.

The Strip styles look differently to regular buttons, these work very well with Island Mode For Fields.

The Previous button can be optionally hidden from under the field. It's useful when you want to add just the Next button with the field without crowding it because you have the previous button in the Bar. Hiding the Previous button options is only available when Bar Controls are also enabled.

Button Icons and Text

The navigation buttons can have text, icons or both at the same time. We've included directional icons in different styles for you to choose from out of the box. You can also use custom icons in the buttons.


Progress Indicators

Progress bars can be added from Form Settings > Supercharge screen.

You can change the style and placement of the progress bars from the Progress Indicator option.

Progress indicators

The Progress

The progress indicator shows the progression of the form, or where you are in the form, not the completion of the fields. That means, if a user skips some fields and reaches the Submit field, the bar would be at 100%.

The progress indicator also automatically adjusts itself as conditionally hidden and shown fields change state.


Animation

You can change the animation type (or remove it) from Form Settings > Supercharge.

The following animations are currently available, with more on the way.

Free scroll

This one allows for free scrolling between the fields. The fields are automatically activated based on which field is visible on the screen at the time. That means, that clicking the Next button will continue the form from the current field and would not go back automatically to a field that was left empty before.

Scroll sideways

As the name suggests, this animation style moves from left to right. Free scrolling is not available with this type of animation. As only one field at a time can be visible.

Fade

This animation style fades the previous field to make the next field visible. Free scrolling is not available with this type of animation. As only one field at a time can be visible.

None

No animation is used. As soon as the next or previous button is pressed, the field instantly changes to the next activated field.


Useful Links

Plugin Website

https://gravitysupercharge.com/

Complete Documentation

https://gravitysupercharge.com/docs/

Support

https://gravitysupercharge.com/support/

Plugin Author

https://gravitysupercharge.com/author/