Resumen de IA
¿Te gustaría permitir que los usuarios personalicen los envíos de sus formularios? El campo de texto enriquecido proporciona una forma flexible para que los usuarios den formato al texto y a las imágenes antes de enviar sus formularios en línea.
Este tutorial te mostrará todo lo que necesitas saber para empezar con el campo de texto enriquecido en WPForms.
Antes de empezar, primero deberás asegurarte de que WPForms esté instalado y activado en tu sitio de WordPress y que hayas verificado tu licencia. Luego, puedes crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.
Añadir un campo de texto enriquecido a tu formulario
Dado que el campo de texto enriquecido es una función avanzada, la encontrarás en Campos llamativos en el creador de formularios.
Para añadir el campo de texto enriquecido a tu formulario, haz clic en él o arrástralo y suéltalo en el área de vista previa.
A continuación, siéntete libre de cambiar la etiqueta del campo introduciendo el texto que desees en el campo Etiqueta.
Habilitar opciones avanzadas
Para acceder a las opciones avanzadas del campo de texto enriquecido, navega a la pestaña Avanzado en el 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 de texto enriquecido incluye dos opciones de estilo entre las que puedes 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.
Aquí tienes una lista de las opciones de la barra de herramientas para el estilo Básico:
- Negrita
- Cursiva
- Subrayado
- Tachado
- Lista con viñetas
- Lista numerada
- Cita en bloque
- Alinear a la izquierda
- Centrar
- Alinear a la derecha
- Deshacer
- Rehacer
- Insertar/editar enlace
Estilo de campo completo
El estilo de campo completo incluye todo lo disponible con el estilo de campo básico, y mucho más. Para mostrar las opciones adicionales, haz clic en el icono Alternar barra de herramientas.
Aquí tienes una lista de opciones adicionales que estarán disponibles cuando selecciones el estilo de campo Completo:
- Insertar etiqueta Leer más
- Línea horizontal
- Color del texto
- Pegar como texto
- Borrar formato
- Carácter especial
- Reducir sangría
- Aumentar sangría
- Atajos de teclado
Además, los usuarios podrán seleccionar una gama de formatos de texto en el menú desplegable situado en la esquina superior izquierda.
Nota: Para gestionar la longitud del contenido que los usuarios pueden enviar, puedes establecer un límite de caracteres para el campo de Texto Enriquecido. Consulta nuestra documentación para desarrolladores para obtener una guía sobre cómo implementar esta restricción.
Tamaño del campo
Hay tres tamaños de campo entre los que puedes elegir: Pequeño, Mediano o Grande. Cada tamaño de campo diferente determinará la altura del campo de Texto Enriquecido.
Para elegir el tamaño del campo para tu campo de Texto Enriquecido, haz clic en el menú desplegable etiquetado como Tamaño del campo.
Nota: WordPress está dejando de admitir Internet Explorer 11. Para los usuarios de Internet Explorer 11, la función para añadir medios dentro del campo de Texto Enriquecido podría no funcionar como se espera en el frontend.
Permitir subida de medios
El campo de Texto Enriquecido ofrece la opción de que los usuarios suban archivos de imagen. Aquí tienes una lista de todos los tipos de imagen que se pueden subir a través del campo de Texto Enriquecido:
- .jpg, .jpeg, .jpe
- .gif
- .png
- .bmp
- .tiff, .tif
- .webp
- .ico
- .heic
Para habilitar esta opción, navega a la pestaña General en el panel Opciones de campo. Luego, selecciona Permitir subida de medios.
Una vez habilitado, ahora verás un icono de medios en la barra de herramientas del campo de Texto Enriquecido. Al hacer clic en este icono, los usuarios podrán subir sus archivos de imagen.
Así es como podría verse nuestro campo de Texto Enriquecido con una imagen subida:
Por defecto, los archivos subidos por los usuarios se almacenan en el directorio Uploads de su sitio, dentro de la carpeta WPForms.
Sin embargo, si prefieres almacenar automáticamente los archivos subidos en la Biblioteca de Medios de WordPress, selecciona Almacenar archivos en la Biblioteca de Medios de WordPress.
Uso del campo de texto enriquecido
Al interactuar con el campo de Texto Enriquecido en el frontend de tu 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 de Texto Enriquecido comenzará en modo Visual. Sin embargo, puedes cambiar entre los diferentes modos seleccionando la pestaña Visual o Texto en la esquina superior derecha.
Ahora, añadamos algo de texto al campo de Texto Enriquecido para que podamos ver la diferencia entre los dos modos.
Primero, añadiremos un encabezado haciendo clic en el menú desplegable en la esquina superior izquierda y seleccionando Encabezado 3.
Luego, escribiremos algo de texto encima de nuestra imagen.
Ahora, para ver cómo se ve nuestro contenido en modo Texto, haz clic en la pestaña Texto. Aquí verás el contenido mostrado en HTML.
Incrustar archivos externos
Si estás utilizando nuestro complemento de envío de publicaciones, es posible que desees permitir a los usuarios incrustar archivos externos, como vídeos de YouTube, podcasts de Spotify, etc., al enviar sus publicaciones.
Por ejemplo, un usuario puede utilizar el código de incrustación iframe de YouTube para incrustar un vídeo en el campo de Texto Enriquecido. Técnicamente, esto mostraría el vídeo incrustado en el campo de Texto Enriquecido.
Sin embargo, WPForms sanitizará y limpiará el código de inserción después de que el usuario envíe el formulario. Implementamos esta medida de seguridad para proteger a nuestros usuarios de atacantes que utilizan código para explotar las debilidades del sitio web.
Si desea insertar vídeos en publicaciones enviadas a través del complemento de envío de publicaciones, simplemente pegue el enlace del vídeo directamente en el campo de texto enriquecido. WordPress se encarga de agregar el código de inserció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 que admiten oEmbed.
¡Eso es todo! Ahora tiene algunas ideas sobre cómo usar el campo de texto enriquecido en WPForms.
¿Le gustaría que sus visitantes pudieran publicar contenido en su sitio sin acceder a su panel de WordPress? Asegúrese de consultar nuestra guía sobre cómo instalar y usar el complemento de envío de publicaciones.