Wednesday, November 25, 2009

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.

4 comments:

  1. Nice work! Maybe I'll draw upon this when I develop similar function for Contact Form 7. Thanks.

    ReplyDelete
  2. Which version of CF7 were you using for this? Thanks!

    ReplyDelete
  3. I believe it was version 2.0.7. I've already encouraged the generous creator of this plugin to include this type of functionality in future updates. I hope he'll have time to get to that.

    ReplyDelete
  4. Thanks man i will try i search this by long time :D

    ReplyDelete