¿Cómo mostrar códigos cortos dentro del campo HTML?

¿Te gustaría mostrar shortcodes dentro del campo de formulario HTML? Por defecto, los campos de formulario no aceptarán shortcodes. En este tutorial, te mostraremos cómo usar PHP para habilitar la adición de un shortcode al campo de formulario HTML.

Instalación del plugin Shortcodes Ultimate

En este ejemplo, vamos a añadir un shortcode de acordeón a un campo de formulario HTML usando un plugin gratuito. Este paso es opcional, por supuesto, ya que es posible que ya tengas un plugin de shortcodes instalado o shortcodes integrados disponibles. Siéntete libre de usar lo que necesites, solo recuerda que el CSS opcional a continuación es específico para este plugin.

Si decides usar el plugin sugerido en este tutorial, por favor descarga el plugin e instálalo en tu sitio de WordPress.

Para obtener ayuda sobre cómo añadir un plugin a tu sitio, puede que quieras consultar la guía de WPBeginner sobre cómo instalar un plugin.

Creación del shortcode

Para crear el shortcode de acordeón necesario para tu campo HTML, necesitarás seguir su documentación sobre cómo crear tu shortcode de acordeón.

Vamos a crear una explicación de tabla de tallas para nuestro acordeón usando el estilo Simple. Así que nuestro shortcode se ve así.

<strong>Size chart explained</strong>

[su_accordion]
[su_spoiler title="X Small" open="no" style="simple"] Size Alpha: XS.  Size Numeric: 0-2. Bust(IN): 28-30.  Waist(IN): 23-24. [/su_spoiler]

[su_spoiler title="Small" style="simple"] Size Alpha: S.  Size Numeric: 4-6. Bust(IN): 30-32.  Waist(IN): 25-26.  [/su_spoiler]

[su_spoiler title="Medium" style="simple"] Size Alpha: M.  Size Numeric: 8-10. Bust(IN): 32-34.  Waist(IN): 27-28.  [/su_spoiler]

[su_spoiler title="Large" style="simple"] Size Alpha: L.  Size Numeric: 12-14. Bust(IN): 36-38.  Waist(IN): 30-32.  [/su_spoiler]

[su_spoiler title="X Large" style="simple"] Size Alpha: XL.  Size Numeric: 16-18. Bust(IN): 40-42.  Waist(IN): 33-35.  [/su_spoiler]

[su_spoiler title="XX Large" style="simple"] XXL.  Size Numeric: 20-22. Bust(IN): 44-46.  Waist(IN): 36-38.  [/su_spoiler]

[/su_accordion]

Mostrar shortcode dentro del campo HTML

Antes de crear nuestro formulario, vamos a añadir el fragmento a nuestro sitio.

Para obtener ayuda sobre cómo y dónde añadir fragmentos a tu sitio, por favor consulta este tutorial.

/**
 * Run shortcodes on HTML field content.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/
 *
 */

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 );

Este fragmento permitirá que cualquier campo de formulario HTML en todos tus WPForms pueda usar shortcodes.

Creación del formulario

Ahora es el momento de crear nuestro formulario y añadir un campo de formulario HTML.

Si necesitas ayuda sobre cómo crear un formulario con WPForms, por favor revisa nuestra documentación.

Añadir el shortcode a tu campo HTML

Ahora vamos a copiar y pegar el shortcode del paso anterior en el campo HTML.

<strong>Size chart explained</strong>

[su_accordion]
[su_spoiler title="X Small" open="no" style="simple"] Size Alpha: XS.  Size Numeric: 0-2. Bust(IN): 28-30.  Waist(IN): 23-24. [/su_spoiler]

[su_spoiler title="Small" style="simple"] Size Alpha: S.  Size Numeric: 4-6. Bust(IN): 30-32.  Waist(IN): 25-26.  [/su_spoiler]

[su_spoiler title="Medium" style="simple"] Size Alpha: M.  Size Numeric: 8-10. Bust(IN): 32-34.  Waist(IN): 27-28.  [/su_spoiler]

[su_spoiler title="Large" style="simple"] Size Alpha: L.  Size Numeric: 12-14. Bust(IN): 36-38.  Waist(IN): 30-32.  [/su_spoiler]

[su_spoiler title="X Large" style="simple"] Size Alpha: XL.  Size Numeric: 16-18. Bust(IN): 40-42.  Waist(IN): 33-35.  [/su_spoiler]

[su_spoiler title="XX Large" style="simple"] XXL.  Size Numeric: 20-22. Bust(IN): 44-46.  Waist(IN): 36-38.  [/su_spoiler]

[/su_accordion]

Añadir el CSS (opcional)

Como mencionamos anteriormente, algunos de los estilos para los shortcodes pueden ser diferentes de lo que esperarías debido al estilo predeterminado de WPForms. Para este ejemplo en particular, vamos a añadir un CSS adicional para estilizar y posicionar el icono de apertura del acordeón.

.wpforms-field .su-accordion {
    margin-bottom: 1.5em;
}

.wpforms-field .su-spoiler-style-simple {
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
}

.wpforms-field .su-spoiler {
    margin-bottom: 1.5em !important;
}

.wpforms-field .su-accordion .su-spoiler {
    margin-bottom: 0.5em !important;
}

.wpforms-field .su-u-trim>:first-child {
    margin-top: 0 !important;
}

.wpforms-field .su-spoiler-style-simple>.su-spoiler-title {
    padding: 5px 10px;
    background: #f0f0f0;
    color: #333;
    font-size: .9em;
}

.wpforms-field .su-spoiler-title {
    position: relative !important;
    cursor: pointer;
    min-height: 20px;
    line-height: 20px;
    padding: 7px 7px 7px 34px !important;
    font-weight: 700;
    font-size: 13px !important;
}

.wpforms-field .su-spoiler-icon {
    position: absolute !important;
    left: 7px;
    top: 7px;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 21px;
    text-align: center;
    font-size: 14px !important;
    font-family: ShortcodesUltimateIcons;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

.wpforms-field .su-spoiler-style-simple>.su-spoiler-content {
    padding: 1em 10px !important;
    background: #fff;
    color: #333;
}

.su-spoiler.su-spoiler-closed>.su-spoiler-content {
    height: 0;
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.wpforms-field .su-spoiler-content {
    padding: 14px !important;
    transition: padding-top .2s !important;
    -ie-transition: padding-top .2s !important;
}

Cuando tus visitantes vean el formulario, ahora verán un acordeón con características de producto dentro del campo HTML del formulario.

Y eso es todo lo que necesitas para mostrar cualquier shortcode dentro de un campo de formulario HTML. ¿Te gustaría mostrar Smart Tags en el campo HTML? Echa un vistazo a nuestro artículo sobre Cómo procesar Smart Tags en campos HTML.

Referencia de filtros