hCaptcha doesn’t load in modal forms

Resolved vispata33
(@vispata33)

8 months, 2 weeks ago
hCaptcha doesn’t load for me in modal forms. If I publish Contact Form 7 in a regular (non-modal) form, everything works fine. But if it’s in a popup, it doesn’t work and displays the following error. Here’s a screenshot.
- This topic was modified 8 months, 2 weeks ago by vispata33.
The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Contributor

kaggdesign

(@kaggdesign)

8 months, 2 weeks ago

Working in popup assumes another initialization sequence, which varies significantly depending on the implementation.

Do you mean problems in the popup “Оставить заявку”? (You forgot to attach the screenshot).

Was it created via wpb popup for contact form 7?

This reply was modified 8 months, 2 weeks ago by kaggdesign.

Moderator

threadi

(@threadi)

8 months, 2 weeks ago

@vispata33: to add a screenshot here in the forum follow these instructions: https://ww.wp.xz.cn/support/forum-user-guide/block-editor/#adding-screenshots

Thread Starter

vispata33

(@vispata33)

8 months, 2 weeks ago

hcaptcha

Yes, it’s WPB Popup for Contact Form 7. All contact forms on the website are created using this plugin, and hCaptcha doesn’t work in any of them.

Plugin Contributor

kaggdesign

(@kaggdesign)

8 months, 2 weeks ago

The WPB Popup plugin is too small. We cannot add support for it in our plugin.

On you site, you can use the following snippet.

add_filter(
		'hcap_print_hcaptcha_scripts',
	static function (): bool {
		if ( ! is_page( 'wpb-popup' ) || ! doing_action( 'wp_print_footer_scripts' ) ) {
			return false;
		}

		$script = <<<HTML
<script>
	jQuery( document ).on( 'ajaxComplete', function( event, xhr, settings ) {
		const params = new URLSearchParams( settings.data );

		if ( params.get( 'action' ) !== 'wpb_pcf_fire_contact_form' ) {
			return;
		}

		window.hCaptchaBindEvents();		
	} );
</script>
HTML;

			echo $script;

			return true;
	}
);

add_action(
	'hcap_protect_form',
	static function ( $value, array $source, $form_id ): bool {
		$value = (bool) $value;

		if ( $source === [ 'contact-form-7/wp-contact-form-7.php' ] ) {
			hcaptcha()->settings()->set( 'honeypot', [ '' ] );
			hcaptcha()->settings()->set( 'set_min_submit_time', [ '' ] );
		}

		return $value;
	},
	20,
	3
);

Instead of is_page( 'wpb-popup' ) please use ID of your homepage: is_page( 754 ).

Kindly let me know if the above snippet works for you.

This reply was modified 8 months, 2 weeks ago by kaggdesign.

Thread Starter

vispata33

(@vispata33)

8 months, 2 weeks ago

Thank you so much for your code! It fixed everything. I only added display on all pages, and now it works perfectly.
You are the best! 💙

add_filter(
    'hcap_print_hcaptcha_scripts',
    static function (): bool {
        if ( ! doing_action( 'wp_print_footer_scripts' ) ) {
            return false;
        }

        $script = <<<HTML
<script>
jQuery(document).on('ajaxComplete', function(event, xhr, settings) {
    const params = new URLSearchParams(settings.data);
    
    if (params.get('action') !== 'wpb_pcf_fire_contact_form') {
        return;
    }

    if (typeof window.hCaptchaBindEvents === 'function') {
        window.hCaptchaBindEvents();
        return;
    }

    if (typeof hcaptcha !== 'undefined' && typeof hcaptcha.render === 'function') {
        jQuery('.h-captcha').each(function() {
            const widgetId = this.getAttribute('data-widget-id');
            if (widgetId) {
                hcaptcha.reset(widgetId);
            } else {
                hcaptcha.render(this);
            }
        });
    }
});
</script>
HTML;

        echo $script;

        return true;
    }
);

Plugin Contributor

kaggdesign

(@kaggdesign)

8 months, 2 weeks ago

Good to know that it helped.

Thank you for your kind review!

This reply was modified 8 months, 2 weeks ago by kaggdesign.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘hCaptcha doesn’t load in modal forms’ is closed to new replies.