Hoy os dejamos una breve entrada de unos problemas que nos hemos encontrado en varias instalaciones de WordPress en las últimas semanas.
El problema es que una vez enviado un formulario de contacto, en vez de mostrar el mensaje de que el formulario se ha enviado correctamente, no se muestra ningún mensaje y los campos del formulario siguen rellenados; dándole al usuario la impresión de que no se ha producido el envío (aunque si que se haya producido).
Esto es un problema de usabilidad y también un problema de que muchas veces recibimos un mismo formulario varias veces, porque el usuario hace click repetidas veces sobre enviar, porque no está seguro de que el envío se haya producido.
La razón de que no se vacíe el formulario de contacto y no se muestre la información de que se ha enviado el mensaje es un conflicto de JavaScript.
¿Cómo determinar el conflicto de JavaScript?
Lo más rápido es:
- Mozilla Firefox
- Click con el botón derecho del ratón sobre algún elemento de la web.
- Seleccionar «Inspeccionar elemento».
- Pinchar en «Consola».
- Y pinchar en JS.
- Ahí aparecen los errores de JavaScript de la página.
Y hay que ver qué entra en conflicto al pinchar sobre enviar.
En los casos que hemos analizado, era Contacto Form 7 con Google Analytics by Yoast (indicando que la función ga no existe). A continuación os describimos como solucionarlo.
Conflicto entre Contact Form 7 y Yoast Analytics
Si en la instalación de WordPress se usa Contact Form 7 y YOAST Analytics (en la nueva versión del código de seguimiento de Google: Universal tracking), además del seguimiento de envíos de contact form (añadiendo en Configuración adicional: on_sent_ok: "ga('send', 'pageview', '/contacto/formulario-enviado-ok/');")) hay un conflicto de JavaScript que impide que se muestre el envío correcto del formulario y se vacíe el mismo.
Este conflicto es debido a que Google Analytics by Yoast cambia el nombre de la función que llama a Google Analytics Universal Tracking en el Script que inserta automáticamente en todas las páginas. La función que llama a Google Analytics Universal Tracking por defecto se llama ga, pero ellos han decidido renombrarlo por __gaTracker.
Esto se ve que lo han hecho por que no haya confilictos por si hay otro plugin de Google Analytics o el propio tema lleva incluido el código de Analytics. Pero no es comportamiento por defecto del código unviersal de Google Analytics y sinceramente no estamos muy de acuerdo con este cambio de denominación de la función.
El problema viene si hacemos el seguimiento del envío correcto de los formularios añadiendo en Configuración adicional: on_sent_ok: "ga('send', 'pageview', '/contacto/formulario-enviado-ok/');"). Entonces habrá un conflicto de JavaScript, porque la función ga que intenta llamar Contact Form 7 no existe, porque Yoast Analytics la ha renombrado por __gaTracker.
En vez de utilizar el código de esta forma, si se usa Google Analytics by Yoast con Google Analytics Universal Tracking, el código que hay que insertar en el formulario de Contact Form 7 en el campo de Configuración adicional es: on_sent_ok: "__gaTracker('send', 'pageview', '/contacto/formulario-enviado-ok/');").
Insertando el código de esta forma al enviar el formulario, se vaciará el mismo y mostrará el mensaje de envío satisfactorio (además de registrar el envío satisfactorio).
Créditos imágenes: Shutterstock (Georgejmclittle)