Best Way to Use Placeholder Text? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Jonathan
Member

What is the best way to use placeholder text with Gravity Forms instead of using labels? Or, is there a significant usability reason to always include labels with forms?

Thanks.

Posted 12 years ago on Tuesday April 10, 2012 | Permalink
Rob Harrell
Member

Sometimes, people want to place their labels within their inputs, either by using the placeholder text as you've mentioned and then hiding the label via CSS, or by actually placing the label itself within the input (which can be done via jQuery).

I think a common rule/considertion of label usage is most dependent upon the device that is being used. But here is a good write up by Luke W on the topic, as well as links in the article about label placement:

http://www.lukew.com/ff/entry.asp?687

For clearing placeholder text via jQuery you can see this here:

http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

Posted 12 years ago on Wednesday April 11, 2012 | Permalink
Jonathan
Member

Thanks a lot for your feedback. I am trying to use the script listed at http://askwpgirl.com/gravity-forms-placeholder-text-works-with-ie/ to add placeholder values, but I am running into a small issue.

I am using the gform_enqueue_scripts action to call the function and run my JavaScript. This works when the form first loads, but if there are any validation errors it doesn't seem to run again. Is there a different hook I can use that would work?

Thanks a lot for your help.

Jonathan

Posted 12 years ago on Wednesday April 11, 2012 | Permalink
Rob Harrell
Member

Im not familiar with that approach you are trying, and it seems fairly involved because it looks like it's trying to write in the placeholder attribute I'd imagine. The link I gave you above should be much simpler.

Since there isn't currently a way to add "placeholder" text, you could hide the existing field labels with a CSS rule, then you can use the method in the link I supplied (using default values) to emulate placeholder text inside the inputs, which clears onclick.

Posted 12 years ago on Wednesday April 11, 2012 | Permalink
Jonathan
Member

The issue I see with that approach is that required fields are submitted even if no text has been entered.

I know you can write custom php to make it not validate, but we would have to do that individually for each form, which would probably get very time consuming.

When the form is recreated after validation, is there an action besides gform_enqueue_scripts that runs so we can add our custom javacript?

Thanks again for the help.

Posted 12 years ago on Wednesday April 11, 2012 | Permalink
Alex Cancado
Administrator

The gform_post_render javascript hook will fire every time a form gets loaded. That might be what you are looking for.
http://www.gravityhelp.com/documentation/page/Gform_post_render

Posted 12 years ago on Thursday April 12, 2012 | Permalink
Jonathan
Member

Hmm, the problem is that I need to run PHP since the placeholder value is kept in a field in Gravity Forms. Any other suggestions?

Thanks for all the help guys.

Posted 12 years ago on Thursday April 12, 2012 | Permalink
Alex Cancado
Administrator

Is your form and AJAX form? If not, gform_enqueue_scripts should fire when the form is being loaded with a validation error. Can you post your custom code so that I can take look?

Posted 12 years ago on Friday April 13, 2012 | Permalink
Jonathan
Member

Thanks a ton Alex. I can't believe I didn't think about turning off AJAX. Once I did that it worked perfectly. I appreciate you guys working with me so much on this one.

Posted 12 years ago on Friday April 13, 2012 | Permalink
Rob Harrell
Member

Right on, glad you got it working.

Posted 12 years ago on Saturday April 14, 2012 | Permalink

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