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.

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.

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.

Most of the websites that we build include a CMS (content management system) to enable our clients to update the contents of their websites. Generally this includes a WYSIWYG editor that gives users the ability to format text using Microsoft Word-style tools.

Generally it’s something that works really well – copying text directly from Word and Outlook can sometimes be problematic, but there are generally workarounds. One of the biggest issues that we have is with colour pickers. They can be important if the client needs to be able to highlight areas of text in one of their corporate colours, but it can be a pain as invariably users forget the approved colours and we then see instances where the wrong shade has been used or acres of lime green.

On a recent WordPress project we were asked to restrict the colour palette in the theme to approved colours and found a great way to do it, so we thought that we’d share it with our clients. It only works from WP 3.5 upwards but if you’re still running an earlier version of WordPress it’s probably time to upgrade and see what you are missing.

So how does it work? At the bottom of the functions.php file in your theme, add the following code:

Note the comma-delimited array of hex colours (minus the hash). Replace these with your approved colours, upload functions.php and when you go to a page with the editor you should see the palette as below.

We were recently asked to help out a design agency client with customisation of a WordPress installation.

The brief was that selected pages within the site needed to be accessible only to logged-in users. On visiting the page, users should be shown a login page in the style of the website, with a link to a registration page, where they could subscribe with an activation code they had previously been sent. There also needed to be niceties such as password reminders plus login/logout and register links on the menu.

The nice thing is that this is all very do-able using free WordPress plugins.

The first piece in the puzzle was the Member Access plugin, which allows an administrator to define whether a user has to be logged in to view individual pages and posts. It’s very simple to use and just adds a new area to the usual edit screen.

The second piece was the Theme My Login plugin. This is a really useful addition to the WordPress developer’s toolkit. It not only replaces the standard WordPress login forms with ones that match your theme, but it also offers a number of extra options such as the ability to theme registration and password reminder emails, define where users will be redirected to, additional security options etc. We tweaked the HTML slightly, but otherwise ran it out of the box with just the settings changed.

The third piece was the BAW Login/Logout Menu plugin. This is a neat little plugin that does exactly what it says on the tin. It adds a new section to the standard WordPress menu administration page enabling you to add login options to your menu.

And finally, we used the BAW Easy Activation Codes plugin. This lets you specify one or more codes that users must enter in order to be able to register for the site.

We wondered whether we should show step-by-step instructions but to be honest it’s so easy I don’t think you need them. Not only are the plugins rock-solid, but the configuration they required was minimal and with a little documentation, the client was able to complete the customisation and deliver the site. We’d love to show you the finished site, but unfortunately the client is a little publicity shy, take a look at what our own login page now looks like though at http://the-digital-department.co.uk/login/.