Contact Form 7

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 (required)  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  element (Your Name) above your form elements.

Your Name (required)

Your Email (required)

Phone

Your Message

Select Dropdown (required)

Single Checkbox (required)
Check it out

Multiple Checkboxes (required)
Option 1Option 2 with a really really, super duper, extraordinarily, over the top, long option. I doubt it would ever get this long, but it's good to test for scenarios like this.

Radio Buttons
Radio 1Radio 2

File (required)

Date (required)

Number

Range (required)

Success Messaging

Your Name (required)

Your Email (required)

Phone

Your Message

Select Dropdown (required)

Single Checkbox
Check it out

Multiple Checkboxes
Option 1 Option 2 with a really really, super duper, extraordinarily, over the top, long option. I doubt it would ever get this long, but it's good to test for scenarios like this.

Radio Buttons
Radio 1 Radio 2

Thank you for your message. It has been sent.

Validation Errors

Your Name (required)
The field is required.

Your Email (required)
The field is required.

Phone

Your Message

Select Dropdown (required)

Single Checkbox (required)
Check it out The field is required.

Multiple Checkboxes (required)
Option 1 Option 2 with a really really, super duper, extraordinarily, over the top, long option. I doubt it would ever get this long, but it's good to test for scenarios like this. The field is required.

Radio Buttons
Radio 1 Radio 2

File (required)
The field is required.

Date (required)
The field is required.

Number (required)
The field is required.

Range (required)

One or more fields have an error. Please check and try again.

Identity

Elements

Layout

Components

Compositions

Utilities

Third-Party

Form Example

Required Fields

Checkboxes and Radio Buttons

Success Messaging

Validation Errors