Table of Contents
Introduction
Gravity Forms is one of the most powerful form builder plugins for WordPress. It comes with features that let you create complex forms using pagination, conditional logic, and complex fields, but when it comes to explaining those complex form fields to users, you only have the option to rely on field descriptions.
Field descriptions make the forms look more complex and busy. Tooltips for Gravity Forms are a game-changer in terms of helping users understand the fields.
To better understand how beneficial tooltips with media can be, let’s imagine this:
- You have a field where users must upload both the front and back of their driving license. Most users are unsure how to upload multiple files in the upload field. You use the tooltips with a GIF image to show how to select multiple images.
Why Add Media to Tooltips?
Adding images and GIFs will help your users in multiple ways
- Understand complex fields without reading long text
- Reduce form abandonment by making the process visual and intuitive
- Improve mobile user experience with quick visual cues
Many users abandon the forms when they don’t fully understand what data should be filled in the fields. Media-rich tooltips solve this issue instantly.
What You’ll Need
- WordPress site with Gravity Forms
- WPMonks Tooltips Add-on for Gravity Forms
- A few helpful images or GIFs related to your form fields
Upload your Image or GIF in WordPress
Before you can add an image or GIF in your Gravity Forms field tooltip, you have to upload it to your media library and get its URL. To do so, follow these steps.
- From your WordPress dashboard, navigate to Media -> Add New.
- Upload the Image or GIF from your computer.
- Copy the URL of the upload file and keep it somewhere, as we will use it later.
Steps to Add Image or GIF Tooltips in Gravity Forms
- Install and activate the Tooltips for Gravity Forms plugin by WPMonks.
- Go to Forms -> Booster for your WordPress dashboard.
- Select the form in which you want to add image/GIF tooltips.
- Navigate to the tooltips panel and then enable the tooltips.
- Click on the field for which you want to add the tooltip. Now, copy and paste the following code and replace the URL with your image/GIF URL.
<img src="replace-here" alt="PAN Card Example" width="200"> - Save the changes, and that’s it.
There are plenty of styling options to change the animation, position, and colors of the tooltips. You can check the detailed guide for Gravity Forms tooltips here.
Tooltips Images/GIFs Optimization Tips
- Use compressed images and GIFs so that they don’t slow down your website loading speed.
- Avoid large dimension images. We recommend you stick to sizes under 400px.
- Always check the view on mobile devices to see how good the images look on smaller devices.
If you have any queries about Tooltips for Gravity Forms, then reach out to us using the comment section below.
0 Comments