Gravity Forms Enhanced Choices

La decisión se toma lejos de la casilla

Arriba de tu página explicas tres paquetes con todo detalle. Abajo, en el formulario, quedan tres botones de opción con tres nombres: Básico, Profesional, Empresa. Quien está a punto de elegir ya no ve qué incluye cada uno y tiene que subir, comparar y volver a bajar para marcar.

Una opción de formulario suele mostrar solo una etiqueta, justo en el momento en que hace falta toda la información para decidir.

Enhanced Choices, de JetSloth, lleva esa información a la propia opción. Convierte los campos de botones de opción y casillas de Gravity Forms en tarjetas con imagen, texto, listas, etiquetas y precio, de modo que comparar y elegir ocurren en el mismo sitio.

Ocho componentes para construir cada tarjeta

Puedes añadir estos componentes a cualquier opción y combinarlos de forma distinta en cada una, o mantener la misma estructura en todas:

• Button: un botón dentro de la tarjeta.
• Title y Label: un título propio y la etiqueta de la opción, que aparece sola en la tarjeta.
• Paragraph y List: texto corrido y listas, útiles para detallar lo que incluye cada opción.
• Pill: una píldora para destacar un dato breve.
• Price: el precio dentro de la tarjeta.
• HTML: contenido propio, para lo que los demás componentes no cubren.

La selección se hace con un clic en el botón o en la tarjeta completa. El contenido se adapta a escritorio, tableta y móvil, y las imágenes se añaden desde el editor de contenido de cada opción.

Un sistema de temas propio, separado del formulario

El diseño vive en temas, con su propio editor sin código. Ahí ajustas colores, fuentes, fondos y bordes, y defines por separado el estado normal y el seleccionado.

Puedes guardar varios temas, exportarlos e importarlos entre formularios o sitios, y descargar otros de la biblioteca de la comunidad. La herramienta Bulk Apply Themes actualiza el tema de varios campos a la vez, e Image URL Replacement ayuda a cambiar direcciones de imagen, por ejemplo al mudar el dominio. Si una tarjeta necesita ser distinta, el interruptor «override component style» la personaliza sin tocar el tema.

Tablas de precios y vídeo, con algo de código si quieres afinar

Las tarjetas sirven para montar tablas de precios y paquetes, sin salir del formulario. Hay dos ajustes que requieren algo más:

• Formato del precio: quitar decimales o el espacio tras el símbolo de moneda se hace con un fragmento de JavaScript en un campo HTML o en el tema. El tamaño del símbolo se cambia con CSS sobre span.gfec-price:first-letter.
• Vídeo: entra por el componente HTML, con código y CSS adicionales.

Enhanced Choices trabaja sobre botones de opción y casillas. Entre sus funciones no hay tarjetas para otros tipos de campo, como un desplegable, de modo que esa pregunta tendría que plantearse con uno de esos dos campos.

Crear el tema y aplicarlo a tu primer campo

Necesita Gravity Forms instalado. El recorrido empieza por el tema y termina en el formulario:

1. Instala el complemento y abre sus ajustes para crear un tema nuevo con un título.
2. En el editor del tema, marca qué componentes se ven y ajusta el estilo de la tarjeta en sus dos estados. Guarda.
3. En el formulario, añade un campo de botones de opción o de casillas y activa la casilla Enhanced Choices.
4. Da un título a cada opción y pulsa el botón de editar contenido para añadir imágenes, textos y el texto del botón. Las flechas te llevan de una opción a otra.
5. Guarda el formulario y añádelo a tu página.
6. Si las tarjetas se parten en dos filas, cambia las columnas de ancho fijo a automático en la pestaña Enhanced Choices.

Cuando la opción solo pide una imagen o un color

Si cada respuesta se resuelve con una foto, Image Choices, del mismo fabricante, pone imágenes en botones de opción y casillas, también en encuestas, sondeos y quiz con los complementos de Gravity Forms correspondientes. Si la pregunta trata sobre tonos, Color Picker ofrece muestras o un selector de valor hexadecimal.

Código y reutilización de temas

¿Hay que saber programar para diseñar una tarjeta?

No. El editor de temas funciona sin código. Solo algunos ajustes, como el formato del precio o el vídeo, requieren fragmentos.

¿Puedo usar el mismo diseño en varios sitios?

Sí. Los temas se exportan y se importan desde las herramientas de los ajustes globales de Gravity Forms.