WordPress Tip #4 – Semantic HTML for Contact Form 7

If you’re looking for an easy way to stick a contact form on your website, it doesn’t get much better than the Contact Form 7 plugin. Just specify an email address, paste a shortcode into your page, and you’re away!

But if you’ve ever edited the default form, you may have noticed that the HTML it uses is not as good as it could be. There are no label elements, it uses the ‘line-break’ tag, and it uses paragraphs to separate the form elements:

1
2

<p>Your Name (required)<br />
    [text* your-name] </p>

Not great for accessibility, and not semantically correct. Let’s fix it up a bit:

1
2
3
4

<div class="form-entry">
<label for="your-name">Your Name (required)</label>
[text* your-name]
</div>

I’ve taken the same text input, wrapped it in a ‘form-entry’ div, to separate it from surrounding form elements, given it a label corresponding to the input name, and removed the ‘break’ and ‘paragraph’ tags.

This will provide enough containers for you to style your form as you see fit, and better yet, it’s accessible and semantically correct HTML.

The plugin automatically provides useful class names on the inputs, so that you can style text inputs differently from checkboxes etc.

So if you’re creating your own form with Contact Form 7, you may want to use this format as a starting point to keep your code nice and semantic.