Okay, here’s a question. Which form is easier to fill? A Contact Form or an Income Tax Returns Application. Do not go by the complexity of the form name itself. It’s actually the contents that make the form difficult to fill. Think about it. As a service provider, you may have a bunch of complicated forms on your site, which visitors have to fill. It helps, when you clearly describe what each field stands for, or provide them with a form-filling guide.
Usually, field descriptors are present alongside the field to make the process simpler. Gravity Forms have thought of this. If you’ve ever built a form using the Gravity Forms plugin, you’ll notice descriptors for every field and field property. This makes it simple to create the form.
And what about visitors who have to fill the form? Gravity Forms provides a ‘Description’ field, which is displayed to a visitor in the front-end. You also have two options- to display the text, above a field, or below it. It works fine when you have a one-line description. But what about when the description has to be elaborate? Or when you would need to add additional data, other than just text?
Here’s a (Tool) Tip
In such cases, what helps, is a Tooltip – a hint or message which can be displayed dynamically. The advantage of adding field descriptions to a tooltip is that your form does not appear bulky. The tooltip is hidden, and only visible when a form reader, is interested in viewing details about a particular field. And, what’s more, is that you can add all sorts of content, such as images, links, videos, as tooltips.
Adding Field Descriptions in Gravity Forms
So, the obvious question we would have now, is how do we display tooltips for form fields? We have two options. The first option, is to render the field description (provided by Gravity Forms), as a tooltip (seems simple, but is not!). And the second, is to create a completely independent tooltip field (we’ll pick this one. Having a different field, allows us to add media content as well).
So, we’ll go ahead, and create a new field, where tooltip information will be added, and then display the content as a tooltip on the front-end (for the form field).
Add a Tooltip Field in the Form Builder
This field can accept HTML content, which means, you can add links or images, or embed videos.
Hint: You could host your videos on Wistia, and use them on Your WordPress site. Here’s how.
But, we still have one challenge here. The above hook will allow us to add tooltips at a field level. But what when you have to add descriptions for each checkbox or radio button option?
In such cases, there isn’t an available hook or filter which we can use. Instead, we’ll have to customize the core of the Gravity Forms plugin itself. So although there is a solution, it is a complicated one (and a topic for another day).
Displaying the Tooltip
Once we’ve decided where the content for the tooltip has to be added, our job is half done. Now, the other half is displaying the content. We have to now ensure, that we can display the content as a tooltip on the form’s front-end.
For this, we’ll make use of an image (and place it next to the form field), to indicate that a tooltip is available for the field. This tooltip has to be displayed, when a visitor hovers over the image, using CSS.
- When the form is displayed, the tooltip image has to be placed next to a Field Label, using the gform_field_content hook.
- This tooltip content is added as part of the image in a span element
- Using CSS we then have to display the tooltip content.
This solution might be a bit tricky to implement. But as mentioned there are hooks available to provide a solution, which not affect updates. However, if you want to add tooltips at the granular level, (as mentioned), you might have to alter the core plugin itself (hopefully Gravity Forms will provide us hooks for these as well). That’s all from me for now! Do leave your comments and questions in the comment section below!
Images by freepik