How to Display Shortcodes Inside the Label of the Form Field

Introduction

Would you like to display shortcodes inside the label of your form? Perhaps you’d like to make your label have a tooltip when your visitors hover over it. You can easily achieve this with a small PHP snippet and in this tutorial, we’ll show you how.

Installing Shortcodes Ultimate plugin

In this example, we’re going to have a tooltip shortcode for our form label using a free plugin. This step is of course optional as you may already have a shortcodes plugin installed or built-in shortcodes available to you.

If you choose to use the plugin suggested in this tutorial, please download the Shortcodes Ultimate plugin and install it on your WordPress site.

For assistance on how to add a plugin to your site, you may want to check out WPBeginner’s guide on how to install a plugin.

Creating the shortcode

To create the tooltip shortcode needed, you’ll need to follow their documentation on how to create your tooltip shortcode.

This tutorial is going to display a tooltip over the Phone field that will contain a link to a privacy page that will let visitors know that their information is secure and will not be sold.

When creating your shortcode, take note of all the customizable options that the plugin authors provide to change things like the size of the text, colors, font-families, etc. This way you can build your shortcode to look exactly how you’d like it.

Creating the form

You can create a new form or edit an existing form. For any help needed on how to create a form, please review this documentation.

We won’t be needing the Label for the Phone form field since we’re going to use the tooltip text as our label, so on the Advanced tab of the form field select the Hide Label option and then click Save on the form.

click the Advanced tab and toggle the Hide Label to turn the form label off

Adding the snippet

Now it’s time to add the snippet to our site. If you need any help on how and where to add snippets to your site, please review this tutorial.

/**
 * Run shortcodes on the form label field.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-label-of-the-form-field/
 */

function add_shortcode_to_label( $field, $form_data ) {
        
        // Check that the form ID is 1055 and the field id is 4
	if ( 1055 === absint( $form_data[ 'id' ] ) && 4 === absint( $field[ 'id' ] ) ) {

		echo do_shortcode( ' [su_tooltip text="Your informataion is completely protected and will not be sold!<br><a href=&ldquo;https://myexamplesite.com/privacy/&ldquo;>Click here to learn more.</a>" behavior="click" hide_delay="500"]Click Me![/su_tooltip] ' );
	
        }
}
add_action( 'wpforms_display_field_before', 'add_shortcode_to_label', 16, 2 );

When you’re using a link inside this function, you’ll need to use the HTML Entity for quotes as this will break the do_shortcode function. For the double quotes, the HTML Entity that we used is . To learn more about HTML Entities, please visit W3C Schools page.

When your visitors now see the form and click the tooltip, they’ll see your message.

Now you can see the shortcode inside the label of the form field

And that’s all you need to display any shortcode inside a Label form field. Would you like to display shortcodes inside the HTML field? Take a look at our article on How to Display Shortcodes Inside the HTML Field.

Action Reference: wpforms_display_field_before

FAQ

Q: How do I add different shortcodes for different forms and labels?

A: If you’d like to re-use this snippet for other forms using different shortcodes, you certainly could do this.

function add_shortcode_to_label( $field, $form_data ) {
        
        // Check that the form ID is 1055 and the field id is 4 for the Phone field
	if ( 1055 === absint( $form_data[ 'id' ] ) && 4 === absint( $field[ 'id' ] ) ) {

		echo do_shortcode( ' [su_tooltip text="Your informataion is completely protected and will not be sold!<br><a href=&ldquo;https://myexamplesite.com/privacy/&ldquo;>Click here to learn more.</a>" behavior="click" hide_delay="500"]Click Me![/su_tooltip] ' );
	
        }
	
	
        // Check that the form ID is 1055 and the field id is 2 for the Name field
	if ( 1055 === absint( $form_data[ 'id' ] ) && 2 === absint( $field[ 'id' ] ) ) {

		echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on the same form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
	
        }	



        // Check that the form ID is 1072 and the field id is 6 for the Comments field
	if ( 1072 === absint( $form_data[ 'id' ] ) && 6 === absint( $field[ 'id' ] ) ) {

		echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on a completely different form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
	
        }
	
}
add_action( 'wpforms_display_field_before', 'add_shortcode_to_label', 16, 2 );