Some patterns of the Contact Form 7 plugin for WordPress are supported by this pattern library.
This form was generated by Contact Form 7. Fields are styled to appear similar to those of this pattern library, except for checkboxes and radios due to limitations of the form markup.
Do not use this markup directly. Refer to existing form and button patterns instead.
The form generator creates markup that will apply most of our styling but a few things need to be done manually.
To match other forms we mute the text color for
By default labels are formatted as
<label> Your Name (required). We can
change this to
<label>Your Name <span class="u-textDarkGrayAlpha">(required)
</span> to bold our label and fade our required text.
When generating checkboxes and radio buttons in the editor be sure to check
Wrap each item with label element option. This will increase clickable
area for these form elements, and make the connection between the element
and the label clear to screen reader users.
If you want a bold label for a group of checkboxes or radio buttons you can
<strong> element (
<strong>Your Name</strong>) above your form