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

    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(
  const $modalForm = $("#modal-container");
    function(event) {

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

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.


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 type='text/javascript' src='https://contactform7.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'></script>