Heads up! SES Pro is retiring. All plugin documentation will remain online for reference purposes. Learn more »

SES Pro makes it easy to make any signup form a lightbox-style popup form. This tutorial explains how it’s done in one step.

Make any form a popup form

To enable a lightbox-style popup effect to any form. Add the enable_popup attribute to the [ses_pro] form shortcode, like so:

[ses_pro enable_popup="300,3000"]

Notes

Although it takes only one step to implement the popup form, there are several things happening worth knowing about.

Width Value

The first number refers to the width of the form, which can be determined by visiting the Form Styles screen. Select a form, click “Style”, and look for .ses-pro { width: 300px; ... }. Use the value of the width property for the first number.

Delay Value

The second number refers to the delay interval, or the amount of time (in milliseconds) that should pass before the form “pops up”. You can experiment with this number to find a suitable delay interval.

Default Closing

Note that the popup will close automatically if the user clicks anywhere outside of it.

Manual Closing

You can also add an explicit “x” (close) button that will close the popup when clicked; to do so, just add the following to the “append” attribute:

{a href='#' class='lightbox-close'}Close{/a}

For example, here is a nice popup form implementation using manual close method (note that default closing still works):

[ses_pro enable_popup="300,3000" append="{a href='#' class='lightbox-close'}Close{/a}"]

That’s all there is to it! Easy peasy :)

Related