Adding tooltips to Contact Form 7

So, I got carried away with Contact Form 7 the other day… using place holder text instead of form field labels. The problem is that once the user types into the field, the place holder text is gone. Leaving nothing up to the users imagination, I decided to add some tooltips to remind him of the field label.

Instructions:

Step 1: I’m assuming you are using Contact Form 7, but this should work with any contact form. If not, install Contact Form 7 and build a form for your contact page.

Step 2: Download and install Simple Tooltips: http://wordpress.org/plugins/simple-tooltips/ and configure the plugin in the admin section of WordPress. The plugin allows you to assign a class name to use for your tooltips. Under the “Menu Selectors (Advanced)” field add a class to use – I used ‘tooltips‘.

Using some jQuery, every time the code encounters the class, a tooltip will be produced using the title tag of the element you are working with. But therein lies the problem. Contact Form 7 doesn’t allow you to add titles to elements, but you can assign a class. Seeing as though I was going to use jQuery anyway I just ignored that feature and added the class to all fields with a placeholder using jQuery.

Step 3: Install the custom javascript editor to allow you to add some jQuery to your site: http://wordpress.org/plugins/custom-javascript-editor/

Step 4: Add the following jQuery to the Custom Javascript Editor and save the page:

 

Explanation:

Basically the jQuery added to your site is going to look for all the form fields that already have a class “wpcf7-form-control” using jQuery’s built in “each” method.  Then jquery will assign a title attribute to the form field using the place holder text 🙂 It then adds the class ‘tooltips‘ which is exactly what the tooltips plugin is looking for.

You now have some awesome tooltips on your Contact Forms.

Screenshot:

screenshot-1

Demo:

View my contact form to see it in action