Gravity Forms Popups v1.0.14

Gravity Forms Popups Pop your forms in style. Target and trigger with precision. What does it do? GP Popups lets you turn Gravity Forms into flexible, customizable popups that appear wherever and whenever they make sense. Create and manage popups with full control over appearance, behavior, and triggers. Advanced targeting rules help you decide exactly where popups show up, while built-in analytics and debugging tools let you test, refine the experience, and keep your popup magic working as expected. With GP Popups, you can create: First-time visitor email promos Newsletter signup prompts Flash sale ads Non-disruptive inline forms (e.g. calculator) Waitlist registration CTAs On-page checkout forms Free download prompts Event registrations And many more! See it in action! Click each button to see the different display modes. We’ve spiced these up to show GP Popups full potential. This perk supports all types of triggers but for the sake of demonstration, it’s hard to beat a button. Submitting any of these popups will subscribe you to our newsletter. Features Turn any Gravity Form into a popup. Launch beautiful, flexible form popups in minutes. Swap forms anytime—no rebuilding required. Design popups that feel native to your site. Fine-tune position, animation, size, and styling so your popups blend in—or stand out. Trigger popups exactly when it matters. Open popups on click, scroll, exit intent, timers, or other precisely timed moments. Show the right popup in the right place. Control exactly where and when popups appear using powerful page-level targeting rules. Measure what’s working (and what’s not). Track popup performance with built-in analytics to optimize engagement and conversions. Debug with confidence before you go live. Preview launches, inspect cookies, and troubleshoot behavior with the GP Popups Debugger. Automatic updates. Get updates and the latest features right in your dashboard. Legendary support. We’re here to help! And we mean it. Documentation How do I enable this functionality?Feature Details Popup Triggers Delay. Button/Click. Exit Intent. Scroll Depth. Popup Display Popup Mode SizeBackdropAnimationClose BehaviorAppearanceAdvancedFullscreen Size. Animation. Close BehaviorAppearanceAdvancedCorner SizePositionBackdropAnimationClose BehaviorAppearanceAdvancedBanner SizePositionAnimationClose BehaviorAppearanceAdvancedCookie Settings. Page Targeting Content. URL & Navigation. User & Authentication. Device & Browser. Time & ScheduleAdvancedCustom JavaScriptTraffic Percentage. Analytics. One-Click Popup Embeds. Styling PopupsIntegrations GP Email ValidatorGravity Connect. Snippets. Developer’s NotesTroubleshooting Issues. FAQ Why are popup feeds separate from the form?TranslationsHooksRelated Resources How do I enable this functionality? After installing and activating GP Popups, Gravity Forms popups can be created via GP Popups feeds. Let’s step through that process: Navigate to Forms › Popups on the left WordPress bar. Add a new feed by clicking on Add New. Choose which form to display in the popup. Configure the popup’s appearance and behavior. Feature Details Popup Triggers Popups can be triggered based on different user actions or by how long they’ve been on a page. GP Popups offers four built-in ways to do so: Delay Button/Click Exit Intent Scroll Depth You can also control the popup programmatically via JavaScript. Delay The popup opens automatically after a specified amount of time. In the Delay setting, you can set how many seconds/milliseconds the user needs to be on a page before the popup appears. To switch between seconds and milliseconds, click on the unit. Button/Click The popup opens when the user clicks on a specified element. Multiple elements can be triggers at the same time. In the CSS Selector setting, you can specify which elements trigger the popup. Enter the CSS selector for the element(s) that should trigger the popup (e.g., .open-popup, #popup-trigger). Exit Intent The popup opens when the user’s cursor gets close to the top of the page. In the Sensitivity setting, you can define the threshold of how many pixels from the top the cursor needs to be to trigger the popup. Scroll Depth The popup appears once the user scrolls to a certain depth. In the Scroll Depth settings, you can define how much, in pixels or percentage, the user needs to scroll before the popup appears. To switch between pixels and percentage, click on the unit. Popup Display Everything related to the popup’s appearance can be edited in the Display Settings, from where it’s displayed in the page to how it looks. All settings are based on the Display Mode. Popup Mode The popup is displayed in the conventional popup display: in the center of the page with a backdrop overlay. Size Set the popup’s width and height. Supports pixels, percentage, vh, and vw. Auto setting is also available where width and/or height will automatically adjust to fit the content. Backdrop Define the backdrop color and transparency by using the color picker or entering RGBa values manually. Additionally, you can add a blur effect to the content behind the backdrop. Animation Choose the animation for how the popup will appear and disappear between fade, slide, and scale. Close Behavior Choose all the ways the popup can be closed, including: Close on backdrop click Close on ESC key Show close button Auto-close on submission You can combine multiple close behaviors. You can also add a dismiss link with custom text under Appearance. Appearance Customize the popup’s appearance directly using code. Use the CSS tab to style the popup content and the HTML tab to customize the layout around your form. Available HTML Merge Tags: {form}: Displays the form. (Required) {form_title}: Displays the form title. {dismiss_link}: Adds a link to dismiss the popup. You can specify the link text using the :text[] modifier (e.g. “No Thanks”). Available HTML Shortcodes: [hide_if_submitted]: Hides content inside shortcode after valid form submission. [show_if_submitted]: Shows content inside shortcode after valid form submission. include_failed="true": Optional parameter that makes content show/hide even if the submission fails validation. Example HTML:

FREE 2026
Growth
Playbook [hide_if_submitted include_failed="true"]

Free Download

The 2026 Growth Playbook

• 47 proven strategies for scaling
• Real case studies from 7-figure brands
• Actionable templates included

[/hide_if_submitted] {form}

🔒 We respect your privacy. Unsubscribe anytime.

Advanced Customize the popup appearance with CSS classes. Control the stacking order of the popup via z-index. Fullscreen The popup is displayed as a full page overlay. Size Set the content’s width within the popup. Supports full width, pixels, percentage, vh, and vw. Animation Choose the animation for how the popup will appear and disappear between fade and slide. Close Behavior The Close Behavior settings for Fullscreen mode are the same for all display modes and is documented here. Appearance The Appearance settings for Fullscreen mode are the same for all display modes and is documented here. Advanced The Advanced settings for Fullscreen mode are the same for all display modes and is documented here. Corner The popup is displayed in the selected corner of the page. Size Set the popup’s width and height. Supports pixels, percentage, vh, and vw. Auto setting is also available where width and/or height will automatically adjust to fit the content. Position Select which corner of the screen the popup will appear in. Backdrop Define the backdrop color and transparency by using the color picker or entering RGBa values manually. Additionally, you can add a blur effect to the content behind the backdrop. Animation Choose the animation for how the popup will appear and disappear between fade, slide, and scale. Close Behavior The Close Behavior settings for Corner mode are the same for all display modes and is documented here. Appearance The Appearance settings for Corner mode are the same for all display modes and is documented here. Advanced The Advanced settings for Corner mode are the same for all display modes and is documented here. Banner The popup is displayed as a banner either in the top or the bottom of the page. Size Set the size of the inner width and the height. Supports pixels, percentage, vh, and vw. Full width and auto height settings are also available. Position Select whether the banner appears at the top or bottom of the screen. Animation Choose the animation for how the popup will appear and disappear between fade and slide. Close Behavior The Close Behavior settings for Banner mode are the same for all display modes and is documented here. Appearance The Appearance settings for Banner mode are the same for all display modes and is documented here. Advanced The Advanced settings for Banner mode are the same for all display modes and is documented here. Cookie Settings GP Popups can remember when a user dismisses a popup by storing it in a cookie. You control whether that dismissal lasts for a set number of days or only for the current session. You can also share the dismissal state by giving the cookie a custom name and using it in multiple popups. Leave this option empty to use the default (unique cookie per popup). Page Targeting GP Popups has extensive page targeting rules. These rules define in what circumstances a popup is assigned to a given page. Rule types have their own operators, can be added multiple times, and can be in multiple groups. Groups support interchangeable and/or conditional logic an can be given custom names. Popups without targeting rules may appear in any page at any time after their trigger is set off. Rules can be built based on: Content ConditionTargetsOperatorsNotesSpecific Posts. Individual postsis / is not. Supports selecting one or more posts. Content Type. Post typeis / is not—Archive Type. Archive viewsis / is not—Taxonomy Term. Taxonomy termshas / does not have. Matches any post with selected terms. Post Attribute. Post propertiesis / is not, contains / does not contain, exists / does not exist. Examples: Paginated, Has Parent. Post Type. Post typeis / is not— URL & Navigation ConditionTargetsOperatorsNotesURL Contains. Full URLcontains / does not contain. Can be case sensitive. URL Pattern (Regex)Full URLregex match. Can be case sensitive. URL Path. URL pathexact match. Example: /about-us/Query Parameter. URL parametersis / is not, contains / does not contain, exists / does not exist. Targets specific query keysReferrerReferring websiteis / is not, contains / does not contain. Can be case sensitive Additional details URL Contains, URL Pattern, and URL Path rules include a Test Pattern option so you can preview which URLs will match your settings. User & Authentication ConditionTargetsOperatorsNotesUser RoleUser rolesis / is not. Supports selecting multiple rolesLogin StatusAuthentication stateisLogged in or logged out Device & Browser ConditionTargetsOperatorsNotesDevice TypeDevice categoryis / is notDesktop, tablet, mobileBrowserWeb browseris / is not—Operating SystemOperating systemis / is not— Time & Schedule ConditionTargetsOperatorsNotesTime of DayTime rangebetweenTimezone selectableDay of WeekDaysis / is not—Date RangeDates and timesbetweenOptional time range Additional details Time-based rules can be evaluated using the visitor’s timezone, the site’s timezone, or UTC. Advanced ConditionTargetsOperatorsNotesCookieBrowser cookiesis / is not, contains / does not contain, exists / does not exist. Targets cookie name and valueCustom JavaScriptJavaScript expressioncustomMust return true or falseTraffic PercentageVisitor bucket (1–100)rangeUsed for A/B testing Custom JavaScript Write a custom JavaScript condition that returns true or false. This code runs on the frontend and allows for advanced targeting logic beyond built-in conditions. Traffic Percentage GP Popups assigns each visitor a random number from 1–100. Define a range to control which visitors match the condition. Example Variant A: 1–50 Variant B: 51–100 Use non-overlapping ranges for predictable A/B testing behavior. Analytics Each GP Popups feed has its own analytics data. Use these metrics to examine the performance of a popup. One-Click Popup Embeds If you’re working with a form and would like to create a popup for that form, there is a shortcut in the form editor’s Embed menu. Click Embed to reveal all embed options, then click Create Popup to create a new popup feed. The current form will be automatically selected. Styling Popups We built GP Popups for nerds but even if you don’t know HTML or CSS, your favorite AI tool does and can whip up brilliant popup designs in seconds. Here’s a powerful prompt that you can feed to your AI chatbot of choice. Then just describe the design you’re looking for. If you want examples of what AI has cooked up for us, see our demos above. GP Popups AI Designer Prompt # GP Popups Template Generator - System Prompt Copy everything below this line and paste it as a system prompt / custom instructions to your AI assistant. Then you can simply request templates in natural language. --- You are an expert at creating custom templates for **GP Popups**, a WordPress plugin by Gravity Perks that displays Gravity Forms in flexible popups. ## TECHNICAL CONTEXT **How GP Popups Works:** - Popups can be displayed in multiple modes: Popup (center modal), Fullscreen, Corner, or Banner (top/bottom) - Users customize via the Appearance settings in GP Popups feeds: 1. **HTML Template** — Wrapper markup around the form 2. **CSS** — Custom styles for the popup content **Available Merge Tags for HTML Template:** - `{form}` — **REQUIRED** placeholder where the Gravity Form renders - `{form_title}` — The form's title - `{dismiss_link}` — Adds a dismissal link (supports `:text[]` modifier, e.g., `{dismiss_link:text[No thanks]}`) - Any standard Gravity Forms merge tags (e.g., `{admin_email}`, `{user:display_name}`) **Available Shortcodes for HTML Template:** - `[hide_if_submitted]...[/hide_if_submitted]` — Hides content after successful form submission - `[show_if_submitted]...[/show_if_submitted]` — Shows content after successful form submission - Both shortcodes support `include_failed="true"` parameter to show/hide even if submission fails validation **Example using shortcodes:** ```html [hide_if_submitted include_failed="true"]

Get Your Free Guide

Download our comprehensive playbook

[/hide_if_submitted] {form} [show_if_submitted]

Thanks! Check your email for the download link.

[/show_if_submitted] ``` **Gravity Forms CSS Classes to Target:** Core classes: - `.gform_wrapper` — Main form container - `.gform_heading` — Default form title/description wrapper - `.gform_body` — Form body container - `.gform_fields` — Fields container - `.gfield` — Individual field wrapper - `.gfield_label` / `.gform-field-label` — Field labels - `.gfield_required` — Required asterisk - `.ginput_container` — Input field wrapper - `.gfield_description` — Field description text Choice fields: - `.gchoice` — Checkbox/radio choice wrapper - `.gfield-choice-input` — Checkbox/radio inputs Form controls: - `.gform_footer` / `.gform-footer` — Form footer area - `.gform_button` / `.gform-button` / `input[type="submit"]` — Submit button Validation: - `.gfield_error` — Validation error state on field - `.validation_message` — Error message text - `.gform_confirmation_message` — Success message after submission Multi-page: - `.gf_progressbar` — Progress bar container - `.gf_progressbar_percentage` — Progress bar fill **Sample Form HTML Structure:** ```html