Support » Plugin: Contact Form 7 » Barba.js wpcf7.initForm() seems to not work

  • Hello,

    Just a heads up, this post is a little long winded as I have tried to eliminate as many possible issues.

    I am trying to initialize a contact form that is pulled in via pjax from the barba.js plugin. Currently the plugin works fine on a static page load. But not in the context of SPA after the DOM is updated.

    From the research I have done everything points back to I should be able to use wpcf7.initForm($form); to reinitialize the form. However, after loading in the contact page that includes the contact form 7 and calling the init; The form will not submit or validate. It acts as if it has not been initialized.

    My first thought was this has to be a plugin conflict. I have tried disabling all other plugins as well as some other libs that could cause conflicts. I do have wp_head and wp_footer in my document. The admin bar is visible on the page if logged in which confirms this. I do see

    <script type="text/javascript" src="//localhost:3000/app/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.1"></script>

    The code I am using to do the above looks like:

    //Init call
        APP.contactFix = () => {
          $('div.wpcf7 > form').each(function () {
            var $form = $(this);
            wpcf7.initForm($form);
            if (wpcf7.cached) {
              wpcf7.refill($form);
            }
          });
        };
    

    I am calling the above in my dispatcher after updating the body tags and checking that the page is indeed the contact page. Which houses the contact 7 form.

     // dispatcher (called on newPageReady State) 
          var getUrl = window.location;
          var getHomeUrl = getUrl.protocol + "//" + getUrl.host;
          Barba.Dispatcher.on("newPageReady", function (
            currentStatus,
            oldStatus,
            container,
            newPageRawHTML
          ) {
            let response = newPageRawHTML.replace(
              /(<\/?)body( .+?)?>/gi,
              "$1notbody$2>",
              newPageRawHTML
            );
            let bodyClasses = $(response)
              .filter("notbody")
              .attr("class");
            $("body").attr("class", bodyClasses);
    
            //fix ajax fetch posts
            if (bodyClasses.includes("blog")) {
              APP.paginate();
            }
            //fix ajax contact form 7
            if (bodyClasses.includes("contact")) {
              APP.contactFix();
            }
    

    There is no errors or indication in the console that anything is broken or not working as intended. I can confirm that the init is being executed but the form does not work. Lastly none of the DOM events fire as well.

    I can however confirm that this is the event and place to be doing these types of updates, as my above APP.paginate() does reinit my buttons for pagination does work.

    Currently I do not have a live link, but I could make one.

Viewing 1 replies (of 1 total)
  • Raymond

    (@crisaba)

    I’m currently working through the same issue with initializing CF7 after Barba’s page transitions. Did you find a fix?

Viewing 1 replies (of 1 total)
  • The topic ‘Barba.js wpcf7.initForm() seems to not work’ is closed to new replies.