Ecommerce Shopify WordPress Discussion

Contact Form 7 issue submitting form, AJAX not working

I'm having an issue with a form that was created by another developer some time ago. When asked to implement a redirect upon form submission, I noticed that the form is no longer submitting correctly in the first place. Here is the website: When you click the submit buttons on the final page of this form, the screen reloads with #wpcf7-f442-o1 tacked on to the end of the URL. From what I've gathered so far, this means the form is not submitting using AJAX. Luckily, for now, the client is receiving emails when a customer fills out the form, but it is not working as intended. Ideally it would behave like the example here: However, I'm not sure what would conflict or cause the JavaScript not to load. I saw responses that involved the functions wp_head() and wp_footer(), in header.php and footer.php, but I don't see those functions referenced anywhere. The page uses .twig templates, and I'm not sure if there is an equivalent there for enqueueing JavaScript. I'm not sure what files would be most helpful for finding the problem, whether it's msco_buildablob.php, or the app.ts file. I have tried putting in some console.log statements to see where things stop working in app.ts. Under methods:{} for the component, there is one relating to form submission. submitForm(event: Event) { // Disable form submit buttons and show a spinner or something let submitBtns = jQuery("form [type=submit]"); submitBtns.each(function (this) { let btn = jQuery(this); btn.prop("disabled", true); }); jQuery("form.wpcf7-form").trigger("submit"); }, There is also one called populateCf7Form() which appears to be working, because I see a POST request after submitting that includes: _wpcf7: 442 _wpcf7_version: 5.8.4 _wpcf7_locale: en_US _wpcf7_unit_tag: wpcf7-f442-o1 _wpcf7_container_post: 0 _wpcf7_posted_data_hash: and the expected data for a water blob product request. Finally, there is a method called mounted(), where I have been experiencing issues. I’m trying to console.log several places within the method to troubleshoot, and functions within it, and I’m not even reaching some of the code. Here’s how it currently looks. mounted() { console.log("Blob confirm page mounted"); this.$nextTick(this.populateCf7Form); let self = this; // Check if .wpcf7 element exists if (jQuery(".wpcf7").length) { console.log("wpcf7 element non-zero, so it exists"); console.log("Length: " + jQuery(".wpcf7").length); } else { console.log("wpcf7 element has no length, so it doesn't exist"); } //Global event listener jQuery(document).on('wpcf7mailsent', function () { console.log('Global wpcf7mailsent event triggered'); }); // wpcf7 event listeners jQuery(".wpcf7").on("wpcf7invalid", function (event) { // if (event.detail == undefined) return; // @ts-ignore let cf7container = jQuery(#${}); let tips = cf7container.find(".wpcf7-not-valid-tip"); // Notify user of the failed fields promting them to fix them. tips.each(function () { alert(jQuery(this).text()); }); }); jQuery(".wpcf7").on("wpcf7spam", function (event) { alert("Spam detected. Mail not sent."); }); console.log("Script loaded (which should appear same time as Blob confirm page mounted so it isn't actually that helpful)") jQuery(".wpcf7").on("wpcf7mailsent", function (event) { console.log("Mail sent event triggered"); // Dont alert on page leave jQuery(window).off("beforeunload"); jQuery(window).off("unload"); // Redirect to complete page window.location.replace(self.redirect); }); jQuery(".wpcf7").on("wpcf7mailfailed", function (event) { alert("Failed to send mail. See console log for details."); console.log(event); }); jQuery(".wpcf7").on("wpcf7submit", function (event) { event.preventDefault(); console.log("Submit event triggered"); // Disable form submit buttons and show a spinner or something let submitBtns = jQuery("form [type=submit]"); submitBtns.each(function (this) { let btn = jQuery(this); btn.prop("disabled", true); // btn.prop("disabled", false); }); console.log("Form submitted, buttons disabled"); }); jQuery(document).ajaxComplete(function () { console.log("AjaxComplete event triggered"); let submitBtns = jQuery("form [type=submit]"); submitBtns.each(function () { let btn = jQuery(this); btn.prop("disabled", false); }); console.log("Ajax request complete, buttons enabled."); }); }, I get "Blob confirm page mounted" to print when the page loads, along with "wpcf7 element exists", but none of the console.logs within any "jQuery(".wpcf7").on " print to the console before the page refreshes when you submit. There is also the issue where the "Leave page without saving?" alert pops up when submitting the form, because the jQuery(window).off("beforeunload"); is not being reached as well. I don't know how to identify where the precise issue breaking things is, whether it's a conflicting plugin, a theme issue, or a problem with the custom plugin code. I'm not seeing errors in the console, nor sure there's anything useful in the Network tab as the screen refreshes so fast. I've disabled all plugins but 1 which would otherwise break the site, and i've tried a separate theme and was still getting the issue.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.