Hello, recently I'm working on a pop-up contact form. But when I click submit with no inputs, the page refreshs and the pop-up disappears. After clicking up the pop-up, the verification error shows on top of the form. 

I check with contact form 7, they annouce to have ajax submission and input verification. So this is no doubt to be a bug.

Please fix ASAP.

Thank you!

Hi Kevin,

I have tried switching to Twenty Twenty-Three in troubleshoot mode, and created a new post with adding the contact form 7 shortcode. The outcome is that the contact form works just fine with ajax submission and verification, without refreshing the page.

So the problem seems to lie on the ThemeFTC.

Both the on-page and pop-up contact form share the same problem:

1. https://karo.themeftc.com/elementor/contact-us-04/
2. https://karo.themeftc.com/elementor/pop-up/

Besides, I give you more information that I search from google:

1. https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
2. https://www.narindersingh.in/contact-form-7-ajax-validation-and-submission-are-not-working-with-elementor-popup/

Hope all the information above helps.

Thank you.

Hi Kevin,

Sorry I can't grant you login permission for security issue right now. But I find a way to fix this problem, and I tested it really works.

I put some code snippets to the end of functions.php:

add_action( 'wp_footer', 'prefix_contact_form_custom_js', 100 );
function prefix_contact_form_custom_js() {
?>
<script src="/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.2" id="swv-js"></script>
<script id="contact-form-7-js-extra">
    var wpcf7 = {
        "api": {
            "root": "https:\/\/<?php echo $_SERVER['SERVER_NAME']; ?>\/wp-json\/",
            "namespace": "contact-form-7\/v1"
        },
        "cached": "1"
    };
</script>
<script src="/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.2" id="contact-form-7-js"></script>
<?php
}

Hope this can be helpful for your team and others who search this problem.

Thank you.