Contact Form 7 no vacía el formulario después enviarlo

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.

Contact Form 7: Información adicional

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).

 Contact Form 7: Envío correcto

Créditos imágenes: Shutterstock (Georgejmclittle)

8 comentarios en “Contact Form 7 no vacía el formulario después enviarlo

  1. Joaquin

    Buenas!

    Genial el post. Me ha servido para solucionar el error pero solo en Mozilla, si uso el formulario en Chrome me sigue sin salir los mensajes de «formulario enviado»… ¿que código hay que introducir? Gracias de antemano

    Responder
  2. cesar

    Hola,
    No se si les saltó el problema de CF7 que incompatibiliza con CF/ customizer. De la misma manera aparece el spin cargando sin ningún mensaje de éxito. Cuando desisntalo el CF7 customizer esto se normaliza. Entonces no se como podría hacer para que funcionen correctamente. Siguiendo los pasos que mencionas sale este error en console:

    scripts.js?ver=4.9:361 Uncaught TypeError: Cannot read property 'dispatchEvent' of undefined
    at Object.wpcf7.triggerEvent (scripts.js?ver=4.9:361)
    at ajaxSuccess (scripts.js?ver=4.9:279)
    at Object. (scripts.js?ver=4.9:344)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at y (jquery.js?ver=1.12.4:4)
    at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)

    Responder
    1. Alejandro

      Tengo el mismo error, al parecer generado por la implementación de Customizer CF7. El formulario se envía pero se queda cargando y no vacía los campos. El error en mi consola de Chrome es:

      Uncaught TypeError: Cannot read property ‘dispatchEvent’ of undefined
      at Object.wpcf7.triggerEvent (scripts.js?ver=5.1.9:333)
      at ajaxSuccess (scripts.js?ver=5.1.9:246)
      at Object. (scripts.js?ver=5.1.9:316)
      at i (jquery.js?ver=1.12.4-wp:2)
      at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
      at x (jquery.js?ver=1.12.4-wp:4)
      at XMLHttpRequest.c (jquery.js?ver=1.12.4-wp:4)

      Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Los comentarios de esta página se procesan por un sistema automático de moderación por lo cual no siempre se publican de forma instantánea. Por favor respeta a los demás y ciñete al tema del post. Nos reservamos el derecho de eliminar cualquier comentario o enlace que nos parezca inadecuado o tenga una expresión de grosería, insulto, odio, hostilidad o negatividad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.