Automatically Add Unique CSS Classes to Contact Form 7 Forms

WordPress Logo

When using certain CRMs and marketing automation tools, Contact Form 7 submissions can all look like they came from the same form.

This is especially noticeable in HubSpot which uses the class on the form tag to identify each form. Unless you specifically add a class to the shortcode then it will look like any submission came from a form named ".wpcf7-form, .init"

So I wrote a small plugin to automatically add the title slug as a form class for any forms that haven't had one added manually.

You can find the code on GitHub here: Contact Form 7 Auto Class

And an installable zip is available on the releases page.

The code is very simple and uses the CF7 filter 'shortcode_atts_wpcf7' to check if a form shortcode has the html_class attribute:

[contact-form-7 id="1234" title="Contact form 1" html_id="contact-form-1234" html_class="form contact-form"]

If there is no attribute, or the attribute is empty, it creates one from the post title and adds it.

Note: The post title is used to create a slug rather than using the post slug directly. This is because the form edit page has no way to update the original slug and it will always be set to the original title of the form which can't be changed.

After enabling the plugin you should see form submissions in HubSpot separated using the form name, such as ".wpcf7-form, .init .main-contact-form", which you can then rename to "Main Contact Form" so that it matches the form name in the WordPress admin.