Create placeholder and keep placeholder while using ajax during validation

Hi,

This is not a question, but I have struggled a bit with this and thought that if others did as well, they don't need to purchase a gravity perks piece of software which is actually more expensive than the plugin itself.

I ran into the problem that 1) I needed placeholders instead of labels for my field, and with that solved, I experienced that these placeholders were being removed on form validation errors when using ajax.

Its not a very clean fix, but with a little help of javascript I managed to solve my problem.

1) create a 'custom' validation error message in functions.php

add the following code to functions.php:

add_filter("gform_validation_message_1", "change_message", 10, 2);
function change_message($message, $form){
  return "<script>placeholder();</script><p>This is your validation error text</p>" . $form["contact"];

}

Notice I included a javascript function, that's for later. Documentation on this: http://www.gravityhelp.com/documentation/page/Gform_validation_message

Now also put in the code that will add placeholder fields in GF (in functions.php):

/* Copy this code in the functions.php file */
add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);
function my_standard_settings($position, $form_id){
    // Create settings on position 25 (right after Field Label)
    if($position == 25){
        ?>
        <li style="display: list-item; ">
            <label for="field_placeholder">Placeholder Text
                <!-- Tooltip to help users understand what this field does -->
                <a href="javascript:void(0);" tooltip="<h6>Placeholder</h6>Enter the placeholder/default text for this field.">(?)</a>
            </label>
            <input type="text" id="field_placeholder" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">
        </li>
        <?php
    }
}

/* Copy this code in the functions.php file */
add_action("gform_editor_js", "my_gform_editor_js");
function my_gform_editor_js(){
    ?>
    <script>
        //binding to the load field settings event to initialize the checkbox
        jQuery(document).bind("gform_load_field_settings", function(event, field, form){
            jQuery("#field_placeholder").val(field["placeholder"]);
        });
    </script>
    <?php
}

/* Copy this code in the functions.php file */
add_action('gform_enqueue_scripts',"my_gform_enqueue_scripts", 10, 2);
function my_gform_enqueue_scripts($form, $is_ajax=false){
    ?>

<script>
    jQuery(function(){
        <?php
        /* Go through each one of the form fields */
        foreach($form['fields'] as $i=>$field){
            /* Check if the field has an assigned placeholder */
            if(isset($field['placeholder']) && !empty($field['placeholder'])){
                /* If a placeholder text exists, inject it as a new property to the field using jQuery */
                ?>
                jQuery('#input_<?php echo $form['id']?>_<?php echo $field['id']?>').attr('placeholder','<?php echo $field['placeholder']?>');
                <?php
            }
        }
        ?>
    });
    </script>
    <?php
}

script source: http://www.bogdan-nikolic.com/wordpress-gravity-forms-placeholder-which-works-with-ajax-validation/#comment-100 (it says it works with ajax but for me it doesnt after form validation errors)

Now lastly, add the function you added in the error message to your page:

<script>

	function placeholder() {
	 $('#input_1_1').attr('placeholder','Message *');
     $('#input_1_2').attr('placeholder','Name *');
  }

</script>

I just created 2 for the fields with id input_1_1 and 1_2, but you can figure it out.

Again, not a clean fix, but a fix. if anyone knows a cleaner solution (via functions.php) I am happy to hear from you.