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