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.

Contact Form 7I 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.

http://contactform7.com/

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);
	});
});

Posted in $houtouts, Web Development, WordPress

Back to blog home