ContactForm7 not working since 3.15.6

[lucasflorian]

ContactForm7 JS and CSS are removed by WPRocket latest version

In the ContactForm7.php class the following filters and actions are added :

// Force scripts and styles to not load by default.
add_filter( 'wpcf7_load_js', '__return_false', PHP_INT_MAX );
add_filter( 'wpcf7_load_css', '__return_false', PHP_INT_MAX );
// Conditionally enqueue scripts.
add_action( 'wpcf7_shortcode_callback', [ $this, 'conditionally_enqueue_scripts' ] );
add_action( 'wpcf7_shortcode_callback',  [ $this, 'conditionally_enqueue_styles' ] );

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):

{{ fn('do_shortcode', '[contact-form-7 id="'~ post.contact_form.id ~'" html_name="'~ post.contact_form.title ~'"]') }}

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

[piotrbak]

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.

[atoupet-toki]

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

[piotrbak]

@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

[Miraeld]

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.

[Mai-Saad]

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

[Miraeld]

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