Resumen de IA
¿Te gustaría añadir opciones de imagen a tus formularios? WPForms facilita la adición de imágenes a tus campos de opción múltiple, casillas de verificación, elementos múltiples y elementos de casilla de verificación para que tus usuarios puedan ver la opción o el elemento que has listado.
Este tutorial te mostrará cómo añadir opciones de imagen a campos existentes o nuevos en WPForms.
Configuración de Opciones de Imagen
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.
Una vez que el constructor de formularios esté abierto, podrás agregar opciones de imagen 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
Además, puedes agregar imágenes tanto a campos nuevos como existentes de estos tipos de campo.
Para nuestro ejemplo, queremos mostrar imágenes para las opciones de artículos en un formulario de pedido. Para hacer esto, primero agregaremos un campo de Artículos Múltiples a nuestro formulario.
Ahora que hemos agregado nuestro campo, el siguiente paso es cambiar la etiqueta del campo y agregar texto para las opciones disponibles. Dado que estamos utilizando un campo de Artículos Múltiples, también debemos agregar precios para cada artículo.
Una vez que esta configuración básica esté lista, seleccionaremos la opción Usar imágenes como opciones.
Tan pronto como esta opción esté habilitada, se agregará un botón Subir imagen a cada opción. Además, se mostrará una imagen de marcador de posición para cada opción en el área de previsualización.
Añadir Imágenes
Para agregar una imagen a una opción, haz clic en el botón Subir imagen.
Esto abrirá la Biblioteca de Medios de WordPress. Desde aquí, puedes seleccionar un archivo que ya se haya agregado a tu sitio o subir una nueva imagen. Una vez que hayas elegido la imagen que deseas usar, haz clic en el botón Usar imagen.
Para este ejemplo, ya hemos editado todas las imágenes para que tengan un tamaño de 150 por 150 píxeles. Esto ayudará a que nuestras opciones de imagen se vean más uniformes y profesionales.
Así es como aparecerán nuestras opciones de imagen a nuestros usuarios:
Personalizar Opciones de Imagen
WPForms también incluye varias opciones integradas para personalizar tus opciones de imagen. Para ver estas opciones, abre la pestaña Avanzado dentro de las Opciones de Campo.
Además de cualquier otra opción de personalización disponible para el campo que estés utilizando, se agregan dos opciones cuando se selecciona la opción Usar imágenes como opciones: Estilo de opción de imagen y Diseño de opción.
Estilo de opción de imagen
Hay tres opciones disponibles para el estilo de opción de imagen: Moderno, Clásico y Ninguno.
Repasaremos cada una de estas opciones a continuación:
Estilo moderno
La opción Moderno mostrará las opciones seleccionadas dentro de un cuadro sombreado y también agregará una marca de verificación verde y blanca en el centro de la opción seleccionada.
Estilo Clásico
La opción Clásico simplemente agregará un borde grueso de color gris oscuro alrededor de las opciones seleccionadas.
Ninguna
Si prefiere no agregar ningún estilo especial, seleccione la opción Ninguno. Esta opción mostrará casillas de verificación o botones de radio normales junto al texto de cada opción.
Diseño de Opciones
Para cualquier campo donde se permitan opciones de imagen, tendrá varias opciones de diseño. Esto determinará cuántas columnas se utilizan para mostrar las opciones dentro de este campo.
Las opciones de Diseño de Opciones incluyen Una Columna, Dos Columnas, Tres Columnas y En Línea.
Por defecto, la opción En Línea se seleccionará cuando la opción Agregar opciones de imagen esté habilitada. Esto colocará automáticamente tantas opciones como sea posible en cada fila.
¡Eso es todo! Ahora puede agregar imágenes a cualquier campo de Opción Múltiple, Casillas de Verificación, Múltiples Elementos y Elementos de Casilla de Verificación en sus formularios. Si utilizó un campo de Múltiples Elementos y planea aceptar pagos, no olvide configurar una integración con Stripe, PayPal, Authorize.Net o Square.
A continuación, ¿le gustaría probar sus formularios antes de agregarlos a su sitio? Asegúrese de consultar nuestra lista de verificación previa al lanzamiento para conocer todos nuestros consejos y recomendaciones antes de lanzar un formulario.