Contact Forms 7 - Making value text disappear when clicked (onfocus)

 UPDATE (Jan. 8, 2010) - I managed to use the added script below in a new website (I work for SEO.com). Take a look at metrocarpetcleaners.com (the form is in the right sidebar).


I'm really not a PHP developer in any fashion. However, I've managed to make some adjustments to the Contact Forms 7 plugin for Wordpress.

Contact Forms 7

My hat goes off to Takayuki Miyoshi, the creator of Contact Forms 7. The plugin is very intuitive and fairly user-friendly in comparison with other form plugins. However, I found that I couldn't make input value attributes appear and disappear when a form input was clicked on. Below are some of the adjustments I made:

1. In the plugin folder under admin/admin.php I added a new option to the administration of the text input generator (line 466). Script additions are in blue:
   
   'acceptableFileTypes' => __( "Acceptable file types", 'wpcf7' ),
   
   'needReallySimpleCaptcha' => __( "Note: To use CAPTCHA, you need Really Simple CAPTCHA plugin installed.", 'wpcf7' ),
   
   'onFocusOnBlur' => __( "Make input values disappear when clicked?", 'wpcf7' )
   
   ) );
   
   
2. Then, modify the admin javascript file under admin/wpcf7-admin.js
   (line 417)
   jQuery.each([ 'isRequiredField', 'allowsMultipleSelections', 'insertFirstBlankOption', 'makeCheckboxesExclusive',
   
   'isAcceptanceDefaultOn', 'isAcceptanceInvert',
   
   'akismetAuthor', 'akismetAuthorEmail', 'akismetAuthorUrl',
   
   'imageSizeSmall', 'imageSizeMedium', 'imageSizeLarge', 'onFocusOnBlur' ], function(i, n) {
   
   tgInputs[n] = jQuery('');
   
   (line 469)
   table1.append(tgTr(
   
   jQuery(' ' + _wpcf7L10n.isRequiredField + '').prepend(tgInputs.isRequiredField),
   
   jQuery(' ' + _wpcf7L10n.onFocusOnBlur + '').prepend(tgInputs.onFocusOnBlur)
   
   ));
   
   (line 1159)
   if (tgInputs.tagClasses.val())
   
   jQuery.each(tgInputs.tagClasses.val().split(' '), function(i, n) {
   
   options.push('class:' + n);
   
   });
   
   if (tgInputs.onFocusOnBlur.is(':checked'))
   
   options.push('onfocus');
   
   
3. Then edit the text module file under modules/text.php:
   First determine if the new option is selected:
   
   } elseif ( preg_match( '%^([0-9]*)[/x]([0-9]*)$%', $option, $matches ) ) {
   $size_att = (int) $matches[1];
   $maxlength_att = (int) $matches[2];
   } elseif ( preg_match( '%^onfocus$%', $option, $matches ) ) {
   $onfocus_att = 1;
   }
   }
   
4. Add the javascript to the input if the selection was made (still on modules/text.php):
   
   if ($onfocus_att == 1) {
   $atts .= "onfocus=\"if(this.value=='" . esc_attr( $value ) . "'){value='';document.getElementById('" . trim( $id_att ) . "').style.color='#000000'}\" onblur=\"if(this.value==''){value='" . esc_attr( $value ) . "';document.getElementById('" . trim( $id_att ) . "').style.color='#999999'}\"";
   }
   $html = ...
   
5. Your Done!

Here's an image of the new checkbox:

Let me know if you have any questions. I'm going to put up a demo soon.