I have a button, which onclick it adds the following css to a DIV:

              $modalForm.animate({
                left: "50%"
              });

In this div tere is a CF7 form. So on click this div appears with the contact form.
The problem is that onsubmit, no matter if there is an error (ie. email address without @) or there is success, after submit the modal closes, probably because the URL changes and #wpcf7-f57238-o2 gets appented to the URL.

How can I make the modal still stay there after submit (no matter what DOM event fires, wpcf7invalid, wpcf7mailsent, wpcf7mailfailed, wpcf7submit, etc).

I have tried different solutions, with and without timeout, such as:

window.addEventListener("DOMContentLoaded", () => {
  const wpcf7ModalDesktopTablet = document.querySelector(
    "#modal"
  );
  const $modalForm = $("#modal-container");
  wpcf7ModalDesktopTablet.addEventListener(
    "wpcf7submit",
    function(event) {
      console.log($modalForm.css("left"));

      setTimeout(function() {
        if ($modalForm.css("left") !== "50%") {
          $modalForm.css({
            left: "50%",
          });
        }
      }, 500);
    },
    false
  );
});

But it doesn’t work. Probably because it refreshes the page.
preventDefault also doesn’t work, because if I add it, the sumit button stops to work.

Please help

EDIT: I found out that for some reason the plugin is not adding the script in the footer. Altough wp_footer is present.
It works if I manually add something like:

                <script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https://mysite.com/wp-json/contact-form-7/v1","namespace":"contact-form-7/v1"},"cached":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='https://contactform7.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'></script>

Any idea?