Using WS Form with Pop-Ups

When using WS Form inside a pop-up, the form may not render. WS Form renders client-side. On page load, it reads each <form> tag, checks the data-id, then builds the form in the browser using wsf_form_init().

Why WS Form Renders Client-Side

  • Performance
    Client-side rendering reduces server work. Pages stay light because only a minimal <form> placeholder is sent. The browser builds the full form.
  • Security
    The full form HTML is not in the page source. This makes automated scraping and basic bot attacks harder.

Why This Affects Pop-ups

If the pop-up’s content is injected only when opened, the form does not exist in the DOM during the initial page load. The automatic call to wsf_form_init() on page load will miss it. You must call wsf_form_init() after the pop-up opens and the form markup is present.

Solution

Call wsf_form_init() when the pop-up has opened and rendered its content. Most pop-up systems expose an event you can hook into.

Important: Ensure the form exists in the DOM before calling wsf_form_init().

Ready-To-Use Examples

Bricks Popups

// Regular Bricks popups: run when a popup opens
document.addEventListener('bricks/popup/open', function (event) {
  wsf_form_init();
});

// Optional: scope to a specific popup by ID
// if (event.detail.popupId === 3321) { wsf_form_init(); }

// AJAX popups: run after Bricks injects loaded content
document.addEventListener('bricks/ajax/popup/loaded', function (event) {
  wsf_form_init();
});

Elementor Pro Popups

jQuery(document).on('elementor/popup/show', function(event, id, instance) {
    wsf_form_init();
});

Popup Maker (WordPress plugin)

jQuery(document).on('pumAfterOpen', function(event, popup) {
    wsf_form_init();
});

Bootstrap Modal (v4 or v5)

jQuery(document).on('shown.bs.modal', '.modal', function (e) {
    wsf_form_init();
});

Fancybox 3

jQuery(document).on('afterShow.fb', function(e, instance, slide) {
    wsf_form_init();
});

Troubleshooting Checklist

  • If you inject content via AJAX, use the plugin’s “content added” or “shown” event rather than a generic click.
  • If multiple pop-ups can open, keep the event delegation approach shown above so all instances are handled.