Everything you need to build great popups.

Overview

Slick Popup Pro gives you a basic HTML box that you can customize into the popup you want. The plugin has a simple structure, so any developer can understand it and create a great-looking popup. You can create more than one popup on a single web page.

Some of the demo forms provided are Basic Enquiry, Get a Quote, Subscribe, Unsubscribe, Booking and Survey. There is no limit to how many Contact Form 7 forms you can present beautifully with Slick Popup Pro. The plugin uses the latest jQuery and is fully responsive on screens of every size. The admin panel is built with the Redux Framework, and the per-popup options use the Codestar Framework.

How to create a Popup

1. Create a form via Contact Form 7.
2. Go to Global Form Options.
3. Select your Contact Form.
4. Choose on which pages you want to show your popup.
5. Add the popup styles.
6. Click Save Changes and check out your smart, slick and beautiful popup form.

How to create Multiple Popups

1. Create your forms in Contact Form 7.
2. Set up one popup in the Global Form Options.
3. For the second popup, go to Manage Popups and click Add New.
4. Select your Contact Form.
5. Create the popup according to your needs.
6. Click Publish and check out your smart, slick and beautiful popups.

How to create a Login Popup

1. Go to Manage Popups.
2. Add a new popup and select your login form.
3. Style the popup and choose where it should appear.
4. Publish — your login popup is ready.

How to Import the Demo Popups

1. Open the plugin settings.
2. Find the demo import option.
3. Import the demo form you want with one click, then customize it.

How to use Slick Popup Pro in the Text Editor

Switch your editor from Visual to Text and place the shortcode where you want the trigger to appear.

How the Shortcode Works

[sppro id="5"][/sppro]            → SPAN
[sppro id="5" htmltag="a"][/sppro]      → LINK
[sppro id="5" htmltag="button"][/sppro] → BUTTON

Add a text attribute to change the button label, e.g. [sppro id="5" text="Slick Popup" htmltag="button"][/sppro].

How to Activate and Deactivate Slick Popup Pro dynamically

Trigger a popup from any anchor with the loader, or add the class sppro-showpopup to any element:

<a href="javascript:sppro_loader('id')">Click here</a>
<button class="sppro-showpopup">Click me</button>

Available Filters

There are many filters available for Slick Popup Pro. Some of them are:

• sppro_dollar_cf7_id — choose which CF7 form to show on the popup.
• sppro_dollar_side_button_text — add custom side-button text.
• sppro_dollar_choose_layout — add a custom layout to the popup.
• sppro_dollar_popup_load_effect — add a custom load effect to the popup.
• sppro_dollar_popup_unload_effect — add a custom unload effect to the popup.

You can also change the popup curtain (background) from a color to an image, and adjust the transparency of the popup with the transparency control.

Theme Button & Multiple Buttons

To activate Slick Popup on a theme button, give the button the class sppro-showpopup. To assign different popups to different buttons, target each button with its own popup id using the loader, e.g. sppro_loader('2') and sppro_loader('3').