ContactForm7 not working since 3.15.6 about wp-rocket HOT 6 CLOSED

Hello @lucasflorian, thanks for creating the issue. Would it be possible to get credentials to your website, so we could investigate this further? If so, please send them to piotr[at]wp-media.me.

from wp-rocket.

Hello, same problem here but with a more "generic" use.
We already opened a ticket 2 days ago.

We've just installed the latest version of wp-rocket (as well as wordpress and the other plugins). There seems to be an error or conflict with contact-form-7. We tested on a server with cloudflare cache, but also locally without cloudflare cache.
On pages without forms, no errors, all's well. On pages with a contact-form, I get a wpcf7 is not defined error (see screenshot). This error disappears when I deactivate the plugin. We've also checked in our code that we don't act on forms in either PHP or javascript.

Thanks

from wp-rocket.

@atoupet-toki Could you send me the URL and/or access to the staging site where we could reproduce this? piotr[at]wp-media.me

from wp-rocket.

Hello,

There is an easy way to reproduce the issue, WP Rocket must be installed as well as Contact Form 7.

If a form is added to a page while WP Rocket is enabled, in the console we can see the error wpcf7 isn't defined.

If we do disabled WP Rocket, everything works correctly.

As @lucasflorian mentioned, from a quick check, it comes from the code he mentioned in ContactForm7.php

In fact, WPCF7 adds the CSS & JS to every pages, even tho there isn't forms. WP Rocket deletes these call, but it also doesn't add it back when it's needed.

from wp-rocket.

Reproducible with theme 2023 but not reproducible with theme 2021 v 2.0. @wordpressfan @Miraeld

from wp-rocket.

Reproduce the problem

To reproduce the issue, install and enable WP Rocket & Contact Form 7. Add a form on a page, and load that page. You'll see the error wpcf7 isn't defined in the console.

Identify the root cause

If I understand well, we do check if the action wpcf7_enqueue_scripts has been executed. If that's not the case, then we execute wpcf7_enqueue_scripts();

This function should load the JS file and an inline JS to be added to the page. However, in our case it's only adding the file, not the inline.

I traced back within the CF7 plugin to better understand what was happening.

The JS file is added in an easy way, however, for the inline, digging more deeply was required.
I found out it goes to their function

public function add_data( $handle, $key, $value ) {
		if ( ! isset( $this->registered[ $handle ] ) ) {
			return false;
		}

		if ( 'strategy' === $key ) {
			if ( ! empty( $value ) && ! $this->is_delayed_strategy( $value ) ) {
				// [...]
			} elseif ( ! $this->registered[ $handle ]->src && $this->is_delayed_strategy( $value ) ) {
							// [...]
			}
		}
		return parent::add_data( $handle, $key, $value );
	}

Which is interesting because of this part :

if ( ! isset( $this->registered[ $handle ] ) ) {
	return false;
}

If the handle contact-form-7 isn't registered then it bails out.
And the inline script falls into that.

While retracing back how the registration occur in their plugin, I found an interesting action within CF7 plugin:

add_action(
	'wp_enqueue_scripts',
	static function () {
[...] 
});

This one adds every registration needed.

The issue is that in ContactForm7.php we do a wpcf7_enqueue_scripts();
This function loads the JS file of CF7 but also an inline script that looks like:

<script id="contact-form-7-js-extra">
var wpcf7 = {"api":{"root":"http:\/\/localhost:8902\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"};
</script>

Surprisingly and without explaining exactly why on older themes, as mentioned @Mai, it was working, but it seems like on newer themes, it isn't adding the wpcf7 inline script.

Scope a solution

One solution I found to fix this issue is to add a do_action('wp_enqueue_scripts'); to ensure registration are made within CF7 plugin, before the execution of wpcf7_enqueue_scripts() in our ContactForm7.php file.

Effort estimation:

XS

Is a refactor needed in that part of the codebase?

No

from wp-rocket.