Open joedolson opened 1 month ago
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]
.
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.
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 theform
element, triggering this.A better selector might be
form form.wpcf7
, which would only catch form elements inside other form elements.