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.

Add HTML5 placeholder without losing Field label

  1. How can I add an HTML5 placeholder, that doesn't use the field label the way the 3rd party plugins do.

    The field label and the placeholder are not the same thing and using one for the other is a poor hack.

    Posted 6 years ago on Thursday July 11, 2013 | Permalink
  2. Richard Vav
    Administrator

    I agree, the HTML5 placeholder was not designed to replace to field label, rather to be used in conjunction with it.

    I am currently only aware of one plugin which adds placeholders the correct way and that is Gravity Perks, it is a premium plugin so if that's not for you there is an alternative method which involves adding some code to your theme's functions file, however it doesn't add placeholders to the same number of field types that Gravity Perks does.

    It was posted in this topic but here's the full code, what it does is add a placeholder option to the field settings panel in the form editor.

    add_action("gform_field_standard_settings", "jtd_gform_placeholders", 10, 2);
    function jtd_gform_placeholders($position, $form_id){
      // Create settings on position 25 (right after Field Label)
      if ( $position == 25 ) {
      ?>
        <li class="admin_label_setting field_setting" style="display: list-item; ">
          <label for="field_placeholder">Placeholder Text
            <!-- Tooltip to help users understand what this field does -->
            <a href="javascript:void(0);" class="tooltip tooltip_form_field_placeholder" tooltip="<h6>Placeholder</h6>Enter the placeholder/default text for this field.">(?)</a>
          </label>
          <input type="text" id="field_placeholder" class="fieldwidth-3" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">
        </li>
      <?php
      }
    }
    
    /* Now we execute some javascript technicalities for the field to load correctly */
    add_action("gform_editor_js", "jtd_gform_editor_js");
    function jtd_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
    }
    
    /* We use jQuery to read the placeholder value and inject it to its field */
    add_action('gform_pre_render',"jtd_gform_init_scripts", 10, 2);
    function jtd_gform_init_scripts( $form ) {
        $script = "";
        /* 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 */
              $script .= "jQuery('#input_{$form['id']}_{$field['id']}').attr('placeholder','{$field['placeholder']}');";
            }
        }
        GFFormDisplay::add_init_script($form["id"], 'jtd_placeholder', GFFormDisplay::ON_PAGE_RENDER, $script);
        return $form;
    }
    Posted 6 years ago on Thursday July 11, 2013 | Permalink
  3. Thanks Richard. FYI, the source of that code is http://www.wpbeginner.com/wp-tutorials/how-to-add-placeholder-text-in-gravity-forms/

    I ended up finding and using it, worked fine (so far). Baffles me this isn't in BG core after all this time.

    I hadn't heard of GravityPerks before, wish I had! It would have saved me hacking 4 things missing from GF onto this one site today (including the placeholders). Next time...

    Posted 6 years ago on Thursday July 11, 2013 | Permalink
  4. Richard Vav
    Administrator

    One thing to keep in mind if using the original is that in the code I pasted above Lines 30 onwards have been updated recently by Alex our lead developer to improve compatibility with ajax enabled forms.

    Posted 6 years ago on Thursday July 11, 2013 | Permalink
  5. pyroboy024
    Member

    ive tried add several different flavors of that code above and every time it breaks my functions.php im stuck with using the field plugin but how can i get around the asterisk for required fields?

    Posted 6 years ago on Thursday July 11, 2013 | Permalink
  6. Richard Vav
    Administrator

    @pyroboy024 if you fill in our new request support form we'll see what we can do about getting that function working for you.

    Regards,
    Richard

    Posted 6 years ago on Thursday July 11, 2013 | Permalink

This topic has been resolved and has been closed to new replies.