Contact Form 7 is one of the most widely used free plugins on the WordPress platform. It’s a very extensible way to create a basic contact form that doesn’t require any conditional logic.
The trouble is, straight out of the box, this contact form will cause your HTML pages to no longer be valid. The W3 Validator throws an error because the name attribute on the
form element cannot be empty.
Fortunately, there’s a way to solve this.
Editing the Name Attribute In Contact Form 7
Normally, you would edit your contact form, and then copy and paste the shortcode to your content or template file.
By default, a Contact Form 7 shortcode would look like this:
<!-- For Contact Form 7 Shortcode id="1234" --> [contact-form-7 id="1234" title="Contact form 1"]
Wherever you use this shortcode, just add the attribute html_name=”whatever-you-want-to-name-it” to the shortcode.
Let’s say we want to have the name attribute hold the value of my-form.
In the normal content editor, it would look like this:
[contact-form-7 id="1234" title="Contact form 1" html_name="my-form"]
If you want to output the shortcode in a WordPress template file, then it would look like this:
<?php echo do_shortcode('[contact-form-7 id="1234" title="Contact form 1" html_name="my-form"]'); ?>
After making this small change, your forms created in Contact Form 7 should validate with the W3 Validator.
Can I Add A Class Or ID Attribute To A Form?
As it turns out, you can use a very similar method to add
id attributes to your contact form.
Let’s say you want to add a class=”my-class” and id=”my-id” to a Contact Form 7 form.
Just use the html_ prefix in the shortcode, like you did to add a name attribute.
To add a class to your shortcode, add html_class=”my-class”. To add an id, use html_id=”my-id”
[contact-form-7 id="1234" title="Contact form 1" html_id="my-id" html_class="my-id"]
Hope this helps you get more use out of Contact Form 7!