CF7 and S&F – form action

Anonymous

#217775

Contact Form 7 works correctly, but ajax does not work.
Yes, you can see on the link earlier. I noticed that when ajax S&F is disabled, everything works. But I need ajax. 🙂

Thank You.

Ross Moderator

#217777

This reply has been marked as private.

Anonymous

#217779

This reply has been marked as private.

Anonymous

#217785

This reply has been marked as private.

Ross Moderator

#217801

Hi Arthur

Finally I understood it, thans for the video 🙂

To my relief this shouldn’t be too hard to implement.

Essentially, what is happening is that when the form is dynamically loaded on the page (with ajax), contact form 7 doesn’t know its there, and didn’t run its javascript to handle the interactions.

What you will need to do is add some javascript to your theme, to detect when our Ajax finishes, and to re-initialise the contact forms. Fortunately we have some events for that, and looking at the CF7 docs they have some to re-init their javascript.

Combining these would look like:

(function ( $ ) {
	"use strict";
	
	function initContactForms() {
		$( 'div.wpcf7 > form' ).each( function() {
			var $form = $( this );
			wpcf7.initForm( $form );
			if ( wpcf7.cached ) {
				wpcf7.refill( $form );
			}
		} );
	}
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("S&F JS Ajax Request complete, re-init contact forms");
		initContactForms();
	});
	
}(jQuery));

Let me know how you get on 🙂

Anonymous

#217803

Hey, Ross!

And it works successfully!

Thank You! 🙂

Anonymous

#217805

This reply has been marked as private.

Anonymous

#217809

This reply has been marked as private.

Ross Moderator

#217841

This reply has been marked as private.

Anonymous

#217850

This reply has been marked as private.

[Author]

Posts