Would you like to display shortcode inside your form labels? By default, shortcodes or raw HTML cannot be used in form labels, however, using the power of PHP we can easily achieve this.
In this comprehensive tutorial, we’ll guide you through the process of implementing these enhancements effortlessly. From understanding the fundamentals of incorporating PHP snippets to effectively leveraging them within your form labels, we’ll provide step-by-step instructions and practical examples.
Installing Shortcodes Ultimate plugin (optional)
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.
This step is completely optional as you may already have your own shortcodes plugin or have it built-in to your theme.
Creating the shortcode
We’re not going to go through how exactly to create a shortcode as it can depend on what you’re using for your shortcodes. However, for this tutorial we’re using the Shortcode Ultimate plugin. 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 private 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.
Displaying the shortcode in the label
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 information is completely protected and will not be sold!<br><a href=https://myexamplesite.com/privacy/>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 );
The Shortcodes Ultimate plugin doesn’t require the href in a link (when used inside a shortcode such as this) to have quotes around the URL. However, other plugins may so be sure to test your shortcode. If single quotes, double quotes, or another other code type symbol may need to be entered as the HTML entity for that symbol rather than the symbol itself. 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.
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.
Reference Action
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.
/**
* 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 for the Phone field
if ( 1055 === absint( $form_data[ 'id' ] ) && 4 === absint( $field[ 'id' ] ) ) {
echo do_shortcode( ' [su_tooltip text="Your information is completely protected and will not be sold!<br><a href=“https://myexamplesite.com/privacy/“>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 );