¿Como enviar un correo a diferentes destinatarios con Contact Form 7 en función de un desplegable y sin mostrar los correos electrónicos?

En este artículo vamos a explicar como hacer que a tavés de un formulario de Contact Form 7 puedas enviar a diferentes destinatarios en función de un desplegable.

Esto va genial cuando por ejemplo en una misma web hay un formulario con distintos departamentos o centros, pongamos como ejemplo la empresa fictícia Barcelona Tech, con los departamentos:

  • Atención al cliente (info@dominio.com)
  • Soporte tècnico (soporte@dominio.com)
  • Departamento comercial (comercial@dominio.com)
  • Proveedores  (proveedor@dominio.com)

Y con esto te piden que tengas un formulario con el cual aparezca un desplegable con los distintos departamentos y que si el usuario marca Soporte Tècnico lo mandé a soporte@dominio.com, si lo marca como Departamento comercial lo mande a comercial@dominio.com…

Esto se podría resolver poniendo por ejemplo los correos directamente pero por el motivo que sea no interesa o simplemente no queremos exponer nuestros correos para evitar el SPAM de cualquier bot que entrara en nuestra web.

Contact Form 7 NO permite hacer esto por defecto, así que hay que realizar una serie de acciones, muy simples, son exactamente 3 acciones a realizar.

Ejemplo real de un cliente

Crear el formulario con el desplegable con opciones pipe texto | ejemplo@dominio.com

  • Lo primero que hay que hacer es crear un formulario con CF7 y un desplegable con las opciones que tengamos para cada departamento. CF7 permite con el símbolo “|”, llamado “pipe” poner key:value en las opciones del desplegable, algo así como “Atención al cliente” | “info@dominio.com”.Esta parte básicamente lo que hacemos es decirle que el select departmentEmail, o el nombre que quieras ponerle, donde tened en cuenta que en HTML se va a mostrar sólo el nombre NO el correo electrónico. Pero por la parte del backend se va a pasar el correo electrónico, por lo que deberemos meter este [departmentEmail] dentro del destinatrio en CF7 en la configuración del formulario..

Crear un campo oculto hidden para arrastrar el nombre

Es posible que necesites también tener el nombre del departamento para meterlo dentro del contenido, en este segundo paso lo que haremos es arrastrar el nombre del departamento en un campo oculto para luego poderlo usar dentro del cuerpo de nuestro mensaje y poder imprimir el string “Atención al cliente, “Soporte tècnico”…o el que sea que tengamos dentro del desplegable. Para ello simplemente crearemos un input oculto como el que sigue.

Mover el nombre del HTML al campo oculto con jQUERY

Por último con este jquery (sin esto no nos va a funcionar nada) lo que hacemos básicamente es coger el parámetro departmentEmail donde recordemos que almacenamos únicamente los nombres en el DOMHTML del navegador y lo almacenamos en el campo oculto que hemos creado dentro del formulario de CF7.

Este codigo lo podeis meter en cualquier archivo .js podeis hacerlo en el que viene por defecto en la plantilla el main.js o functions.js o crear uno vuestro custom.js y añadirlo en el header de WordPress (esta ultima opción sin duda es la mejor para no pisaros con las actualizaciones de WordPress)

Si te ha gustado ¡comenta y dále al like!