Last active
April 16, 2026 11:33
-
-
Save estevan-ulian/3c033b453f49195048b1cdb195e920da to your computer and use it in GitHub Desktop.
This code snippet ensures that the CF7 form is always initialized in popups created with Elementor. If Turnstile is implemented, it will also work correctly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action('wp_footer', 'fix_elementor_popup'); | |
| function fix_elementor_popup() { | |
| ?> | |
| <script> | |
| jQuery(window).load(function () { | |
| jQuery.each(elementorFrontend.documentsManager.documents, (id, elementorDoc) => { | |
| if (elementorDoc.getModal) { | |
| elementorDoc.getModal().on('show', () => { | |
| // REQUIRED | |
| // Re-initialize Contact Form 7 when the modal is shown | |
| jQuery(".wpcf7 > form").each(function () { | |
| wpcf7.init(this); | |
| }); | |
| // OPTIONAL | |
| // Check if turnstile is defined before trying to reset or render it | |
| if (typeof turnstile === 'undefined') { | |
| console.warn("turnstile is not defined!"); | |
| return; | |
| } | |
| // REQUIRED if you have Turnstile on the page, you need to reset or render it when the modal is shown | |
| // Reset or render Turnstile for each element with the class 'cf-turnstile' | |
| // Implementation with https://br.wordpress.org/plugins/simple-cloudflare-turnstile/ | |
| jQuery('.cf-turnstile').each(function (i, el) { | |
| var widgetId = el.dataset.cfTurnstileWidgetId; | |
| if (widgetId) { | |
| console.log('reseting current turnstile widget ', widgetId); | |
| turnstile.reset(widgetId); | |
| } else { | |
| el.innerHTML = ''; | |
| turnstile.render(el, { | |
| sitekey: el.dataset.sitekey, | |
| callback: window[el.dataset.callback] || function () { }, | |
| theme: el.dataset.theme, | |
| language: el.dataset.language, | |
| size: el.dataset.size, | |
| appearance: el.dataset.appearance, | |
| }); | |
| } | |
| }); | |
| }); | |
| } else { | |
| console.warn('elementorDoc.getModal is not defined!') | |
| } | |
| }); | |
| }); | |
| </script> | |
| <?php | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment