Problem with recaptcha working correctly with a contact form 7

Question

I'm currently using wordpress with contact form 7 together with recaptcha on two different kind of pages a customers site we are building.

1. Contact form: https://www.alvestadtanken.se/kontakt/ (working without problem)
2. Variable products without price: https://www.alvestadtanken.se/butik/dieseltankar/stationara-dieseltankar-1300-9000-liter/dieseltank-fm-5000-l/ (recaptcha dosnt load correctly and it wont submit because of missing values)

I have tried several different approaches and have boiled it down to the only difference is that on the page 2 we are loading the contact form 7 after the page is initialized trough a ajax request when the actual value (see pumpalternativ in image below) is choosen in a dropdown menu. What i think is that i need to reload/set the recaptcha after the contact form 7 is loaded, but i dont have any idea how to do this.

    // Displays contact form for variations with no price(0kr) or add to cart button if price exists.
add_filter( 'woocommerce_available_variation', 'empty_and_zero_variation_prices_html', 10, 3);
function empty_and_zero_variation_prices_html( $data, $product, $variation ) {
    if( '0' === $variation->get_price() || '' === $variation->get_price() || 0 == $variation->get_price() ){
        $data['price_html'] = __('<div class="wpcf7-wrapper"><h5 class="text-primary font-weight-bold">Kontakta oss angående produkten</h5> ' . do_shortcode( '[contact-form-7 id="7336" title="Prisförfrågan"]' ) . '</div> ', 'woocommerce');
        $data['is_purchasable'] = false;
    } else {
        $data['price_html'] .= __(do_shortcode( '[add_to_cart_button]' ));
    }
    return $data;
}

All ideas and help are welcome.

Answer 1

The way WordPress works, a shortcode can do more than just render markup in your code. Specifically it can call functions like wp_enqueue_script , which do things like render additional javascript in the footer that often provide code for loading forms added dynamically to a page or preparing Recaptcha.

In short, it's unlikely you're going to be able to easily achieve loading that form dynamically via AJAX. If you're expecting the form to render without any user interaction, then I would consider having the form render in a hidden div and then using your client-side javascript that is currently pulling in the form via AJAX simply set that div to display.

If you must keep your current approach of loading via AJAX, then you'll need to dig into the Contact Form 7 code (or perhaps manual) to see what options you might have either via hooks they provide or a javascript API that will allow you to load it on your own after you've retrieved the markup.