Uso del campo HTML

¿Te gustaría incorporar HTML personalizado en tus formularios? El campo HTML en WPForms te permite hacerlo. Esto puede ser útil para añadir texto, enlaces y otros elementos a tus formularios.

Este tutorial te mostrará todas las opciones disponibles para el campo HTML en WPForms, así como algunos casos de uso.

---

Antes de continuar, asegúrate de que WPForms está instalado y activado en tu sitio de WordPress y de que has verificado tu licencia. Luego puedes crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.

Añadir un campo HTML a tu formulario

Dado que el campo HTML es una característica avanzada, lo encontrarás en Campos avanzados en el constructor de formularios.

Para añadirlo a tu formulario, haz clic en él o arrástralo y suéltalo en el área de vista previa.

Aparte de añadir tu HTML, la única opción de campo que necesitas configurar es la etiqueta. Puedes introducir el texto que desees en el campo proporcionado.

A diferencia de otros campos, la etiqueta del campo HTML solo es visible en el constructor de formularios para ayudarte a identificarlo en el área de vista previa. Los usuarios no la verán en el frontend y el campo no se incluirá en las entradas de tu formulario.

Uso del campo HTML

Lo básico para usar el campo HTML es bastante sencillo. Simplemente introduce tu texto o HTML en el campo proporcionado en el panel de Opciones de Campo.

Sin embargo, hay muchos casos de uso diferentes para este campo. Es muy flexible y puedes adaptarlo a muchas situaciones distintas.

A continuación, hemos cubierto algunos de los casos de uso más populares con más detalle.

Añadir texto estilizado a un formulario

Los campos HTML son una de las muchas formas en que puedes añadir texto adicional a tus formularios, como instrucciones para rellenarlos o información importante que quieres que los usuarios vean antes de enviar sus entradas.

Sin embargo, el campo HTML es único porque te permite incluir texto estilizado, como negrita o cursiva. Puedes añadir las etiquetas HTML apropiadas directamente en el campo Código en el panel de Opciones de Campo.

En el frontend, el ejemplo anterior se vería así:

Además, puedes usar etiquetas HTML para añadir encabezados, listas y más al texto adicional de tus formularios.

Añadir enlaces a un formulario

El campo HTML también te permite añadir enlaces a tu formulario. Esto puede ser útil si quieres permitir a los usuarios acceder rápidamente a otra página mientras rellenan tu formulario.

Para a tilde;adir un enlace a tu campo HTML, necesitas usar la etiqueta <a>. Primero, a tilde;ade las etiquetas de apertura y cierre alrededor del texto que quieres usar para anclar tu enlace.

Luego, en la etiqueta de apertura, a tilde;ade el atributo href y establ extit;celo a la URL a la que quieres enlazar.

En el frontend, esto aparecer extit; como un enlace en el que se puede hacer clic en tu formulario.

Incrustar una imagen en un formulario

Tambi extit;n puedes usar elementos <img> para a tilde;adir im extit;genes a tu formulario. Para hacerlo, a tilde;ade <img> al campo C extit;digo en el panel Opciones de Campo.

Luego necesitar extit;s a tilde;adir la src o URL de origen de la imagen. Si la imagen que est extit;s a tilde;adiendo a tu formulario est extit; en tu Biblioteca de Medios de WordPress, puedes encontrar su URL mirando sus Detalles del Archivo Adjunto.

La URL del Archivo se encuentra en la parte inferior de la ventana, y puedes hacer clic en el bot extit;n para copiarla a tu portapapeles.

Luego a tilde;adela al elemento <img> en tu campo HTML.

Tambi extit;n puedes usar atributos HTML para cambiar el tama tilde;o de tu imagen y a tilde;adirle texto alternativo. En el frontend, podr extit;a verse algo as extit; extit;:

Incrustar un vídeo en un formulario

El extit;ltimo caso de uso que cubriremos en este art extit;culo es la incrustaci extit;n de un v extit;deo en un formulario. Para lograr esto, tienes que usar un elemento HTML llamado <<iframe>.

Primero, a tilde;ade el elemento <iframe></iframe> al campo C extit;digo en el panel Opciones de Campo.

Luego necesitas a tilde;adir el src del v extit;deo que quieres incrustar. Si has subido el v extit;deo que est extit;s usando a tu Biblioteca de Medios de WordPress, puedes encontrar la URL del Archivo como describimos en la secci extit;n anterior.

Para v extit;deos de YouTube, puedes hacer clic en Compartir » Incrustar para copiar todo el iframe y pegarlo en tu campo HTML.

Una vez que hayas a tilde;adido tu src a tu campo HTML, puedes usar atributos HTML para cambiar el tama tilde;o del iframe y m extit;s. En el frontend, podr extit;a verse algo as extit; extit;:

Preguntas frecuentes

Estas son algunas de las preguntas m extit;s comunes que recibimos sobre el campo HTML.

extit;Puedo usar Etiquetas Inteligentes dentro de los campos HTML de mis formularios?

S extit;, aunque las Etiquetas Inteligentes son una forma din extit;mica de extraer y mostrar datos dentro de tu formulario, no se procesan por defecto en los campos HTML. Sin embargo, con un peque tilde;o fragmento de PHP, puedes habilitar las Etiquetas Inteligentes dentro de estos campos.

Para obtener instrucciones detalladas sobre c extit;mo implementar esta funcionalidad, consulta nuestra documentaci extit;n para desarrolladores.

extit; extit;Listo! Ahora tienes algunas ideas sobre c extit;mo usar el campo HTML en WPForms.

A continuación, ¿te gustaría aprender sobre cómo añadir CSS personalizado a tus formularios? Nuestro tutorial para principiantes tiene todo lo que necesitas para empezar.