Sometimes, usually due to lack of screen real estate, designers will design a form where the field's labels are displayed within the input field themselves, rather than sitting above or below them. I'll admit, they can look nice from a design perspective, but I'm not a big fan of displaying forms like this for usability and accessibility reasons. I'm not alone here either, there's lots and lots of experts that agree. With that said though, sometimes you just have to do what the designer wants.
One of the more commonly used WordPress plugins is Gravity Forms. It makes creating powerful forms, super easy. Unfortunately, Gravity Forms only allows you to place the labels on top of the field or left or right aligned. To get around this though, you can specify a default value for the form field and then simply hide the original label.
The Gravity Forms help pages also has a nifty little bit of jQuery that will clear the default value when you click on the input field. To set this up, simply specify a default value for your Gravity Form field and then also give it a class of ‘clearit' (without the apostrophes). You can see this explained in more detail here… http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery
The problem with this solution though, is that since the field has a value you're able to submit the form with these default values, which is not what you want. This is especially annoying when you have fields specified as ‘required' as they will validate, even though no value has been entered (since it already has the default value in the field).
To get around this, use this custom validation filter. It will check to see if the Gravity Form field has a default value and if it does, it will then check the value submitted against the default value and if they match, it will fail the validation. Simple eh!
Obviously, you don't wont to use this if you actually want the default values to be submitted. But you knew that right!?
Go check out my code on GitHub. You simply need to integrate the php, jQuery and css, into your WordPress theme. Might sound complicated but don't worry, I think you'll find it's all pretty easy.
UPDATED!
There was a question posted below from James asking how to only check the fields that are marked as ‘Required', rather than all default values. This was a good question and I thought others might find the answer useful as well. So… if you’d like to only check the “Required” fields, then you can simply add in an extra check to see if the field is ‘required'. To do this, simply change the following line…
if ( !empty( $field['defaultValue'] ) && $field['defaultValue'] === $value_number ) {
with this line…
if ( !empty( $field['defaultValue'] ) && $field['defaultValue'] === $value_number && $field['isRequired'] ) {
And that should do the trick. I hope that helps 🙂
Hey Anthony – Maybe I missed something but looks like the CSS will hide labels on ALL forms. What’s the workaround to use this but only hide labels for ONE form (other than creating another special CSS instance).
Ahh yeah, good pickup Michael. Easy to fix. In the CSS, simply change the .gform_wrapper class to #gform_wrapper_1. This will just target the form with ID 1, the same as the filter. I’ve updated the code on GitHub.
It’s interesting to note, that’s pretty much how you target indivual forms in Gravity Forms, no matter whether you’re talking about classes, filters or the like. Simply add an underscore and the ID (eg. _1). Thanks for letting me know 🙂
Good stuff, Anthony. Another way to accomplish this is with placeholders. I’ve got a plugin for that with Gravity Perks and there are a couple free (but less awesome *wink*) plugins on WP.org that add placeholder support. Any GF placeholder solution would work well with your CSS for hiding the labels. Placeholders are going to be implemented in Gravity Forms core soon as well.
Oh nice! That’s a great solution as well David. Thanks for that. Great plugin also. Well done!
Hi Anthony, a great function for Gravity Forms, but it seems to try and validate ANY field with a default value, even if it’s not marked as required in the form. Any ideas on a solution?
Hi James! If you’d like to only check the “Required” fields, then you can simply add in an extra check to see if the field is required. To do this, simply change the following line…
if ( !empty( $field['defaultValue'] ) && $field['defaultValue'] === $value_number ) {with this line…
if ( !empty( $field['defaultValue'] ) && $field['defaultValue'] === $value_number && $field['isRequired'] ) {If hope that helps. I’ve also updated my post with the answer as I could see other people finding this useful as well. Thanks for the great question! 🙂
Hi Anthony, that works perfectly, thanks for the update!
You’re very welcome James. Great to hear! 🙂
As an extension of this, what if the field is using a Gravity Forms input mask? This seems to take precedence over any other jQuery.
Good question James. Unfortunately, I haven’t tested it out with fields that use input masks, as yet.