An FAQ to address questions regarding the Controller Fields for Contact Form 7 WordPress plugin.
Yes! If you want content outside of your form to also hide or display, you just need the necessary attributes on the wrapping HTML element and the JavaScript I’ve written will still hide and display it when the user interacts with that controller form field.
Yes! The CSS for a hidden form element is simple and minimalist so developers can easily override it to suit their needs. The CSS that is injected by this plugin is simply .au-cf7-hidden-by-controller { display: none;}
You can style all hidden data with this CSS to set it up so that it will animate to a collapsed state when it closes:[data-controller] { display block; height: auto; max-height: 500px; overflow: hidden; transition: max-height linear 0.3s; }
And then override the plugin style for when it’s hidden to this to actually close it:[data-controller].au-cf7-hidden-by-controller { display: block; max-height: 0; }
Yes! Controller fields include the aria-expanded attributes and they are updated to true or false as the user changes its state. This attribute indicates to assistive technologies like screen readers whether the controlled elements are expanded (visible) or collapsed (hidden).
Click here to learn more about the aria-expanded attribute in accordance with W3C guidelines.
