CF7 make form not close the modal – how to?


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 (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(
  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.

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":"","namespace":"contact-form-7/v1"},"cached":"1"};
/* ]]> */
<script type='text/javascript' src=''></script>

Any idea?

, Pikk 3 years 2020-03-26T08:50:56-05:00 0 Answers 77 views 0

Leave an answer