Contact Form 7

Some patterns of the Contact Form 7 plugin for WordPress are supported by this pattern library.

Form Example

  • wordpress
  • third-party

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.

Required Fields

To match other forms we mute the text color for (required) labels. By default labels are formatted as <label> Your Name (required). We can change this to <label>Your Name <span class="u-textDarkGray">(required) </span> to bold our label and fade our required text.

Checkboxes and Radio Buttons

When generating checkboxes and radio buttons in the editor be sure to check the 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 add a <strong> element (<strong>Your Name</strong>) above your form elements.

Single Checkbox (required)

Multiple Checkboxes (required)

Radio Buttons

Single Checkbox

Multiple Checkboxes

Radio Buttons

Single Checkbox (required)
The field is required.

Multiple Checkboxes (required)
The field is required.

Radio Buttons