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 4 cosas a realizar.

Cuando se habla de poner un campo pipe significa que dentro del valor tendrá este formato  ‘texto | ejemplo@dominio.com’

A continuación te indico los pasos que debes de realizar

Crear tu formulario en Contact Form 7

Para este punto no hay mucho secreto, simplemente debes ir a tu Contact Form 7 crear uno con el nombre que quieras si ya lo tienes simplemente accede a él.

Añadir un campo desplegable de tipo select

El campo desplegable que debes añadir debe ser como este:

[select* departmentEmail placeholder "¿A qué departamento quieres enviar el mensaje?" "Atención al cliente | info@dominio.com" "Soporte tecnico
| soporte@dominio.com" "Departamento comercial | comercial@dominio.com" "Proveedores | proveedor@dominio.com" "]

Fíjate en lo siguiente, estamos creando un campo select pero los valores tienen la estructura key:value.

La clave se muestra en el desplegable, y el valor se muestra en el correo cuando formateas el shortcode.

Añadir un campo oculto como contenedor

Vale, la parte que sigue, es muy simple, como a nosotros nos interesa guardar también la clave en algun sitio para poder mandarla, es decir que la key la podamos mostrar en el correo, antes deberemos guardarla en otro campo como contenedor. Creamos uno que sea oculto.

[hidden departmentName default:departmentName "No se ha seleccionado ninguno"]

La gracia de esto, es para que podamos mover la key del punto 2 dentro de este campo mediante jQuery, de modo que cuando se envíe, podamos también mostrar el nombre del departamento simplemente poniendo en el correo [departmentName]

Pegamos el codigo jQuery

Ya por último, debes añadir el codigo jQuery que hay a continuación en una parte de tu WordPress que cargue jQuery en el Document Ready, si no sabes donde una forma simple es instalando el plugin Custom CSS & JS y dentro meter el codigo:

jQuery(document).ready(function($){
   jQuery('select[name="departmentEmail"]').on('change', function(){
       var name = jQuery(this).val();
       jQuery('input[name="departmentName"]').val(name); 
    });
});

Por último, me encontré con un caso de una persona que me contactó por este artículo en el que su plantilla deshabilitaba la libreria jQuery, la mayoría de plantillas no lo hace ya que esa librería está integrada en el Core de WordPress. Si ese es tu caso asegúrate que estás cargando la libreria jQuery dentro de functions.php de tu plantilla con este código:

function include_custom_jquery() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, false);
}

 

Acerca del Autor

Met El Idrissi

Desarrollador web WordPress freelance y emprendedor tecnológico en aplicaciones web SaaS

Ver Artículos