Issue after update

@tommyrocks

I’m on WordPress 5.7.2 and using Contact Form 7 5.4.1 but unfortunately the issue doesn’t seem to be resolved.

I’m getting the following in console when clicking the “Send” button on the CF7 form.

TypeError: Cannot read property ‘querySelector’ of null
at c (index.js?ver=5.4.1:1)
at Array.forEach (<anonymous>)
at index.js?ver=5.4.1:1

The file itself is located at /wp-content/plugins/contact-form-7/includes/js/index.js

Any ideas? Thanks!

I had the exact same error with NO plugins or other scripts on the site, but found out, I had by mistake used the same name for two different fields.

Helped me resolve the issue.

For anyone else that was struggling with this and trying to figure out what was wrong, we have a theme and/or plugin that refactored the HTML output from the form so that it could be more easily styled and laid out. However this meant removing span tags.

The validation specifically and in hard fashion sets the selector that it is looking to insert the error message into as a span tag, with two classes of “wpcf7-form-control-wrap” and the name of the field you’re using.

As a result we needed to use the filter “wpcf7_feedback_response” and loop through $response[‘invalid_fields’] to change the “into” array value to the kind of selector our refactored HTML would be using.

If you’re getting this error, it’s highly likely that either something is altering your form HTML, or that you have some kind of duplication or HTML validation issue with the form you have saved.