Search

Display Tooltips for Gravity Forms Fields

Listen to this article
tooltip-gravity-forms-field
Tooltip for Gravity Forms

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?

[space]

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.

tooltip-gravity-forms-front-end

[space]

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

We can add a new field, either under the Standard settings tab (using the gform_field_standard_settings ) or under the Advanced settings tab (using the gform_field_advanced_settings hook).

tooltip-gform-field

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?

tooltip-gravity-forms-radio-options

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).

tooltip-option-front-end

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.

  1. When the form is displayed, the tooltip image has to be placed next to a Field Label, using the gform_field_content hook.
  2. This tooltip content is added as part of the image in a span element
  3. Using CSS we then have to display the tooltip content.

[space]

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!

[space]

[space]
[freepik]

Aparna Gawade

Aparna Gawade

12 Responses

  1. Hi

    I also want the tool tip on each option wise.

    Can any one please help me and let me know how can i do this?

    1. Marco, there isn’t a setting. Displaying HTML content could be a simple change in the plugin’s code. You could contact the plugin’s author for this.

  2. Hi

    I also want the tool tip on each option wise.

    We are using graviti form Version 2.3.3.2 but doesn’t display any option here.

    Can any one please help me and let me know how can i do this?

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »