Mostrar shortcodes dentro de las etiquetas de los campos del formulario

¿Te gustaría mejorar las etiquetas de tus formularios con tooltips interactivos o contenido dinámico usando shortcodes? Aunque WPForms no admite shortcodes en las etiquetas de forma predeterminada, puedes añadir fácilmente esta funcionalidad usando PHP.

Esta guía te mostrará cómo mostrar cualquier shortcode dentro de las etiquetas de los campos de tu formulario.

Instalar el plugin Shortcodes Ultimate (opcional)

Si aún no tienes un plugin de shortcodes, puedes instalar Shortcodes Ultimate desde el repositorio de plugins de WordPress. Este paso es opcional si ya tienes otro plugin de shortcodes o estás usando shortcodes integrados de tu tema.

Para obtener ayuda con la instalación de plugins, puedes consultar la guía de WPBeginner sobre cómo instalar un plugin.

Creación de su formulario

Puedes crear un formulario nuevo o editar uno existente. Si necesitas ayuda sobre cómo crear un formulario, por favor, consulta esta documentación.

No necesitaremos la Etiqueta para el campo del formulario Teléfono ya que usaremos el texto del tooltip como nuestra etiqueta, así que en la pestaña Avanzado del campo del formulario selecciona la opción Ocultar etiqueta y luego haz clic en Guardar en el formulario.

Añadir el código

Para mostrar shortcodes en las etiquetas de tus formularios, necesitarás añadir un fragmento de código a tu sitio. Si no estás seguro de cómo añadir código personalizado, por favor, consulta nuestra guía sobre cómo añadir fragmentos de código.

En el fragmento de código anterior, necesitarás modificar tres valores clave:

• En la línea 10: Reemplaza 1055 con el ID de tu formulario
• En la línea 10: Reemplaza 4 con el ID de tu campo
• En la línea 12: Reemplaza el shortcode con tu shortcode deseado

Cuando tus visitantes vean el formulario y hagan clic en el tooltip, verán tu mensaje.

Preguntas frecuentes

P: ¿Cómo añado diferentes shortcodes para diferentes formularios y etiquetas?

R: Si quisieras reutilizar este fragmento para otros formularios usando diferentes shortcodes, ciertamente podrías hacerlo.

/**
 * 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=&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 );

Y eso es todo lo que necesitas para mostrar cualquier shortcode dentro de un campo de formulario Etiqueta. ¿Te gustaría mostrar shortcodes dentro del campo HTML? Echa un vistazo a nuestro artículo sobre Cómo mostrar shortcodes dentro del campo HTML.

Acción de referencia

wpforms_display_field_before