Closed lucasflorian closed 10 months ago
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.
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
@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
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.
Reproducible with theme 2023 but not reproducible with theme 2021 v 2.0. @wordpressfan @Miraeld
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.
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.
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.
XS
No
ContactForm7 JS and CSS are removed by WPRocket latest version
In the ContactForm7.php class the following filters and actions are added :
I don't know how the conditionally_enqueue_scripts works, but it doesn't detect the way we use ContactForm7.
In our websites ContactForm7 is loaded in the page with a shortcode (in a twig template):
The contact forms stopped working on all our websites since the new update because of the removal of the JS and CSS files :(
Is there a way to disable this feature ?
We already remove CF7 scritps and styles on pages without contact form for performance issue