PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Here's how to add "placeholder" functionality which works with ajax validation.

  1. minicast
    Member

    Add the following to a js file that is enqueued from your theme

    jQuery(document).ready(function($){
    	// gravity forms custom placeholders
    	$('li.gfield .gfield_label').live('click', function(){
    		$(this).next('.ginput_container').find('input[type="text"], textarea').focus();
    	})
    });
    jQuery(document).bind('gform_post_render', function(){
    	// add any other js here that you want to run before/after validation
    	jQuery('.ginput_container input[type="text"], .ginput_container textarea').focus(function(){
    		jQuery(this).closest('.ginput_container').prev('.gfield_label').hide();
    	});
    	jQuery('.ginput_container input[type="text"], .ginput_container textarea').blur(function(){
    		if( jQuery(this).val() == "" ){
    			jQuery(this).closest('.ginput_container').prev('.gfield_label').show();
    		}
    	})
    	jQuery('.ginput_container input[type="text"], .ginput_container textarea').each(function(){
    		if( jQuery(this).val() != "" ){
    			jQuery(this).closest('.ginput_container').prev('.gfield_label').hide();
    		}
    	})
    });

    Add this to your theme css:

    li.gfield,
    div.ginput_complex span {
    	position: relative;
    	display: inline-block;
    }
    
    li.gfield .gfield_label,
    div.ginput_complex span label {
    	position:absolute;
    	top: 7px;
    	left: 11px;
    	margin: 0;
    }
    
    .gfield_required {
    	display: none;
    }
    Posted 10 years ago on Tuesday August 7, 2012 | Permalink
  2. Thank you for that code.

    Posted 10 years ago on Tuesday August 7, 2012 | Permalink
  3. Nowton
    Member

    Position works fine, however the inputs are not cleared on focus. Any ideas what may be causing this?

    Posted 9 years ago on Friday August 10, 2012 | Permalink
  4. @Nowton, do you have a link to the form online where this is in use?

    Posted 9 years ago on Friday August 10, 2012 | Permalink
  5. minicast
    Member

    Try this (updated to work for address fields):

    jQuery(document).bind('gform_post_render', function(){
    
    	jQuery('.ginput_container input[type="text"], .ginput_container textarea').focus(function(){
    		jQuery(this).closest('.ginput_container').prev('.gfield_label').hide();
    		jQuery(this).next('label').hide();
    	});
    
    	jQuery('.ginput_container input[type="text"], .ginput_container textarea').blur(function(){
    		if( jQuery(this).val() == "" ){
    			jQuery(this).closest('.ginput_container').prev('.gfield_label').show();
    			jQuery(this).next('label').show();
    		}
    	})
    
    	jQuery('.ginput_container input[type="text"], .ginput_container textarea').each(function(){
    		if( jQuery(this).val() != "" ){
    			jQuery(this).closest('.ginput_container').prev('.gfield_label').hide();
    			jQuery(this).next('label').hide();
    		}
    	})
    });
    Posted 9 years ago on Saturday August 11, 2012 | Permalink
  6. cmccrone
    Member

    @Gravity Forms - Make this an option : ) : ) : ) Please !?

    Thanks guys! Still loving GF. Its amazing and runs my entire site!

    Posted 9 years ago on Thursday August 23, 2012 | Permalink
  7. cmccrone
    Member

    Im using the placeholders plugin listed below and I have found two problems.

    1 ) It erases/hides the text next to the radio, checkboxes etc
    2 ) When I created a paged form, it doesn't add the placeholders to the other pages (2nd, 3rd, etc). Just the first page of the form before you hit next.

    Anything wrong in this code that can fix those issues?

    PLUGIN: http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/

    function gfap_load_scripts() {
    	wp_enqueue_script('jquery');
    	wp_register_script('modernizr', 'http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js', array('jquery'));
    	wp_enqueue_script('modernizr');
    }
    add_action('wp_enqueue_scripts', 'gfap_load_scripts');
    
    function register_gfap_settings() {
    	$setting_vars = array(
    		'gfap_class',
    		);
    	foreach ( $setting_vars as $setting_var ){
    		register_setting( 'gfap_mystery', $setting_var );
    	}
    }
    add_action( 'admin_init', 'register_gfap_settings' );
    
    function gfap_menu() {
    	add_options_page( 'Gravity Forms Auto Placeholders Settings', 'Gravity Forms Auto Placeholders', 'manage_options', 'gfap_uid', 'gfap_options' );
    }
    
    function gfap_options() {
    	if ( !current_user_can( 'manage_options' ) )  {
    		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    	}
    	echo '<div class="wrap"><h2>Gravity Forms Auto Placeholders Settings</h2><form method="post" action="options.php">';
    	settings_fields('gfap_mystery');
    ?>
    
    <style>.wrap form td span{color:#888;} .wrap legend{font-size:13px; font-weight:bold; margin-left:-5px;} .wrap fieldset{margin:10px 0px; padding:15px; padding-top:0px; border:1px solid #ccc;}</style>
    <fieldset>
    	<legend>Convert labels to placeholders:</legend>
    	<table class="form-table">
    		<tr><td><input type="checkbox" name="gfap_class" value="1" <?php checked( '1', get_option( 'gfap_class' ) ); ?> /> Only on forms or form items with the class <b><i>gfap_placeholder</b></i> <span>- By default, leaving this unchecked will apply the effect to all Gravity Forms</span></td></tr>
    	</table>
    </fieldset>
    <p class="submit">
    <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
    
    <?php
    	echo '</form></div>';
    }
    add_action( 'admin_menu', 'gfap_menu' );
    
    function gfap_script() { ?>
    
    <script>
    // Start allowance of jQuery to $ shortcut
    jQuery(document).ready(function($){
    
    	// Convert label to placeholder
    	<?php
    		$gfap_class_pc = get_option('gfap_class');
    		if ($gfap_class_pc) {
    			$gfap_class = 'gfap_placeholder';
    		}
    		else {
    			$gfap_class = 'gform_wrapper';
    		}
    	?>
    	$.each($('.<?php echo $gfap_class; ?> input, .<?php echo $gfap_class; ?> textarea'), function () {
    		var gfapId = this.id;
    		var gfapLabel = $('label[for=' + gfapId + ']');
    		$(gfapLabel).hide();
    		var gfapLabelValue = $(gfapLabel).text();
    		$(this).attr('placeholder',gfapLabelValue);
    	});
    
    	// Use modernizr to add placeholders for IE
    	if(!Modernizr.input.placeholder){$("input,textarea").each(function(){if($(this).val()=="" && $(this).attr("placeholder")!=""){$(this).val($(this).attr("placeholder"));$(this).focus(function(){if($(this).val()==$(this).attr("placeholder")) $(this).val("");});$(this).blur(function(){if($(this).val()=="") $(this).val($(this).attr("placeholder"));});}});}
    
    // Ends allowance of jQuery to $ shortcut
    });
    </script>
    
    <?php
    
    }
    
    add_action('wp_head', 'gfap_script');
    
    ?>

    Thanks to everyone that helps me out! Appreciate it!

    Posted 9 years ago on Thursday August 23, 2012 | Permalink