Blog: WordPress
Mt Fuji with Cherry Blossoms in foreground

Add Name Attribute To Contact Form 7

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

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 class and 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!

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

9 comments on “Add Name Attribute To Contact Form 7

  1. Hi Stan:

    Is there a specific data- attribute that you are trying to add? And what is it’s purpose?

    You know, truthfully, I’ve never had to add data-attribute to Contact Form 7 so far, but if I were looking for a place to start, I’d read these in order:

    http://contactform7.com/tag-syntax/
    http://contactform7.com/2015/01/10/adding-a-custom-form-tag/
    http://contactform7.com/2015/02/27/using-values-from-a-form-tag/

    Your question is a really intriguing one, and it doesn’t look there is a clear-cut tutorial on ow to do this out there. I’m going to look into this further once I have some time, and see if I can publish an answer for you.

    My apologies I don’t have a definitive answer today, but I hope the links above start you in right direction for the time being. I’ll email you if come up with a tested and proven answer.

    Thanks,
    John

    P.S. : More in this conversation at https://wordpress.org/support/topic/adding-data-attributes-to-radio-buttons for folks following this thread looking for a similar solution.

  2. Hey John,

    Thanks a lot for your kind advise, I’m actually using data-attribute to exclusively check vertically and horizontally for the radio buttons but I am overthinking this as it can be achieved with JQuery. Really appreciate your time and help.

    Thanks again, cheers.

    1. Happened upon this thread looking to see how easy it was for a user to add data- attributes. The use case is that I’m providing a jQuery add-on for clients to embed in their site that will forward all of the entered contact info into the client database. This add-in is used for any ad-hoc contact form, so I am thinking of having the client add data- attributes to each field of interest (e.g., data-address1), and the add-on would search for the dataset fields. In this way, the client does not have to change any existing name/id fields if they’re already being used in some way.

  3. Hey there, I’m sorry to slightly hijack this thread, but I have a query I’ve not been able to solve anywhere. Is there any way that you know of to then have the html_id/html_class for the specific form output to the email/database? So similar to placing [_post_id] into the mail form but instead returning the form id, as opposed to post id.

  4. Hello Jon:

    From what it sounds like, you have an email subscription service and/or CRM you want to integrate with your contact form. If that’s the case, Gravity Forms might be a better choice for a contact form than Contact Form 7. The Developer license of Gravity Forms comes with add-ons for many of the major email services.

    It’s difficult to tell what you’re trying to do, as your comment is a bit vague. What I would do in your place is hire a developer that specializes in integration with your particular email service and get a consultation on how to accomplish what you’d like to do.

    This person specializes in complex Gravity Forms integrations, and may be a good person to reach out to.

Join the Conversation

Your email address will be kept private. Required fields marked *.