javascriptphpwordpressrecaptcha

Pop-up window after submitting


I have ACF form to send opinions. Everything works fine, the submit button sends opinon to the server. The problem is that when the user presses the submit button, a pop-up window appears saying: "Leave the page? The changes you made may not be saved." I will mention that after submitting the form, the user actually goes to another subpage (thank you page), but this subpage is on the same domain. Is there any safe way to prevent this window from appearing and redirect user on "thank you page" and still have proper recapcha verification?

JavaScript

function onSubmit(token) {
        document.getElementById("acf_testi").submit();
}

PHP

<main>
        <div class="container testi">
                <div class="wrapp">
                        <div class="content">
                                <?php if( have_posts() ):
                                        while( have_posts() ): the_post();
                                                the_content();
                                        endwhile;
                                endif; ?>
                        </div>
                        <div class="testi-form">
                                <h2>Add opinion</h2>
                                <?php $settings = array(
                                        'post_id' => 'new_post',
                                        'post_title' => false,
                                        'post_content' => false,
                                        'id' => 'acf_testi',
                                        'new_post' => array(
                                                'post_type' => 'testimonials',
                                                'post_status' => 'pending',
                                        ),
                                        'submit_value' => __("Send opinion", 'acf'),
                                        'html_submit_button'  => '<input id="submit-testi" type="submit" class="acf-button button button-primary button-large g-recaptcha" data-sitekey="MY_SITE_KEY" data-callback="onSubmit" data-action="submit" value="%s" />',
                                        'return' => home_url('/thank-you-page/'),
                                );
                                acf_form( $settings ); ?>
                        </div>
                </div>
        </div>
</main>

function.php

/* reCaptcha ACF */
add_filter("acf/pre_save_post", function($post_id) {
    if (!isset($_POST["g-recaptcha-response"])) {
        wp_die("Error reCAPTCHA: Missing tokena.");
    }

    $secret = "MY_SECRET_KEY";
    $response = $_POST["g-recaptcha-response"];
    $remoteip = $_SERVER["REMOTE_ADDR"];

    $url = "https://www.google.com/recaptcha/api/siteverify";
    $data = [
        "secret"   => $secret,
        "response" => $response,
        "remoteip" => $remoteip
    ];

    $options = [
        "http" => [
            "header"  => "Content-type: application/x-www-form-urlencoded\r\n",
            "method"  => "POST",
            "content" => http_build_query($data)
        ]
    ];

    $context  = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    $resultJson = json_decode($result);

    if (!$resultJson->success || $resultJson->score < 0.5) {
        wp_die("Error reCAPTCHA: Verification failed. Please try again.");
    }

    return $post_id;
});

Solution

  • Have you added ACF's header to your page ? If not, add this at the very top : <?php acf_form_head(); ?>. It will load their JS script. Then, change your script :

    <script>
    (function($) {
      $(document).ready(function() {
        acf.unload.active = false;
      });
    })(jQuery);
    function onSubmit(token) {
            document.getElementById("acf_testi").submit();
    }
    </script>