Overly broad selector checking form nesting

[joedolson]

https://github.com/rocklobster-in/contact-form-7/blob/e378994c1af22ebaea9ed1ea9090a267fa794fdc/includes/js/src/index.js#L51

I've encountered two cases where the selector checking whether forms might be nested has caught cases that don't exhibit that error: first, a form that used the .wpcf7 class on a non-wpcf7 form to inherit styling, and the other a case where the class .wpcf7 was used in the template for fields in the form, e.g. <p class="wpcf7 phone-field"><label for="phone">Phone <span>(required)</span></label>[text* f-phone id:phone] </p>.

In the first case, the class was actually placed on a div nested inside the form element, triggering this.

A better selector might be form form.wpcf7, which would only catch form elements inside other form elements.

[takayukister]

Since the wpcf7 class is added to the top level div element, not the form element, form.wpcf7 actually matches nothing. The form element has the wpcf7-form class. You might think form form.wpcf7-form could fix the issue, but this won't work either because at the time the browser builds the DOM tree, the internal form.wpcf7-form element is automatically removed from the tree as an invalid HTML (nested form).

I have an alternative idea: 1) Add an extra attribute such as data-form-wrap="1" to the top level div, 2) Change the selector to form .wpcf7[data-form-wrap].

[joedolson]

I should have looked at the actual HTML in use! I made an assumption and didn't look.

The alternative idea makes sense to me, and I would expect it to eliminate false positives.