How to Display Shortcodes Inside the Label of the Form Field

Overview

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

Setup

In this tutorial, we’re going to add a tool tip to our Name field label on our form using the Ultimate Shortcodes plugin. Please follow the steps below.

1) Installing the Shortcodes Ultimate plugin

To begin, install the Shortcodes Ultimate plugin.

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

2) 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 Name form field since we’re going to use the tool tip text as our label. So in the Advanced Options, we’ll select the Hide Label option and then click Save on the form.

Open the Advanced Options and click Hide Label

3) Adding the PHP

Next, add this PHP code snippet to your site.

We’re going to target the form ID 1425 for the Name field which is the field ID 0.

/**
 * Run shortcodes on 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 ) {
	if ( 1425 === absint( $form_data['id'] ) && 0 === absint( $field['id'] ) ) {
		echo do_shortcode( ' [su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""]Hover me to open tooltip[/su_tooltip] ' );
	}
}
add_action( 'wpforms_display_field_before', 'add_shortcode_to_label', 16, 2 );

When your visitors now see the form and hover on the tool tip text, they will see the tool tip pop up.

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

If you’d like to wrap the label inside a unique class name so that you can also style this separately, your snippet would look like this.

/**
 * Run shortcodes on label field.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-label-of-the-form-field/
 *
 */
function wrap_open_for_label( $field, $form_data ) {
	if ( 1425 === absint( $form_data['id'] ) && 0 === absint( $field['id'] ) ) {
		echo '<div class="wrapper-open">';
		echo do_shortcode( ' [su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""]Hover me to open tooltip[/su_tooltip] ' );
	}
}
add_action( 'wpforms_display_field_before', 'wrap_open_for_label', 14, 2 );

function wrap_close_for_label( $field, $form_data ) {
	if ( 1425 === absint( $form_data['id'] ) && 0 === absint( $field['id'] ) ) {
		echo '</div>';
	}
}
add_action( 'wpforms_display_field_before', 'wrap_close_for_label', 17, 2 );

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