-1

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 (for example, 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.

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>