A Few Contact Form 7 Tricks

One of my favourite WordPress tools is the free Contact Form 7 plugin. Simple and easy to use, it offers a really simple way to add feedback forms or surveys to your site with no programming required. It usually looks pretty good “out of the box”, but with a little styling it can look amazing.

Here are a few tricks that I’ve learned along the way:

How to save submissions to a database

It can often be really useful to be able to save form submission details in the WordPress database and be able to export them in CSV format, for example, so you can export the data to a CRM, email broadcast system or analyse the data in Excel. Even if you don’t need to do so immediately, it’s often well worth installing the brilliant Contact Form DB plugin, which seamlessly stores your data and provides you with a section in the dashboard to retrieve your data*.

*Don’t forget that your database will now contain live customer details, so you need to be extra-careful with backups etc.

How to import and export forms

It can occasionally be handy to import and export the forms themselves, so you can use them on another website, or create a variation.

Because Contact Form 7 stores its contact form data as a custom post (post type: wpcf7_contact_form), that’s really easy to do an you can export and import form data via Tools > Export and Tools > Import in the WordPress admin screen.

In the Export menu, choose “Contact Forms” if you want to export contact form data only. You can also choose “All content” (this includes contact form data).

How to log a submission as an event in Google Analytics

If you’ve set up Google Analytics in a conventional way, then it’s really easy to log submissions as events, you don’t even need to do any programming, there’s just a little code that you can add in the WordPress dashboard as you edit your form.

In the Additional Settings field at the bottom of the contact form management page; simply insert the following line:

on_sent_ok: "_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);"

Note that you need to quote the codes properly and the code must be in one line.

on_sent_ok in Additional Settings

Now, if you have set everything up correctly, when someone makes a submission via your contact form, Google Analytics will track it as an event with Contact Form as the Category, and Submit as the Action.

To verify that this is working correctly, you can check the Content > Events > Overview report page on Google Analytics 24-48 hours after a submission. At that point, you should be able to find the Contact Form category there.

How to redirect following submission

It’s often handy to be able to redirect a user to a new page after they have completed the form, both to provide them with additional information such as a thank you, or because you want to log the submission in Google Analytics (although events are a neater way to do that).

The simplest way is using on_sent_ok JavaScript action hook. By using this hook, you can specify a JavaScript code that you wish to run after the form is successfully submitted. You will find the Additional Settings field at the bottom of the contact form management page. Simply insert the following line into it:

on_sent_ok: "location = 'http://example.com/';"

Obviously, you need to replace the http://example.com/ to the URL you want to redirect to.

on_sent_ok example

That’s it. So simple, isn’t it? Try it and check if it works.

It’s done using JavaScript, so you may occasionally find that not everyone gets redirected. The user will also possibly see the default Contact Form 7 thank-you message, so there might need to be a little bit of CSS added to tidy things up.

How to add an autoresponder

An autoresponder sends a user an email confirming their enquiry. Although it can seem like overkill, it can be a nice way to confirm that the request was sent and to provide users with contact details and other information that it might be handy for them to have.

It’s really easy to do in Contact Form 7, simply check the “Use mail (2)” box in the form’s configuration panel. Mail (2) is almost the same as Mail, except that Mail (2) is sent only when Mail has been sent successfully.

How to add id and class attributes to a form element

When you are creating a custom form, it can be really handy to be able to be able to specify an id and class for a form. To do this, just add the html_id and html_class attributes into a [contact-form-7 404 "Not Found"] shortcode.

Example:

[contact-form-7 404 "Not Found"]