If you don't already know, Gravity Forms is the easiest to use WordPress contact form plugin out there. We use it on our WordPress Gallery site, WordPress Coupon site, and almost every new customer as well. Recently, while working on a client site, we had to modify the form style to match the layout that required us to put the placeholder text in Gravity Forms. Unfortunately and surprisingly, this feature is not built into Gravity Forms (Yet). While they have an option to add placeholder text in dropdown fields and post field:category, there is no option to add placeholder in input fields and textarea fields. This became a big problem for us. We searched the Gravity forms support area where the only solution available was a hack that didn't even work properly. While it did allow us to put placeholder text, it had major issues. If the user just hits submit without completing the field, the form will validate instead of returning errors. After a good search, we ended up finding the solution. In this article, we'll show you how to add placeholder text to gravity forms using jQuery and gravity form filters.
So you're probably wondering why on earth we need placeholder text when there are labels. Well, in the design we were working on, we couldn't use tags for styling purposes.
All we had to do was add a function using Gravity Forms filters and use jQuery to generate the text.
The final code is below. You can simply copy and paste this into your functions.php file and have it work. But if you want to read more about the feature and how it works, then continue reading the article. Also continue reading to see how to add placeholder text in dropdown fields.
So the first thing we had to do was add a placeholder value to the Gravity Forms fields in the admin panel. To do so, you need to open your theme's functions.php file and paste the following code:
This small part of the function will add a placeholder text field to the Gravity Forms backend. Example screenshot is below:
Now that we've added the field to the admin panel, you can go ahead and fill in whatever text you'd like. The next step is to display the text in the actual form. To do this, we will use jQuery. What you need to do is paste the following code in your theme's functions.php file right after the above code:
/ * Usamos jQuery para leer el valor del marcador de posición e inyectarlo en su campo * / add_action ('gform_enqueue_scripts', "my_gform_enqueue_scripts", 10, 2); function my_gform_enqueue_scripts ($ form, $ is_ajax = false) ?> jQuery (function () $ field) / * Compruebe si el campo tiene un marcador de posición asignado * / if (isset ($ field ['placeholder']) &&! vacío ($ campo ['marcador de posición'])) / * Si existe un texto de marcador de posición, inyectarlo como una nueva propiedad en el campo usando jQuery * /?> jQuery ('# input __'). attr ('placeholder', ' '); );
This will output the placeholder text in the input fields and textarea fields and keep it validated. Now that we've covered this, we still needed to add some placeholder text to our dropdown fields which this little snippet doesn't do for us. Fortunately, Gravity Forms has that built in by default.
Add placeholder text in gravity forms dropdown field
All you really need to do is create a label with a blank value. Yeah, that seemed confusing to us when we first heard it too. But it really is not. So add a dropdown field in Gravity Forms. Click the checkbox that says Enable Values. Then add a label with a blank value. See the screenshot below:
That's all you have to do to add placeholder text in gravity forms. You're probably wondering if this is the WordPress contact form plugin for beginners, why haven't you added something so simple already? Well, we wonder exactly the same thing. So our founder @syedbalkhi got in touch with one of Gravity Forms partners, Carl Hancock. Below is the conversation they had:
So, as you can see, this is something you're aware of, and it will be added in future releases. To see all the amazing things gravity forms can do, just check out our post on gravity forms.
Thanks for the awesome function and jQuery snippet goes to Jorge Pedret (@jorgepedret).