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