¿Desea permitir a los usuarios personalizar el envío de sus formularios? El campo de texto enriquecido ofrece a los usuarios una forma flexible de dar formato al texto y las imágenes antes de enviar sus formularios en línea.
Este tutorial le mostrará todo lo que necesita saber para empezar con el campo de Texto Enriquecido en WPForms.
Antes de empezar, primero tendrá que asegurarse de que WPForms está instalado y activado en su sitio de WordPress y que ha verificado su licencia. A continuación, puede crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.
Añadir un campo de texto enriquecido al formulario
Dado que el campo Texto enriquecido es una función avanzada, lo encontrará en Campos de fantasía en el constructor de formularios.
Para añadir el campo Texto enriquecido a su formulario, haga clic en él o arrástrelo y suéltelo en el área de vista previa.
A continuación, puede cambiar la etiqueta del campo introduciendo el texto que desee en el campo Etiqueta.
Activar opciones avanzadas
Para acceder a las opciones avanzadas del campo Texto enriquecido, vaya a la pestaña Avanzado del panel Opciones de campo.
A continuación, repasaremos dos de las opciones avanzadas más notables: Estilo de campo y Tamaño de campo.
Estilo de campo
El campo Texto enriquecido incluye dos opciones de estilo entre las que puede elegir: Básico y Completo.
Estilo de campo básico
El estilo de campo Básico es bastante sencillo, ya que incluye una barra de herramientas simple con funciones mínimas.
Esta es una lista de las opciones de la barra de herramientas para el estilo Básico:
- Negrita
- Cursiva
- Subraye
- Tachado
- Lista con viñetas
- Lista numerada
- Cita en bloque
- Alinear a la izquierda
- Alinear al centro
- Alinear a la derecha
- Deshacer
- Rehacer
- Insertar/editar enlace
Estilo campo completo
El estilo de campo Completo incluye todo lo que está disponible con el estilo de campo Básico, y mucho más. Para mostrar las opciones adicionales, haga clic en el icono Alternar de la barra de herramientas.
Esta es una lista de opciones adicionales que están disponibles cuando selecciona el estilo de campo Completo:
- Insertar etiqueta Leer más
- Línea horizontal
- Color del texto
- Pegar como texto
- Formato claro
- Carácter especial
- Disminuir sangría
- Aumentar sangría
- Atajos de teclado
Además, los usuarios podrán seleccionar una serie de formatos de texto en el desplegable situado en la esquina superior izquierda.
Nota: Para gestionar la longitud del contenido que los usuarios pueden enviar, puede establecer un límite de caracteres para el campo Texto enriquecido. Consulte nuestra documentación para desarrolladores para obtener una guía sobre cómo implementar esta restricción.
Tamaño del campo
Puede elegir entre tres tamaños de campo: Pequeño, Mediano o Grande. Cada tamaño de campo diferente determinará la altura del campo Texto enriquecido.
Para elegir el tamaño del campo de texto enriquecido, haga clic en el menú desplegable Tamaño del campo.
Nota: WordPress ya no es compatible con Internet Explorer 11. Para los usuarios de Internet Explorer 11, es posible que la función de añadir contenido multimedia en el campo Texto enriquecido no funcione correctamente en el frontend.
Permitir subir archivos multimedia
El campo Texto enriquecido ofrece a los usuarios la opción de cargar archivos de imagen. A continuación se muestra una lista de todos los tipos de imágenes que se pueden cargar a través del campo Texto enriquecido:
- .jpg, .jpeg, .jpe
- .gif
- .png
- .bmp
- .tiff, .tif
- .webp
- .ico
- .heic
Para activar esta opción, vaya a la pestaña General del panel Opciones de campo. A continuación, seleccione Permitir cargas multimedia.
Una vez activado, aparecerá un icono multimedia en la barra de herramientas del campo de texto enriquecido. Al hacer clic en este icono, los usuarios podrán cargar sus archivos de imagen.
Este es el aspecto que podría tener nuestro campo de texto enriquecido con una imagen cargada:
Por defecto, los archivos cargados por el usuario se almacenan en el directorio Uploads de su sitio, dentro de la carpeta WPForms.
Sin embargo, si prefiere almacenar automáticamente los archivos subidos en la Mediateca de WordPress, seleccione Almacenar archivos en la Mediateca de WordPress.
Utilización del campo de texto enriquecido
Al interactuar con el campo de texto enriquecido en el frontend de su sitio, los usuarios podrán cambiar entre dos modos diferentes:
- Visual: Las imágenes y el texto se mostrarán directamente en el editor de texto.
- Texto: Las imágenes y el texto se mostrarán en HTML.
Por defecto, el campo Texto enriquecido se iniciará en modo Visual. Sin embargo, puede cambiar entre los distintos modos seleccionando la pestaña Visual o Texto en la esquina superior derecha.
Ahora, vamos a añadir algo de texto al campo Texto enriquecido para que podamos ver la diferencia entre los dos modos.
En primer lugar, añadiremos un título haciendo clic en el menú desplegable de la esquina superior izquierda y seleccionando Título 3.
A continuación, escribiremos un texto encima de nuestra imagen.
Ahora, para ver cómo se ve nuestro contenido en modo Texto, haga clic en la pestaña Texto. Aquí verá el contenido mostrado en HTML.
Incrustación de archivos externos
Si utilizas nuestro complemento de envío de entradas, es posible que quieras permitir a los usuarios incrustar archivos externos, como vídeos de YouTube, podcasts de Spotify, etc., al enviar sus entradas.
Por ejemplo, un usuario puede utilizar el código de incrustación iframe de YouTube para incrustar un vídeo en el campo Texto enriquecido. Técnicamente, esto mostraría el vídeo incrustado en el campo Rich Text.
Sin embargo, WPForms desinfectará y limpiará el código incrustado después de que el usuario envíe el formulario. Implementamos esta medida de seguridad para proteger a nuestros usuarios de atacantes que utilizan el código para explotar las debilidades del sitio web.
Si desea incrustar vídeos en las entradas enviadas a través del complemento Post Submission, simplemente pegue el enlace del vídeo directamente en el campo Rich Text. WordPress se encarga de añadir el código de incrustación y mostrar el archivo incrustado en su frontend utilizando oEmbeds.
Nota: Consulte la documentación oficial de WordPress para obtener una lista de sitios compatibles con oEmbed.
Ya está. Ahora usted tiene algunas ideas de cómo utilizar el campo de texto enriquecido en WPForms.
A continuación, ¿le gustaría que sus visitantes pudieran publicar contenido en su sitio sin tener que acceder al panel de control de WordPress? No deje de consultar nuestra guía sobre cómo instalar y utilizar el complemento Post Submissions.