Gravity Support Forums Topic: Add HTML5 placeholder without losing Field label

Gravity Support Forums Topic: Add HTML5 placeholder without losing Field label https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label Gravity Support Forums Topic: Add HTML5 placeholder without losing Field label en-US Sat, 04 Apr 2026 14:19:52 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Richard Vav on "Add HTML5 placeholder without losing Field label" https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label#post-375977 Thu, 11 Jul 2013 16:00:42 +0000 Richard Vav 375977@https://legacy.forums.gravityhelp.com/ @pyroboy024 if you fill in our new <a href="http://www.gravityhelp.com/request-support/" rel="nofollow">request support form</a> we'll see what we can do about getting that function working for you. Regards, Richard pyroboy024 on "Add HTML5 placeholder without losing Field label" https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label#post-375648 Thu, 11 Jul 2013 11:02:17 +0000 pyroboy024 375648@https://legacy.forums.gravityhelp.com/ 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? Richard Vav on "Add HTML5 placeholder without losing Field label" https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label#post-375278 Thu, 11 Jul 2013 06:20:43 +0000 Richard Vav 375278@https://legacy.forums.gravityhelp.com/ 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. jb510 on "Add HTML5 placeholder without losing Field label" https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label#post-375266 Thu, 11 Jul 2013 06:14:03 +0000 jb510 375266@https://legacy.forums.gravityhelp.com/ Thanks Richard. FYI, the source of that code is <a href="http://www.wpbeginner.com/wp-tutorials/how-to-add-placeholder-text-in-gravity-forms/" rel="nofollow">http://www.wpbeginner.com/wp-tutorials/how-to-add-placeholder-text-in-gravity-forms/</a> 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... Richard Vav on "Add HTML5 placeholder without losing Field label" https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label#post-375084 Thu, 11 Jul 2013 04:22:10 +0000 Richard Vav 375084@https://legacy.forums.gravityhelp.com/ 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 <a href="http://gravitywiz.com/gravity-perks/" rel="nofollow">Gravity Perks</a>, 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 <a href="http://www.gravityhelp.com/forums/topic/gform_enqueue_scripts-injects-script-into-iframe-on-validation-error?message=closed" rel="nofollow">this topic</a> but here's the full code, what it does is add a placeholder option to the field settings panel in the form editor. <pre><code>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  <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; }</code></pre> jb510 on "Add HTML5 placeholder without losing Field label" https://legacy.forums.gravityhelp.com/topic/add-html5-placeholder-without-losing-field-label#post-374832 Thu, 11 Jul 2013 01:41:17 +0000 jb510 374832@https://legacy.forums.gravityhelp.com/ 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.