Si eres un propietario de un sitio Web creado con Wordpress y te gusta realizar cambios o personalizarlo por ti mismo, seguro que alguna que otra vez has buscado la solución a algún problema que te has encontrado o simplemente has buscado un tutorial sobre cómo hacer esto o lo otro. El problema y la frustración aparece cuando intentas hacer algo que no sabes muy bien cómo hacerlo, buscas en internet la solución, pero no hay información al respecto. Es entonces cuando empieza a surgir la pregunta de: ¿De verdad soy el único que está buscando esto o soy el único que tiene este problema?

Como crear listas desplegables relacionadas entre si para un resultado final en Wordpress

Relacionado: Cuales son las principales diferencias entre WordPress.org y WordPress.com

Esto fue lo que me ocurrió recientemente. En mi sito Web creado con Wordpress intenté crear una lista desplegable que estuvieran relacionadas entre sí. Es decir, que si selecciono una opción de la primera lista, automáticamente los valores de la segunda lista se mostrarán acorde a la primera elección.

En nuestro ejemplo querremos crear un formulario que calcule el precio del envio a un pais concreto teniendo en cuenta el país y el peso. Cada peso tendrá un precio diferente pero ante el mismo peso, el precio variará en función del país elegido. Esto querríamos que quedase de la siguiente manera: Crear una lista en la que el usuario podrá elegir un país entre: España, Portugal, Polonia y Alemania. Los pesos de los paquetes serán: 1 Kg, 2Kg y 3Kg. Deberemos de crear dos listas de pesos ya que España y Portugal tienen el mismo precio, pero diferente a Polonia y Alemania que a su vez tiene el mismo precio. De esta manera cuando el usuario por ejemplo seleccione España y el paquete pesa 1 KG el precio es de 15 Euros. Pero si el usuario elije Polonia para un paquete de 1 KG, el precio final debe ser de 20 Euros.

La primera pregunta que me hice fue, como buscar la solución. En mi caso comencé a usar los siguiente términos de búsqueda:

- Plugin de cálculo de envíos para Wordpress.

- Plugin de listas desplegables relacionadas para Wordpress.

- Plugin de quizs para Wordpress.

- Como crear listas desplegables relacionadas en Wordpress

- Como calcular el envío de un paquete con varias variables.

- Como crear formulario de calculo.

- Elegir una opción en una lista y que la segunda lista desplegable muestre otros valores.

En definitiva un sinfín de búsquedas que fueron infructuosas todas ellas. Con cada una de estas búsquedas descubrí e instale una enorme cantidad de plugin de listas desplegables, plugins de cálculo, plugins de envío, plugins de encuestas, plugins de formularios, plugins de formularios paso a paso, etc.

Tras mucho buscar sí con un Pluging de Wordpress que me permitía relacionar varias listas desplegables que en función de lo elegido en ellas, se nos ofrecer un resultado específico diferente o igual a otras posibles combinaciones. Lo cierto es que para dar con este plugin tuve que hilar muy fino, ya que lo que realmente está buscando era:

Un plugin de formulario con listas desplegables de lógica condicional. Es decir que podamos configurar condiciones entre la primera lista y la segunda (o tantas como desees). Esto es lo que se conoce como SIEEE (Si [seleccionas] esto, entonces [muestra] eso) en Ingles IFTTT (If This, Then That).

Pues bien a continuación os mostramos a paso a paso como crear listas o formularios condicionales en Wordpress para que en función de los valores seleccionados en las listas desplegables se nos muestre el resultado específico para dicha combinación:

Como crear listas desplegables condicionales y lógicas en Wordpress para que al seleccionar una opción en la primera lista, las opciones de la segunda cambien respecto a esta selección.

Lo primero que tendremos que hacer será acceder al panel administrador de tu Wordpres y concretamente a: Plugin Añadir nuevo.

Una vez en la tienda de Plugin, deberás buscar, instalar y activar el plugin con el nombre: Caldera Forms – More Than Contact Forms

Cuando el Plugin está activado, verás como en el menú izquierdo del administrador de Wordpress, se muestra la sección: Caldera Forms, en la cual tendrás que hacer doble clic para acceder a ella.

Esto te llevará a una nueva pantalla en la que tendrás que hacer clic sobre el botón: Crear nuevo situado en la parte superior.

En este punto se muestra una pantalla con varias opción de entre las cuales tendremos que hacer clic sobre el botón: New Form (Nuevo Formulario).

Crear listas de opciones relacionadas entre sí para obtener un resultado final

Esto hará que se muestre una ventana en la que tendrás que seleccionar la opción: Blank Form (Formulario en blanco)

obtener resultado en función de las opciones elegidas en varias listas desplegables.

Utiliza la opción Add Field para arrastrarla a la parte inferior de la pantalla (maquetador) en el recuadro disponible de color blanco.

obtener resultado en función de las opciones elegidas en un formulario desplegables.

Tras soltarlo verás como aparecerá una lista de campos/formularios entre los que poder elegir. En nuestro caso, como queremos usar una lista desplegable tendremos que dirigirnos a la sección: Select. Una vez aquí tendrás que seleccionar la opción: Dropdown Select.

Crear un formulario condicional y lógico de opciones en Wordpress

En este momento verás cómo se añade esta lista al recuadro indicado. Para configurar y personalizar la lista tendrás que usar el menú de la parte inferior o parte derecha de la pantalla (dependerá de la resolución de tu monitor/pantalla).

Configurado los ajustes generales deberás añadir opciones a la lista desplegable haciendo clic en el botón: Add Option.

Repite esta operación para todas y cada una de las opciones que quieres que se muestren en la lista desplegable.

(En nuestro caso práctico lo que haremos será crear una lista desplegable con todos los paises a los que enviamos paquetes: España, Portugal, Polonia y Alemania. Esta será la lista principal de la que depende el resto de listas o sub-listas)

adsense3

crear lista condicional y logica de opciones relacionadas entre las listas en Wordpress

En este punto deberemos arrastrar nuevamente el botón Add Fiel al recuadro en blanco y volver a repetir el proceso de creación de listas desplegables. En este caso tendremos que añadir todas las opciones para una o varias de las elecciones de la primera lista creada.

como crear un formulario con listas de opciones relacionadas entre si y con un resultado final en Wordpress

(En nuestro caso cada país o grupo de países tiene una lista de precios (para cada peso) diferente a otros por lo tanto tendremos que crear tantas listas desplegables como listas de precio diferente tengamos. No obstante nuestras 2 sub-listas tendrán las mimas opciones de peso aunque cada peso un valor diferente que será configurado posteriormente)

Plugin para crear formularios de listas de opciones relacionadas entre sí para que el resultado final dependa de las opciones seleccionadas

Creación de las condiciones lógicas para la lista desplegable principal en Wordpress.

Una vez creada la primera lista con todos los países y todas las demás listas con las diferentes opciones que deben mostrarse en función de la opción seleccionada en la primera lista, deberemos crear la condición lógica necesaria entre la selección de la primera lista y las opciones que estarán disponibles en la segunda lista. Para ello tendremos que dirigirnos a la la opción Conditions.

Esto nos llevará a una nueva pantalla en la que tendremos que crear las condiciones deseadas para cada una de las opciones de la primera lista desplegable relacionada con cualquiera de las listas posteriores. (En nuestro ejemplo crearemos dos condiciones que son: Cuando el usuario seleccione España o Portugal, quiero que en la lista desplegable muestre solo la lista de pesos con los precios correspondiente a estos países que sería la misma para los dos. Por el contrario en el caso del que usuario elija Polonia o Alemania, quiero que al usuario se le muestre la lista desplegable de precios correspondiente a estos dos países que es la misma.)

Para ello tendrás que hacer clic sobre la opción: Add Conditional Group. Proporciona un nombre al grupo y renglón seguido tendremos que hacer clic sobre Type para decidir qué tipo de acción queremos realizar: Ocultar, mostrar o desactivar. (En nuestro caso lo que aremos será seleccionar ocultar (Hide) ya que lo que queremos es que cuando se seleccione la Polonia o Alemania, solo queremos mostrar la lista desplegable de los precios correspondiente a estos continente. Por lo tanto tendremos que OCULTAR la lista de precio correspondiente a España y Portugal)

Lo siguiente será marcar la casilla de la lista de la lista desplegable a la que queremos aplicar la condición. En este caso será a la lista (1) de precio de España y Portugal (la cual queremos ocultar cuando se seleccione Alemania o Portugal).

Ahora haz clic en el botón: Add Conditional Line. Se mostrará el condiciona que queremos crear. Aquí tendremos que seleccionar el primer menú. Luego selecciona la opción “IS NOT” (No es) y posteriormente la opción y opciones de esta primera lista a la que quieres aplicar el condicional lógico.

crea un grupo de listas desplegables con diferentes opciones relacionadas entre si

Haz clic en el botón Add Conditional y configura el condicional de manera idéntica para todas y cada una de las opciones del primer menú que deban ser asignada a la misma lista desplegable secundaria.

(En nuestro ejemplo seleccionaremos la primera lista desplegable “Elegir País”, luego seleccionaremos “IS NOT” y por último el país España. Añadiremos otro condicional  (Add conditional) y lo configuramos para el país Portugal ya que ambos países tienen la misa lista de precios. Con esto habremos logrado que cuando el usuario NO seleccione Portugal o España; o lo que es lo mismo, selecciona Polonia o Alemania, la lista de precio desplegable 1 de los países España y Portugal)

Todo el proceso de creación del condicional lógico debe repetirse de manera idéntica para todas y cada una de las listas desplegables que queremos vincular y condicional a la selección del usuario en la primera lista: Add Conditional Group  > Nombrar grupo condicional > Type > seleccionar lista a la que queremos aplicar el condicional > Add conditional Line > Configura el condicional y Add conditional para más opciones con la misma condición.

(En nuestro caso crearemos un grupo condicional para la lista de precios 2. En ella elegiremos el Tipo de condición como Ocultar que ahora deberá aplicarse a la lista desplegable 2 (Polonia y Alemania). Luego haremos clic en el botón Add Condicional Line para configurarlo: “Elegir País”, luego seleccionaremos “IS NOT” y por último el país Polonia. Repetimos esta configuración para el país Alemania. Ahora cuando el usuario escoja España o Portugal en el primer menú, la lista de precio desplegable 2 correspondiente a Alemania y Polonia será ocultada dejando al descubierto única y exclusivamente la lista de precio desplegable correspondiente a los países España y Portugal).

formulario de Wordpress con varios campos de opciones relacionados entre si

Calculo automático de los datos de dos listas desplegables condicionales y lógica.

Si queremos que las listas tengan un valor numérico y al final de la combinación de selecciones de los menús se muestre un menú, también podremos hacerlo con este plugin.

(En nuestro ejemplo queremos que cuando el usuario seleccione un pais y un peso, automáticamente se muestre el precio correspondiente. Para ello tendremos que otrorgar un valor a cada uno de los pesos de las listas creadas 1 y 2)

Para ello tendremos que volver a la sección general para lo cual tendrás que hacer clic en la opción Layout. Una vez aquí selecciona una de las listas que dependen de la primera y haz clic en el icono en forma de lápiz para de esta manera acceder a su edición. Cuando se muestren las opciones de edición deberás marcar la casilla: Show Values. Esto hará que se abra que se muestren los campos en los que podrás introducir el numero del valor que quieres otorgar a cada una de las opciones de esta lista.

crea formulario en Wordpress con listas desplegables de opciones condicionadas entre si

(En nuestro caso práctico lo que haremos será otorgar valores de precio a cada uno de los pesos de la lista 1 correspondiente a los precios para los países España y Portugal. De esta manera a la opción 1 Kg le otorgamos un precio de 15 €, al de 2 Kg le otorgaremos 20 € y por último la de 3 Kg a un precio de 25 €.)

wordpress formulario condicional logico relacionado

Deberás otorgar un valor a las opciones de otras listas siguiendo los pasos ya mostrados anteriormente.

(En nuestro caso haz clic en la edición de la lista 2 correspondiente a los países Polonia y Alemania. Marcamos la opción Show Values y lo configuramos de la siguiente manera: 1Kg por 20€, 2 Kg por 30€ y 3 Kg por 40€)

WP plugin con listas de opciones relacionados y condicionados

Cuando todo esté correctamente configurado, deberás añadir un nuevo campo (New Field). 

formularios con opciones que pueden ser elegidos y condicionarán las opciones de la segunda lista en wordpress

Tras arrastrar este nuevo campo deberás dirigirte a la sección Special en la cual tendrás que seleccionar la opción: Calculator.

Crear una lista con opciones que al seleccionar una de ella afecte a las opciones mostradas en la segunda lista.

En su configuración deberás introducir el símbolo de tu moneda en el campo After. También deberás hacer clic sobre el botón: Add Operator Group. Aquí tendremos que elegir la suma entre todas las listas creadas (excepto la principal). Al haber creado las condiciones de ocultar todas las listas y solo mostrar una, los valores mostrados en el total serán los configurados específicamente para las opciones de esa lista. No obstante en caso de elegir otro tipo de condicionales lógicas u un mayor número de listas elegibles, los valores de estas listas se sumarán.

(En nuestro ejemplo configuramos la moneda € en el campo After. En el grupo de operaciones añadiremos las listas 1 y 2 de precios asociados a los pesos. Tal y como hemos configurado las listas, cuando seleccionamos un país en el lista desplegable principal, una de las listas secundarias (1 o 2) quedará oculta por lo que cuando elijamos el Peso de la lista secundaria el total mostrado será el coste correspondiente al peso del paquete seleccionado)

lista cambiante al seleccionar una u otra opción de la primera lista

Por último todo lo que tendremos que hacer será hacer clic en el botón azul que dice Save Form. Renglón seguido haz selecciona la sección Form del menú de la parte izquierda de la pantalla. Ahora observarás el formulario/calculador recién creado. Aquí tendrás que hacer clic sobre el nombre del mismo para tener acceso al código que tendremos que copiar y pegar en el post o página de tu Wordpress en el que quieres que se muestre.

Una lista de opciones que haga que cambie las opciones mostradas en la segunda lista de opciones en Wordpress

(En nuestro ejemplo, el formulario condicionado y lógico funcionará de la siguiente manera: El usuario elegirá un país en la lista desplegable. Una vez seleccionado el país se mostrará la sub-lista desplegable 1 o 2 en función de la elección de país. En esta sub-lista el usuario elegirá el peso de nuestro paquete. Por último el formulario de manea automática calculará el precio final de tu envío)

dos listas con opciones relacionadas entre si para que al seleccionar una opciones en la primera lista, la segunda lista muestre opciones en función de esta primera elección