Another $houtout: Contact Form 7
January 11th, 2012 by Gage Pacifera
The Harmonic Northwest $houtout is an effort to give some money and recognition to those selfless developers who offer up their expertise to help the development community in exchange for a voluntary donation.
I have to give credit to Noel Javier for helping me find this well put-together WordPress plugin that handles contact forms. It’s highly configurable, super versatile and straightforward enough to allow clients to make edits. In short, I really like it and deem it worthy of a $houtout.
For my situation, I did have to make some special adjustments using jQuery. The form plugin expects that there is a label associated with each input and where there isn’t, some weird things can happen around required fields and submitting. The code below fixes some of those issues and sets/resets default text input values to their descriptive text on focus and blur.
$(document).ready( function() {
// contact form dynamic values
var formValues = [];
var formTextFields = $(".wpcf7-form").find(".wpcf7-text, textarea");
// clear text fields on focus, return to default val on blur
formTextFields.each( function() {
var defaultValue = $(this).val();
formValues.push( defaultValue );
$(this).blur( function() {
if ( $(this).val() == "" ) {
$(this).val( defaultValue );
}
});
$(this).focus( function() {
if ( $(this).val() == defaultValue ) {
$(this).val( "" );
}
});
});
// form submit actions
$(".wpcf7-form").submit( function() {
// on submit, if field has default value change it to blank for req'd fields to work properly
formTextFields.each( function(i) {
if ( $(this).val() == formValues[i] ) {
$(this).val( "" );
}
});
// after submit, return blank fields to default values
// we have to run replacement twice because when form is submitted and
// data is valid, it replaced fields value right way and then a second
// time when the AJAX response resolves.
var howManyTimesReplaced = 0;
var intCount = 0; // number of times interval was run
var to = setInterval( function() {
var emptyFieldsReplaced = false;
formTextFields.each( function() {
if ( $(this).val() == "" && !$(this).is(":focus") ) {
$(this).trigger("blur");
emptyFieldsReplaced = true;
console.log("fields replaced");
}
});
if (emptyFieldsReplaced) {
howManyTimesReplaced++;
emptyFieldsReplaced = false;
}
if ( howManyTimesReplaced > 1 || intCount > 20 ) {
howManyTimesReplaced = 0;
intCount = 0;
clearInterval(to);
} else {
intCount++;
}
//console.log("interval run");
}, 500);
});
});