En este tutorial vamos a ver cómo podemos crear campos condicionales en Contact Form 7 de forma sencilla.
Lógica condicional en Contact Form 7
Como sabemos, Contact Form 7 está entre los plugins de creación de formularios más populares de WordPress. Y no es para menos, es sencillo de usar y, aunque nos proporciona la posibilidad de crear formularios básicos, para muchas ocasiones es más que suficiente.
Sin embargo a veces necesitamos añadir otras funcionalidades, y para eso o bien usamos otros plugins de formularios avanzados como Gravity Forms, o bien según lo que queramos añadir, podemos agregar complementos a Contact Form 7.
Por ejemplo en el tutorial sobre almacenar mensajes de Contact Form 7 hablamos del plugin Flamingo. En esta ocasión vamos a usar otro que nos va a permitir incluir lógica condicional en CF7. ¡Vamos a verlo!.
Instalando el plugin
Lo primero que tendremos que hacer será instalar un plugin gratuito que encontraremos en el repositorio de WordPress. Este plugin se llama Conditional Fields for Contact Form 7 y está desarrollado por Jules Colle.
En el caso de que queramos añadir campos condicionales a formularios de CF7 nos resultará muy práctico, ya que básicamente lo que hace es permitirnos agregar lógica condicional a los mismos.
Así que vamos a instalarlo. Como siempre, podemos descargarlo en el equipo e ir al escritorio de WordPress, "Plugins/Añadir nuevo/Subir plugin", seleccionar el archivo comprimido, instalar y activar, o bien ir a "Plugins/Añadir nuevo", escribir el nombre en el buscador, y una vez localizado proceder de la misma forma, instalando y activando el mismo.
Aunque es obvio, recordad que este plugin funciona sobre CF7, es imprescindible que lo hayamos instalado y activado previamente.
Bien, pues nada más activemos Conditional Fields for Contact Form 7 veremos que nos aparece una nueva opción de menú dentro de "Contacto", "Conditional Fields". Si pulsamos nos mostrará una pantalla como ésta:
Configuración básica Conditional Fields for Contact Form 7
Como vemos se trata de las opciones de configuración. En primer lugar nos indica los pasos que debemos seguir para crear o editar campos condicionales y después los ajustes básicos de animación de los mismos.
En este caso los dejaremos como están, vamos a ir a la parte que nos interesa que es incluir campos con lógica condicional, pero antes tenemos que añadir algunos campos.
Añadir nuevos campos
Partiremos de un formulario de contacto creado previamente con CF7, el cual, como vemos, tiene dos campos de texto para rellenar, email y mensaje, y uno tipo checkbox para la aceptación de la política de privacidad.
Formulario de contacto CF7
Supongamos que este formulario es de una tienda online, y que a través de él queremos facilitar que los clientes nos contacten, ya sea por algún motivo genérico o porque necesiten gestionar algún tema referente a su pedido.
Así que en lugar de usar un campo texto para escribir el asunto del mensaje, añadiremos uno donde se pueda seleccionar el motivo por el que se contacta, que podrá ser "General" o "Pedidos", y luego otro donde vamos a desglosar más concretamente qué gestión se quiere llevar a cabo para ese pedido, si es realizar el seguimiento del mismo, gestionar una devolución o pedir una factura.
Pues vamos a hacerlo, para ello iremos al escritorio de WordPress, "Contacto", y haremos clic en la opción "Editar" dentro del formulario que queramos modificar.
Estando en la pestaña "Formulario", nos situamos en el lugar donde queramos insertar los campos, en este caso entre el email y el mensaje, y pulsaremos sobre "menú desplegable" para añadir el primero, y después lo insertamos.
Incluir desplegable
A continuación haremos lo mismo con el siguiente para elegir entre las opciones disponibles si hemos marcado "Pedidos", pero vamos a añadirlo dentro de un campo condicional para después poder configurar cuando queremos que se muestre el desplegable. Así que hacemos clic en "Conditional fields Group" y lo rellenaremos de la siguiente forma:
Añadir grupo condicional
Ahora hacemos clic en "Insertar". Veremos que nos agrega un código dentro del cual tendremos que añadir el desplegable. Simplemente nos ubicamos en el mismo, y hacemos clic de nuevo en "menú desplegable" para agregar el siguiente campo:
Incluir desplegable dentro del grupo condicional
Y de nuevo insertamos. De esta forma conseguiremos añadir los dos campos, el asunto y las opciones para los contactos sobre pedidos. El código sería éste:
<label>Email * <label> [email* your-email] </label></label> [select Asunto "General" "Pedidos"] [group Opcion_pedido clear_on_hide] [select Opciones "Seguimiento" "Devolución" "Facturación"] [/group] <label> Mensaje * [textarea* your-message] </label> <strong>Política de Privacidad:</strong> [acceptance acceptance-287] He leído y acepto la <a href="/politica-privacidad" rel="nofollow">Política de Privacidad</a>. [/acceptance] El responsable del fichero, RESPONSABLE, usará esta información para responder a las solicitudes de contacto. Los datos enviados se guardarán en HOSTING dentro de la UE. Puedes acceder, rectificar o suprimir los mismos si lo deseas. [submit "Enviar"]
Pues ya los hemos incluido. Si guardamos veremos que el segundo campo no se está mostrando, así que vamos a hacer que sea visible sólo cuando hayamos elegido "Pedidos" en el asunto del mensaje.
Agregar lógica condicional
Para agregar lógica condicional tenemos que ir a la pestaña "Conditional Fields". Una vez entramos veremos que nos ofrece la posibilidad de añadir una nueva condición, así que pulsaremos sobre el botón "Add new conditional rule" para hacerlo.
Ahora tendremos que rellenar la misma. Aquí se trata de indicar en qué momento se va a mostrar el contenido del grupo condicional que añadimos en el punto anterior.
Primero seleccionaremos dicho grupo, "Opcion_pedido", en "Select group". Después en "Select field" tenemos que indicar el "Asunto", y por último establecer la condición de que éste sea igual a Pedidos, ya que es en ese momento cuando se tiene que mostrar el segundo campo. Quedaría así:
Agregar lógica condicional: Configurar visibilidad del campo
Y con esto ya lo tendríamos listo, hemos añadido un campo condicional cuya visibilidad depende del valor de otro campo. ¿Fácil, verdad? :).
Resumen y conclusión
CF7 es un plugin muy popular para crear formularios básicos en WordPress. Para añadir lógica condicional al mismo podemos usar el plugin Conditional Fields for Contact Form 7, el cual tendremos que instalar y activar.
Una vez lo hagamos, editaremos nuestro formulario e incluiremos un grupo condicional que contendrá los campos que queramos mostrar en función del valor de otro campo. Después tendremos que añadir la condición específica, y listo.
Esperamos que os haya sido útil. ¡Y ya lo sabéis! Si os suscribís a boluda.com tendréis acceso a más de 5718 vídeos para sacarle el máximo partido a WordPress y aprender sobre muchos otros temas. ¡Os esperamos dentro! :)