Resumen de IA
¿Te gustaría añadir opciones de iconos a tus formularios? Usar iconos en los campos de Opción múltiple, Casillas de verificación, Múltiples elementos y Elementos de casilla de verificación es una forma sencilla de mejorar el atractivo visual y la experiencia del usuario de tu formulario.
Este tutorial te mostrará cómo añadir opciones de iconos a campos existentes o nuevos en WPForms.
Antes de empezar, primero deberás asegurarte de que WPForms está instalado y activado en tu sitio de WordPress y que has verificado tu licencia. Luego, puedes crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.
Configuración de tu formulario
Una vez que hayas abierto el constructor de formularios, podrás añadir opciones de iconos a cualquiera de los siguientes tipos de campo:
- Opción múltiple
- Casillas de verificación
- Múltiples artículos
- Elementos de casilla de verificación
Para nuestro ejemplo, crearemos un formulario de contacto sencillo que permite a los usuarios elegir su método de contacto preferido, incluyendo llamada telefónica, mensaje de texto o correo electrónico.
Para empezar, añadiremos un campo de Opción múltiple a nuestro formulario haciendo clic en él o arrastrándolo y soltándolo en el área de vista previa del formulario.
A continuación, cambiaremos las etiquetas de nuestras opciones para incluir las siguientes: Llamada telefónica, Mensaje de texto y Correo electrónico.
Nota: ¿Quieres añadir una larga lista de opciones a tu formulario? Consulta nuestra guía para añadir opciones en bloque para aprender cómo añadir varias opciones de iconos a tu formulario a la vez en lugar de crear cada opción individualmente.
Habilitar opciones de iconos
Una vez que esta configuración básica esté lista, habilitaremos las opciones de iconos activando la opción Usar opciones de iconos.
Si es la primera vez que configuras opciones de iconos, verás una superposición con un mensaje pidiéndote que descargues una biblioteca de iconos. Descargar la biblioteca de iconos es un paso obligatorio que te da acceso a más de 2000 iconos para usar en tus formularios.
Para continuar con la descarga, haz clic en el botón Continuar.
Nota: WPForms utiliza la última versión de la biblioteca de iconos Font Awesome para las opciones de iconos.
A continuación, verás otra superposición notificándote que la descarga está en curso. Para evitar cualquier interrupción durante la instalación, asegúrate de no cerrar ni recargar la ventana del navegador.
Una vez que la biblioteca de iconos se haya instalado correctamente, haz clic en el botón Aceptar para guardar tu formulario y recargar el constructor de formularios.
Seleccionar iconos
Ahora que hemos habilitado las opciones de iconos, se añaden iconos predeterminados a nuestro formulario. Seleccionaremos nuevos iconos para reemplazar los predeterminados haciendo clic en cada icono en el lado izquierdo del constructor de formularios.
A continuación, aparecerá la ventana modal del Selector de Iconos. Aquí puedes buscar o explorar el icono perfecto para usar en tu formulario.
Buscaremos un icono de teléfono escribiendo "teléfono" en la barra de búsqueda.
Los resultados de la búsqueda mostrarán todos los iconos que contienen "teléfono" en el nombre del icono. Haremos clic en el icono de teléfono para seleccionarlo como nuestra primera opción de icono.
Tras seleccionar un icono del Selector de iconos, aparecerá en el generador de formularios.
Continúa y selecciona otros iconos para usar en las opciones restantes de tu formulario repitiendo este proceso.
Personalizar opciones de iconos
Una vez que hayas seleccionado los iconos que deseas usar en tu formulario, es hora de personalizar su apariencia. WPForms facilita la personalización del color, tamaño y estilo del icono, directamente desde el constructor de formularios. Cubriremos cada una de estas opciones a continuación.
Nota: Las personalizaciones se aplican a todas las opciones de iconos dentro del mismo campo del formulario.
Color del Icono
Por defecto, el color del icono está configurado en azul. Puedes seleccionar fácilmente tu color de icono preferido haciendo clic en la opción Color del icono y utilizando la herramienta de selección de color.
El color seleccionado se aplicará a todas las opciones de iconos para el campo dado.
Nota: Si estás utilizando opciones de iconos con el complemento Formularios de conversación, ten en cuenta que el esquema de colores que selecciones para tu formulario de conversación anulará el color del icono.
Tamaño del icono
Hay 3 opciones de tamaño para las opciones de iconos, incluyendo Pequeño, Mediano y Grande. Para cambiar el tamaño, haz clic en el menú desplegable Tamaño del icono y selecciona tu tamaño preferido.
Así es como se comparan las opciones de tamaño en el frontend:
El tamaño seleccionado se aplicará a todas las opciones de iconos para el campo dado.
Estilo de opción de icono
Hay 4 opciones para estilizar las opciones de iconos, incluyendo Predeterminado, Moderno, Clásico y Ninguno. Para cambiar el estilo del icono, haz clic en el menú desplegable Estilo de opción de icono y selecciona tu estilo preferido.
El estilo de opción de icono seleccionado se aplicará a todas las opciones de iconos para el campo dado.
Repasaremos cada una de las opciones de estilo disponibles a continuación:
Predeterminado
El estilo Predeterminado añade un borde redondeado, incluye una casilla de verificación o un botón de radio visible, tiene un fondo y borde de color cuando se selecciona, y muestra la etiqueta de la opción fuera del borde.
Moderno
El estilo Moderno añade un borde redondeado, muestra la etiqueta de la opción dentro del borde, y tiene una sombra de caja y un borde de color cuando se selecciona.
Clásica
El estilo Clásico añade un borde cuadrado y de color cuando se selecciona. La etiqueta de la opción se muestra dentro del borde de la opción seleccionada.
Ninguna
Si no deseas incluir ningún estilo especial, selecciona la opción Ninguno. Esta opción muestra una casilla de verificación o un botón de radio en una sola línea debajo del icono.
Seleccionar un diseño de opciones
Para seleccionar un diseño de cómo se muestran las opciones de iconos en tu formulario, abre la pestaña Avanzado dentro del panel Opciones de campo.
Puedes elegir entre las siguientes 4 opciones de diseño para mostrar las opciones: Una columna, Dos columnas, Tres columnas y En línea. El diseño que selecciones determinará el número de columnas utilizadas para mostrar las opciones.
Haz clic en el menú desplegable Diseño de opción y selecciona tu diseño preferido.
Así es como se verá el formulario en el frontend del sitio:
Preguntas frecuentes
A continuación, se presentan algunas de las preguntas más frecuentes sobre el uso de opciones de iconos.
¿Por qué no se muestran los iconos en mi formulario?
Si las opciones de iconos que has agregado a tu formulario no se muestran, es probable que haya un problema con la carpeta que contiene la biblioteca de iconos. Para solucionar este problema, simplemente abre tu formulario en el creador de formularios y sigue las instrucciones para reinstalar la biblioteca de iconos.
¿Por qué no se muestran los iconos en las entradas, notificaciones por correo electrónico, entradas impresas, etc.?
Los iconos se utilizan para mejorar la apariencia de un formulario y proporcionar señales visuales a los usuarios, lo que les facilita completar el formulario rápidamente. Sin embargo, no se debe confiar en ellos como un reemplazo de las etiquetas o descripciones, ya que la interpretación del significado de un icono puede variar. Solo el valor de un icono seleccionado se incluye en las entradas y notificaciones por correo electrónico para comunicar de manera efectiva la información enviada a través de tu formulario.
¡Eso es todo! Ahora sabes cómo agregar opciones de iconos a tu formulario.
¿A continuación, te gustaría agregar contenido adicional a tus formularios? Asegúrate de consultar nuestra guía sobre cómo usar el campo de contenido para aprender a agregar encabezados, listas, multimedia y más a tus formularios.