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 onto 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:

• popup (default)
• embed
• popup_embed

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 on to 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:

• hide (default)
• remove

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]