Surprisingly Gravity Forms hasn’t implemented the placeholder feature for Gravity Forms input elements. The placeholder allows you to show placeholder text inside the field instead of using field labels to create more concise looking forms like this:
On June 22, 2011, Jorge Pedret, a freelance web developer, came up with a solution to the Gravity Forms placeholder problem with a clever function and script that could be added to your theme’s functions.php file. Unfortunately, the solution he posted didn’t work with non-html 5 compliant browsers, such as IE 7 and IE 8.
On September 15, 2011, WP Beginner reposted Jorge’s solution, yet it still didn’t work on IE. Luckily, an astute reader of WP Beginner, chood531, solved the problem and posted some code on pastebin, however, the code was only partial, so not the complete solution and validation errors ended up removing the placeholder values in IE 8, so the form was inscrutable.
Luckily, a cool programmer created a nifty plugin to take care of all of this: Gravity Forms Placeholders Add-on. (There is another plugin called Gravity Forms Auto Placeholders, but it’s a bit buggy with IE 8 which sort of defeats the purpose. It can conflict with other Javascript on the site as well.)
To use the Gravity Forms Placeholders Add-On plugin, go to Plugins > Add New and search for Gravity Forms Placeholder. Install the one by Joan Piedra.
After installing the plugin, edit each of your forms. For each field on the form, click the Advanced tab. In the CSS Class Name field, type: gplaceholder
Save your changes. This will now use the field label as the placeholder text on the form.
Thanks WordPress Girl:
This looks like it is going to work for me I am just having one problem. I am changing the CSS to work with my site and have changed the input text color and that works fine, but the placeholder text is still light grey and I can not find the CSS to change it.
Could you tell me the CSS selector for the placeholder text please?
.gform_wrapper .top_label select.medium
I had to preface this with the div I had it in on my site in order to change this in my custom.css file.
Check functionality on IE 7 and 8. I changed the jquery for this to onfocus, because the text was completely disappearing. I’ll put new code above.
Found it
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color: #45290F;}input:-moz-placeholder, textarea:-moz-placeholder { color: #45290F;}
Not sure that will work across browsers. How about this:
.custom .gform_wrapper input { color: #45290F; } – for the color you want to use for the user’s input of text in the fields
.gform_wrapper .top_label select..gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea – for the placeholder text { color: #45290F; }
You’ll see both of these using Firebug. What version of Firefox are you using? The above works with current version of FF.
Firefox shows the brown by default but webkit browsers show grey, I do most of my development work in Chrome
Thanks for the information! I’ll do some more research and append this post with some suggested CSS selectors for this.
I just changed the jquery for IE, so please recopy the code. I added onfocus: ‘this.select();’}); to make it function better in IE when people clicked in the input box.
I have successfully implemented this, however in Chrome, when a user clicks on an input field the text does not clear or disappear. In Firefox it does. Anybody have any clue why this is the case?
This might work:
input:focus::-webkit-input-placeholder {
color: transparent;
}
Yup, the above works in the stylesheet, but you may need to preface it with the div and perhaps .gform_wrapper. In my stylesheet, I entered it like this:
#sidebar .gform_wrapper input:focus::-webkit-input-placeholder {
color: transparent;
}
Worked like a charm. Thank you.
Awesome!
I really like what you proposed and I actually used it along with the jQuery Placeholder plugin (https://github.com/mathiasbynens/jquery-placeholder) to make it work with IE. The problem I am running in to is that if the form reloads with validation errors then the placeholder text is not added. Any ideas on how to fix this?
After running into a couple of issues, I finally figured out a way to do this that doesn’t require javascript to be run on the front end and actually places the placeholder attribute in from the start. I’d love to hear your thoughts Angela.
Basically, replace the last action call for gform_enqueue_scripts and the function with this:
add_filter(“gform_field_content”, “wi_gform_add_placeholder”, 10, 5);function wi_gform_add_placeholder($content, $field, $value, $lead_id, $form_id){ if (isset($field['placeholder']) && !empty($field['placeholder'])) { $content = str_replace(‘id=’, ‘placeholder=”‘ . $field['placeholder'] . ‘” id=’, $content); return $content; } return $content;}
That will add the placeholder if it exists or return the original field content if it doesn’t exist.
Hi Jonathan,
I’ll test that out. Does it work on IE 7 and IE 8?
It will work in IE7 and IE8 as long as you use the jQuery Placeholder plugin (
https://github.com/mathiasbynens/jquery-placeholder).
Guys, I came up with a solution for placeholder using the title value.
function placeholder(){ $(“input[type=text]“).each(function(){ var titleValue = $(this).attr(“title”); if ($(this).val() == “”) { $(this).val(titleValue); $(this).css(‘color’, ‘#a6a6a6′); } }); } placeholder(); $(“input[type=text]“).focusin(function(){ var titleValue = $(this).attr(“title”); if ($(this).val() == titleValue) { $(this).val(“”); $(this).css(‘color’, ‘#333′); } }); $(“input[type=text]“).focusout(function(){ var phvalue = $(this).attr(“title”); if ($(this).val() == “”) { $(this).val(phvalue); $(this).css(‘color’, ‘#a6a6a6′); } });
Great solution. Any way to make it work with http://wpml.org/documentation/related-projects/gravity-forms-multilingual/? I can’t seem to get it to work
Nevermind, found a much more convenient solution without even having to use this solution to start with. Placeholders are generated with the actual label value:
jQuery(‘.gfield’).each(function(index) { var labelval = jQuery(this).find(‘label’).text(); jQuery(this).find(‘input, textarea’).attr(‘placeholder’, labelval);});
Thanks for sharing this – was able to tweak this to be exactly what I needed for a project I’m working on.
Hi Christi, I will be rewriting this post as there is now a new plugin you can get and not deal with this code. http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/ This plugin is great because it will work correctly IE 7 and IE 8 with validation errors. So skip all my instructions and just install the plugin, and you’re good to go!
Thanks for all the info. Do any of these plugins/code snippets allow for place holders in advanced form elements with multiple fields? For example the email field with confirmation (put a place holder in both the first and second email field) or the “address” field (put place holder for street address, address line 2, city, etc…).
Hi Jesse,
I’m going to rewrite this post and remove ALL of the code here and instead recommend that people use a new plugin called Gravity Forms Auto Placeholders: http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/
It works like a charm, and you don’t have to muck with any code or even having to assign placeholder values. I’ll put up a screenshot with example forms.
Yeah, I saw your recommendation for that plugin. I just wanted to know if it has the functionality I specified in my first comment (placeholders for advanced fields). If not, are you aware of anything that does allow for this? Thanks.
Yes, it does work with the advanced fields. For example, the Name field which automatically creates First and Last name fields. However, it also adds the field label “Name” to the placholder value, eg. “NameFirst.” So, you’ll want to delete the label for the advanced fields, so it doesn’t get included along with the placholder value if that makes sense. Certainly worth trying out!
Hi Angela,
The “Gravity Forms Auto Placeholders” plugin has a bug on IE9 where the form shows that the form data was submitted successfully but the notification email address does not receive the form data. If you simply want to hide labels and replace them with placeholders, the “Gravity Forms – Placeholders add-on” plugin works well.
Hi Greg,
I have had the Gravity Forms – Placeholders Add-on plugin not work at all on some sites. So, it would seem that both of these plugins have the potential of conflicting with other plugins or Javascript on the site. The plugin I recommended works great on the sites I’m using it on and the plugin you recommend doesn’t. So, it seems to be sensitive. The problem I have found with the one I recommend is that if validation fails for a field, it doesn’t always validate for the required fields. I think Gravity Forms really needs to integrate placeholder values in a future release.
Not so often do I find code on a blog that not only works but works flawlessly for exactley what I need! This works in Studiopress themes sans the start and end PHP tags. Looks great in all browsers although Chrome is a little too light of a gray but who cares. I just needed it for a text box for details at the end of a form. Nor sure why this isn’t standard equipment in GF.
Thanks so much for posting this! Also the copy to clipboard button isnt working anymore and if you select all the text you get the line numbers with it. Only way to get it clean now is the view source button. Maybe that’s by design?
Hi Chris,
I’m glad the code worked for you. However, if there are validation errors, I’ve found that in IE 8, the field values do not display again, which is a problem. So, I’ve been using one of the two plugins listed below in the previous comments, and they work great and then you don’t have to mess around with all this code.