WordPress Contact Form 7 Issues

[mikecollet]

Hello @gmrchk ,

First of all. Swup is amazing, I'm really excited to work with it on some projects.

I'm using Swup on my WordPress website. Everything works perfect except for the forms created by Contact Form 7. I'm using the following options:

let options = {
	LINK_SELECTOR:'a[href^="/"]:not([data-no-swup]), a[href^="' + window.location.origin + '"]:not([data-no-swup])',
	FORM_SELECTOR: 'form[class="wpcf7-form"]',
	elements: [
		'#content'
	],
	animationSelector: '[class*="transition-"]',
	cache: true,
	pageClassPrefix: '',
	scroll: true,
	debugMode: true,
	preload: true,
	support: true,
	skipPopStateHandling: function(event){
		if (event.state && event.state.source == "swup") {
			return false;
		}
		return true;
	},
	animateHistoryBrowsing: false,
}

const swup = new Swup(options);

Because Contact Form 7 is generating the form by itself I'm unable to add the attribute [data-swup-form], so I'm using: " form[class="wpcf7-form"] ". Every form generated by CF7 has the class .wpcf7-form. Is that a correct usage of the FORM_SELECTOR?

Contact Form 7 uses reCaptcha v3 which doesn't run very nice. At first, when I visit my homepage. A form is generated in the footer.php. ReCaptcha automatically fills the g-recaptcha-response input type in my CF7 form. When I go over to the Contact page. There's another form rendered by CF7. The problem is that the form on that page doesn't automatically fill the g-recaptcha-response input type. It stays empty. Only when I refresh the page, the g-recaptcha-response input type will be filled.

Could you explain me how to get Swup working on a WordPress website using forms generated by Contact Form 7 including the new reCaptcha v3?

Thanks!

Greetz,
Mike

[aascensao]

Hi @mikecollet,

sorry for bumping in, but I've came across the same issue when using Swup. When you use navigate through your website the content in the new page will be loaded and injected/replaced but the scripts will not be executed alongside.

The Contact Form 7 plugin will execute it's own scripts to initiate the form accordingly when the page first loads. If the page in question is the Contact page, normal behaviour will occur but when the content is replaced/injected, the form will be out of sync/unfilled.

So, what you'll need to do is to re-initiate/refill the values using wpcf7 own function, on page load:

var $form = $( 'div.wpcf7 > form' );

wpcf7.initForm( $form );
if ( wpcf7.cached ) {
   wpcf7.refill( $form );
}

Hope this helps and remember this will be a common behaviour for any other plugins that might initialise their content on page load.

Cheers,
André

[gmrchk]

Hi everyone,

the FORM_SELECTOR option can be any valid CSS selector, so your form[class="wpcf7-form"] is just fine, although it will only work for forms with only one class wpcf7-form. To be safe, you can use

FORM_SELECTOR: 'form.wpcf7-form'

@aascensao kindly answered your reCaptcha question.

Cheers!

[mikecollet]

Hi @aascensao & @gmrchk

Sorry for the late reply. I've tried what you guys told me. I"m running the following JavaScript functions on swup:contentReplaced.

document.addEventListener('swup:contentReplaced', event => {
	runJS();

	( function( grecaptcha, sitekey ) {

		var wpcf7recaptcha = {
			execute: function() {
				grecaptcha.execute(
					sitekey,
					{ action: 'homepage' }
				).then( function( token ) {
					var forms = document.getElementsByTagName( 'form' );

					for ( var i = 0; i < forms.length; i++ ) {
						var fields = forms[ i ].getElementsByTagName( 'input' );

						for ( var j = 0; j < fields.length; j++ ) {
							var field = fields[ j ];

							if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
								field.setAttribute( 'value', token );
								break;
							}
						}
					}
				} );
			}
		};

		grecaptcha.ready( wpcf7recaptcha.execute );

		document.addEventListener( 'wpcf7submit', wpcf7recaptcha.execute, false );

	} )( grecaptcha, '6LfEK4EUAAAAAFPyyGdB37wy9fNwr0sMYQ4BMs51' );

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

There are a few things that I can't explain. Chrome does a great job at sending the forms, everything works as expected.

Firefox gives me a error message saying that something went wrong. It adds a .spam class to the form.wpcf7-form element. And doesn't send the email.

Edge does the same as Firefox, but Edge does sent the email anyway. So it gives me a error but someway it still sends the email.

I already moved my forms to seperated pages, so there should be no conflicts between 2 forms on the same page. My g-recaptcha-response input type is always filled right now so that shouldn't be the problem.

Is there anybody with Swup working with CF7 Forms on a WordPress website? I would love to see a example of how they got it working.

Thanks for your time and if you need some more information than let me know!

Greetz,
Mike

EDIT: When I disable/remove all the ReCaptcha validation keys the problem seems to be solved. All forms are working properly. (Cross all platforms and browsers) So ReCaptcha is causing the problem for me. Is there any chance that Swup is conflicting with ReCaptcha in any way?

[gmrchk]

Hi @mikecollet,

All swup really does is replacing the contents of the page, as any other single page solution does, and it's CF7/ReCaptchas job to do the rest on initForm or refill call.

I would suggest directing this issue to CF7 Forms (or maybe even ReCaptcha) guys. Unfortunately, I can't help you with either of those.

If you do come up with a solution, I would really appreciate if you post it here as well.

[manuel-84]

I had a similar issue with CF7 not reloading because of wpcf7.initForm not being declared.
All I had to do to was to edit CF7 scripts.js moving the init code $( function() { ....... from the top to the bottom (before } )( jQuery ); ) so that the functions now are declared before they are called