Contact Form 7 issue submitting form, AJAX not working

Question

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: https://thewaterblob.com/build-a-blob/

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: https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/

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(#${event.detail.id});
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.