How to Display Shortcodes Inside the HTML Field

Overview

Would you like to display shortcodes inside the HTML form field? By default, form fields will not accept shortcodes. In this tutorial, we’ll show you how to use PHP to enable adding a shortcode to the HTML form field.

Setup

In this example, we’re going to add an accordion shortcode to an HTML form field using a free 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) Adding the PHP

Next, add this PHP code snippet to your site.

/**
 * Run shortcodes on HTML field content.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/
 *
 * @param  array $field
 * @param  array $field_atts
 * @param  array $form_data
 * @return array
 */
function wpf_dev_html_field_shortcodes( $field, $field_atts, $form_data ) {

	if ( ! empty( $field['code'] ) ) {
		$field['code'] = do_shortcode( $field['code'] );
	}
	return $field;
}
add_filter( 'wpforms_html_field_display', 'wpf_dev_html_field_shortcodes', 10, 3 );

3) Creating the shortcode

To create the accordion shortcode needed to go into your HTML field, you’ll need to follow their documentation on how to create your accordion shortcode.

4) Adding the shortcode to your HTML field

Once you’ve created your shortcode, open the form builder for the form you want to edit and add an HTML form field. Inside of that field, add your shortcode.

The shortcode output appearance may be altered by form styles. Be sure to test the styling of your shortcode that you use.

Add the shortcode to the HTML form field

4) Adding the CSS

As we mentioned in the note above, some of the styles for shortcodes can be different than you would expect. For this particular example, we’re going to add some additional CSS to style and position the accordion open icon.

.wpforms-field.wpforms-field-html .su-spoiler-style-default>.su-spoiler-title>.su-spoiler-icon {
    left: -2px;
    position: relative;
    display: inline;
    top: 0px;
}

When your visitors now see the form, they’ll now see an accordion with product features inside the form’s HTML field.

The HTML field will now display your accordion shortcode

And that’s all you need to display any shortcode inside an HTML form field. Would you like to display Smart Tags in the HTML field? Take a look at our article on How to Process Smart Tags in HTML Fields.