Introduction

Increasing form conversions is one of the most essential parts of any online business. Making it easier for users to fill out and submit the form requires a lot of deliberation. You can’t have lengthy labels for form fields, but you also don’t want users to abandon the form if they don’t understand what to fill in the field.

Tooltips are one of the best ways to show details about a particular field label, only if the user needs it. This way, the form will retain its compactness without sacrificing functionality. Tooltips act as instructions or details about the field, so it’s easier for users to understand and fill the field appropriately. Adding them will prevent form submissions with wrong information, helping you get better form submissions.

WPForms doesn’t have built-in tooltip support. They have an option to enter a field description, which shows beneath each field. Although descriptions can be helpful however having a description for each field will make your form look too lengthy and can be scary for users.

Descriptions VS Tooltips in WPForms

Let’s say you have 10 fields on your form, and you set a description for each field, then it will have the following implications

• The form will become too crowded with text
• The form will become too lengthy, and users may need to scroll to see the complete form.
• You can’t show video instructions or images in the description ( showing them will result in a bad user experience ).

All the above issues can be easily solved by using tooltips instead of descriptions, as it won’t increase the form length, and you can show any content you like, videos, images, etc.

How to Add Tooltips in WPForms

Adding tooltips in WPForms doesn’t require you to write any code. It can be easily done with the help of Tooltips for the WPForms plugin.

Requirements for Adding Tooltips in WPForms

• Ultimate Kit for WPForms
• Tooltips for WPForms

Step-by-Step Tutorial for Adding Tooltips

• Once you have installed and activated Ultimate Kit for WPForms and Tooltips for WPForms plugins, navigate to WPForms -> Ultimate Kit from your WordPress dashboard.
• Now select the form in which you want to add tooltips.
• Now, navigate to the Tooltips panel.
• You will see the form tooltip settings on the left sidebar and the form preview on the right. All the tooltip changes you will make will be previewed instantly in the form preview.

Tooltips Settings for WPForms Fields

You will find the following tooltip settings for the WPForm fields

• Enable Form Tooltips: Check this option to enable tooltips for this form. If the option is not checked, then tooltips won’t show on the frontend as well as the live preview.
• Icon Type: You can you built-in Image icons or upload images. If you select the custom icon option, then you will get the option to select an image from the media library.
• Icon Size: Here, you can set the size of the icon. The icon shouldn’t be too large or too small in comparison to the size of the label, or else it will hamper the user experience. 
• Icon left margin: This setting lets to move the icon away from the field label so that there is some space between them. If there is no appropriate space between the label and icon, then it won’t look good.
• Icon top margin: It lets you move the icons towards the bottom.
• Tooltip Animation: When the user hovers over the tooltip icon then the actual tooltip text is shown. The selected animation will apply when the tooltip text is shown. You can choose from 5 different animations: shift away, shift toward, fade, scale, and perspective.
• Tooltip Position: It is also possible to move the tooltip text container to the left, right, top, or bottom of the tooltip icon. If, for some reason, space is not available to show the tooltip container in the selected position, then the tooltip container will be automatically moved to a location where it is visible to the user.
• Tooltip maximum width: If you want to limit the length of the tooltip text container field, then it can be done from here.
• Tooltip Theme: You can select from beautifully crafted tooltip themes. There are 6 different themes to choose from: default, light, borderless, punk, and noir. However, if you want more customizations for the design,n then you can create your own theme as well by selecting the custom option.

Settings for Custom Tooltip theme

If you have selected the Custom option under the Tooltip Theme, then you can customize the tooltip theme with the following settings.

• Tooltip Background Color: It is the color of the background shown inside the text container of the tooltip.
• Tooltip Font Size: It is the size of the tooltip text.
• Tooltip Font Color: It is the color of the tooltip text. The tooltip’s background color and font color shouldn’t be similar, as it will make it difficult to read the text.
• Border Size: It is the width of the border for the tooltip text container.
• Border Radius: If you want to make the edges of the tooltip container round, then it can be done from here.
• Tooltip Border Color: It can be used to set the color of the border of the tooltip’s text container.
• Tooltip Arrow Color: This setting lets you choose the color for the arrow that connects the tooltip container and tooltip icon.

By making adjustments to the above settings, you can craft a perfect theme that complements your website.

Setting up Tooltip Content for Form Fields

In the form preview, click on any of the fields, and then you will get the option to add text or HTML for the tooltip of that field. The moment you add some content then the tooltips will start showing up immediately in the form preview.

Frequently Asked Questions?

Is there any limitation on the number of Forms on which I can use the Tooltips addon?

You can use the tooltip addon on as many forms as you have on your site.

Are Tooltips responsive/mobile-friendly?

Yes, the tooltips also work on mobile devices. On mobile devices, they will automatically adjust according to available screen space. The user needs to tap on the tooltip icons for it to show.

Can I use links, images, iframes, and videos in tooltips?

Yes, you can use any HTML content like YouTube videos, images, lists, tables, etc, in the tooltips. Users will also be able to interact with the tooltip content, like playing videos, clicking links, etc.