Contact Form 7 is unquestionably one of my favourite and most used WordPress plugins. You can set up a working contact form in minutes, styling it with CSS is incredibly simple, the form includes jQuery validation and AJAX submission, plus it offers a wide array of different form functionality (inputs, selects, file uploads, etc).
If you haven’t heard of it already, I suggest you check out its listing in the WordPress plugin directory to find out more!
Despite it’s general awesomeness, the creator, as of yet, has not added any support for the new form features in HTML5.
So, I’ve taken it upon myself to add some HTML5 support to the plugin.
New features now include…
- Ability to add HTML5 “input types” to your input fields. View this video for further info.
- Support for HTML5 Placeholders.
- jQuery fallback for browsers that don’t support Placeholders.
- Existing mess involving line breaks and paragraph tags cleaned up. All layout styling now achieved with CSS.
A step by step guide…
*Remember, you’ll need to be using the HTML5 doctype…
First things first, you’ll need to download the plugin ZIP file below, and uncompress it. Then upload the “contact-form-7″ folder to your plugins folder via FTP (/wp-content/plugins).
That’s the main job done. If you navigate to the Contact Form 7 setup area in your Dashboard, you’ll notice the additional HTML5 support for inputs and email inputs. Although there is also new HTML5 features for form elements such as select/drop downs, and textareas, I have not really explored this area, as ultimately this project was for my own personal benefit, and all I require at the moment is that support for inputs!
I also advise you to download the CSS styling I’ve come up with, it will make your form look all pretty and stuff (plus it’s dead easy to edit!). One thing to note – add the class “contact-submit” to your submit button.
Just include that CSS in your existing CSS file, or link to it as a new external stylesheet. The CSS will make your form look like this.
Finally, although it’s not a full requirement, it’s probably worth including the fairly lightweight jQuery fallback for HTML5 Placeholders (older browsers don’t support that kinda thing). You can download the JavaScript file below.
Download the Placeholder Fallback
Include the JavaScript file after referencing jQuery in your header.
Then include this snippet of JavaScript AFTER your actual form. (Download the source version here).
<script>
$(function(){
$('input[placeholder], textarea[placeholder]').placeholder();
$('form').submit(function(event) {
event.preventDefault();
$(this).find('input[placeholder]').resetPlaceholder();
$(this).find('textarea[placeholder]').resetPlaceholder();
return false;
});
});
</script>
The job’s a done’un. If you need any help with setting it up, feel free to contact me using the comments area below. Remember, after installing this fix, don’t update the plugin as you will lose the HTML5 functionality (until the creator hopefully adds HTML5 support).
Discussion and Debate