Contactform 7: Issue with refreshing

[overtref]

Hello community,

I've got a problem with my own website http://www.overtref.nl/. I'm building an interactive "Start Project" http://overtref.nl/start-project/ in combination with contact form 7 and SmoothState.js.

Step 1 : Grafisch ontwerp Step 2 : Restyle huidige huisstijl Step 3 : Submit the form

After submitting the Contact form 7 the AJAX script conflicts and my page starts reloading. If i disable my SmoothState script it wont reload my page and the AJAX script of contact form 7 wont conflict.

I've been searching the whole forum for a solution but it wont work for me. Is there a possibility to let it work. So i can run SmoothState and Contact form 7 like brothers.

My SmoothState script below

$(function() {
        var $page = $('#main'),
        options = {
        prefetch: true,
        pageCacheSize: 4,
        // blacklist anything you dont want targeted
         blacklist: '.no-smoothState',
         development : false,
          onStart: {
            duration: 500, // Duration of our animation
            render: function ($container) {
              TweenMax.to($container.find('#content'), 0.5, {ease: Power2.easeIn, opacity:0});
              TweenMax.to($container.find('.breadcrumb'), 0.5, {ease: Power2.easeIn, opacity:0, paddingTop:10});
            }
          },
          onReady: {
            duration: 0,
            render: function ($container, $newContent) {
              // Inject the new content
              $container.html($newContent);
              TweenMax.from($container.find('#content'), 0.5, {ease: Power2.easeOut,opacity:0});
              TweenMax.from($container.find('.breadcrumb'), 0.5, {ease: Power2.easeOut, paddingTop:10, opacity:1});

                    $(document).ready();
                    $(window).trigger('load');

            }
          }
        },
        smoothState = $page.smoothState(options).data('smoothState');
});     

Thanks in advance for you help or time.

John Verhagen

[NewJenk]

Hello,

Try this:

$(function() {
    var $page = $('#main'),
    options = {
        prefetch: true,
        forms: 'form',
        pageCacheSize: 4,
        blacklist: 'form, .no-smoothState',
        development : false,
        onStart: {
            duration: 500, // Duration of our animation
            render: function ($container) {
                TweenMax.to($container.find('#content'), 0.5, {ease: Power2.easeIn, opacity:0});
                TweenMax.to($container.find('.breadcrumb'), 0.5, {ease: Power2.easeIn, opacity:0, paddingTop:10});
            }
        },
        onReady: {
            duration: 0,
            render: function ($container, $newContent) {
                // Inject the new content
                $container.html($newContent);
                TweenMax.from($container.find('#content'), 0.5, {ease: Power2.easeOut,opacity:0});
                TweenMax.from($container.find('.breadcrumb'), 0.5, {ease: Power2.easeOut, paddingTop:10, opacity:1});
                $(document).ready();
                $(window).trigger('load');
            }
        }
        onAfter: function($container) {
            $('div.wpcf7 > form').wpcf7InitForm();
        }
    },
    smoothState = $page.smoothState(options).data('smoothState');
});

P.S. Great site!

[overtref]

Thanks for your reaction!

I have added your code to my script, the only thing i had to add was a comma before onAfter. So it's working! Thanks for you fast comment!

Script with comma:

$(function() {
    var $page = $('#main'),
    options = {
        prefetch: true,
        forms: 'form',
        pageCacheSize: 4,
        blacklist: 'form, .no-smoothState',
        development : false,
        onStart: {
            duration: 500, // Duration of our animation
            render: function ($container) {
                TweenMax.to($container.find('#content'), 0.5, {ease: Power2.easeIn, opacity:0});
                TweenMax.to($container.find('.breadcrumb'), 0.5, {ease: Power2.easeIn, opacity:0, paddingTop:10});
            }
        },
        onReady: {
            duration: 0,
            render: function ($container, $newContent) {
                // Inject the new content
                $container.html($newContent);
                TweenMax.from($container.find('#content'), 0.5, {ease: Power2.easeOut,opacity:0});
                TweenMax.from($container.find('.breadcrumb'), 0.5, {ease: Power2.easeOut, paddingTop:10, opacity:1});
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function($container) {
            $('div.wpcf7 > form').wpcf7InitForm();
        }
    },
    smoothState = $page.smoothState(options).data('smoothState');
});

Keep watching i will be working on this project the upcoming months :)

Cheers Mate!

[garethmorgans]

This solution doesn't seem to work anymore since the wpcf7InitForm(); function was removed in Contact Form 7 v4.8.

A new function was added in v4.8.1: wpcf7.initForm

I've found this code to work well:

function initContactForm() {
  $( 'div.wpcf7 > form' ).each( function() {
    var $form = $( this );
      wpcf7.initForm( $form );
    if ( wpcf7.cached ) {
      wpcf7.refill( $form );
    }
  });
}

Which is then called onAfter using initContactForm();

Discussion on Contact Form 7 forum can be found here: https://wordpress.org/support/topic/init-function-wpcf7initform/

[Eugene1984]

garethmorgans problem is the form submits 3 times on the initial page load and submits 2 times after you click to a next page.

[andytwl]

This is what worked for me and I hope this helps someone else. I've read this thread about 20 times and implemented the advice given, but nothing was working.

My understanding of the problem: Contact Form 7, which usually submits via AJAX (without page refresh) is initiating a page refresh when smoothstate is active. If you disable smoothstate, CF7 works as expected.

My Solution My understanding is that smoothstate is designed to work on forms as well as links by default. So to stop this happening on CF7, which already submits with JavaScript, I added .wpcf7-form to the blacklist.

See code below:

;(function($) {
        'use strict';
    var $body = $('html, body'),
        content = $('#main').smoothState({  
            blacklist: '.wpcf7-form',
            // Runs when a link has been activated
            onStart: {
                duration: 500, // Duration of our animation
                render: function ($container) {

                    // Add your CSS animation reversing class
                    $container.addClass('is-exiting');

                    // Restart your animation
                    //smoothState.restartCSSAnimations();
                }
            },
            onReady: {
                duration: 0,
                render: function ($container, $newContent) {

                    // Scroll user to the top, this is very important, transition may not work without this
                    $body.scrollTop(0);

                    // Remove your CSS animation reversing class
                    $container.removeClass('is-exiting');

                    // Inject the new content
                    $container.html($newContent);

                    // Trigger load functions
                    $(document).ready();
                                    $(window).trigger('load');
                }
            },
            onAfter: function($container) {
                    initContactForm();
                }
        }).data('smoothState');
})(jQuery);`

I hope this helps!