Cómo redirigir a otra URL tras enviar un formulario de Contact Form 7 (actualizado)

Contact Form 7 es el plugin de formularios de contacto más utilizado en WordPress, con enorme diferencia sobre el resto, y es chocante, en vista a lo espartano de su interfaz, nada intuitiva, no digamos para novatos.

Pero ahí está, y sigue siendo el rey indiscutible.

Una de las funcionalidades – aparentemente – no incluida en el plugin es la posibilidad de que, una vez se complete el envío de un formulario, podamos redirigir automáticamente al usuario a una página de nuestra elección, y digo aparentemente porque en realidad si que está incluido, solo hay que echar mano de los un truco.

Cómo redirigir a otra página tras enviar un formulario Contact Form 7

Esta pestaña del plugin, la gran olvidada por los novatos pero al tiempo la más adorada por los usuarios avanzados, acojona un poco la primera vez que se aborda, por su falta de … todo. Es simplemente una caja vacía, sin más explicaciones.

Pero no, resulta que ahí, en esa caja vacía, es donde empieza la magia de Contact Form 7, y es donde podemos añadir de todo al plugin, solo tienes que echar un vistazo (profundo) a todo lo que puedes hacer con él, en su Biblia, la sección Docs de la web del autor.

>El método que usaba el hook on_sent_ok ya no se recomienda, de hecho esa función se ha abandonado.

Pues bien, para conseguir lo que te propongo hoy, para que los usuarios que te contacten tengan algo que hacer tras su logro, como comprar algo, leer un artículo de lo bueno que eres, o una página de agradecimiento (lo ideal), lo que sea, es mandarles a alguna página de tu web.

Solo tienes que añadir un código como este en la caja de Ajustes adicionales de tu formulario tu tema (idealmente en la cabecera):

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://tudominio.es/';
}, false );
</script>

Por supuesto, cambia lo de tudominio.es por la url a la que quieres redirigir a tus visitantes tras contactar.

Lo que hace este script es lanzar la URL (location) que definas a continuación, una vez se envíe con éxito el formulario.

De este modo, el usuario verá el mensaje de que ha enviado su mensaje, momentáneamente, para, a continuación, ser redirigido automáticamente a la URL que hayas indicado. Simple y efectivo.

formulario contact form 7 enviado

 

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(14 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

31 comentarios en “Cómo redirigir a otra URL tras enviar un formulario de Contact Form 7 (actualizado)”

    1. Sin olvidarnos de configurar esa página como objetivo en Analytics. Así podemos ver el comportamiento posterior de los usuarios. Buenas Fernando! Al tajo otra vez

  1. Muchas gracias, buen artículo. Yo lo que le hecho en falta a es que no puedas usar etiquetas html, para por ejemplo, poner un checkbox con la frase de que aceptas los términos de privacidad y que tenga un enlace para leerlas ¿cómo lo hacéis vosotros?

  2. John J Rodriguez G

    Señores alguien lo ha hecho pero según el menú desplegable , Osea: si seleccione una variable del menú quiero que valla a una URL o si seleccione otra valla a otra URL, alguien me puede dar una luz con ese código Gracias

  3. Hola Fernando, gracias de antemano por la ayuda pero, al día de hoy, 9/2017 ya no funciona esa función. ¿Habrá otro modo de enviar el usuario a una URL especifica? Muchas gracias

    1. sergio empiezapori

      Hola, Ahora lo debes hacer con el siguiente código:

      document.addEventListener( ‘wpcf7mailsent’, function( event ) {
      location = ‘http://www.tudominio.es/pagina-de-agradecimiento/’;
      }, false );

      Lo debes poner en la página que contenga en formulario, no en el formulario.

      1. mi theme es un Divi, solo sería necesario incluirlo en Opciones de tema -> CCS personalizado?

        lo intento pero no me redirecciona, se queda parado tras mostarar le mensaje de gracias, enviado

        1. sergio empiezapori

          Debes poner ese código en la página donde pongas el formulario o código de ContacForm7, lo puede poner por ejemplo debajo o seguido a el.

          1. Carlos Carbellido

            Sí, pero he añadido el codigo a la cabecera en el tema y no se envía. Se queda colgado.

  4. lo estoy intentando pero no hay manera, exactamente donde tendría que poner el código, tengo la página maquetada con divi, pero no soy capaz de que funcione, cuando rellegono el formulario, sale el mensaje de enviado, pero no redirecciona… 🙁 gracias!!

    1. sergio empiezapori

      debajo del código del CONTAC, por ejemplo:

      [contact-form-7 id=»170″ title=»el que sea….»]

      document.addEventListener( ‘wpcf7mailsent’, function( event ) {
      location = ‘http://www.tudominio.com/gracias-por-contactar/’;
      }, false );

  5. Y si tengo varios formularios en la misma pagina pero por ejemplo: ahora tengo una landing page con distinto formulario y quiero que este redireccione a una pagina de agradecimiento en particular para canjeo de promociones, ¿que se hace?
    Por cierto roble esta solución y no me funciona. Este on_sent_ok si me funciono. ¿Hay algún problema si sigo usando este método?

    1. David Alejandro

      Hola, tienes que indicarle el id de formulario, como lo pone en la pagina de contact form 7.

      document.addEventListener( ‘wpcf7submit’, function( event ) {
      if ( ‘123’ == event.detail.contactFormId ) {
      alert( «The contact form ID is 123.» );
      // do something productive
      }
      }, false );

      donde «123» es el identificador del form que quieres. Evidentemente cambia la función ‘alert’ por ‘location’

  6. ya coloque el código en la pagina y el header y no me funciona, alguna solución estoy usando theme PL Framework

  7. Hola chicos que tal, he tenido el mismo problema que ustedes y ya pude encontrar la solución para poder enviar un formulario a una pagina de Agradecimiento o de GRACIAS, tienen que poner este script en la página única en donde esta dicho formulario:

    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    if ( event.detail.contactFormId == ‘ID DE TU FORMULARIO’ ){
    location = ‘www.tupaginaweb.com/gracias’;
    }
    }, false );

    En donde: ID DE TU FORMULARIO (es el ID identificador de tu formulario que has creado)
    y LOCATION: es el link de la pagina a donde se quiere direccionar

    Para poner dicho script en una única pagina tienen que hacerlo con un plugin que te permite poner script en el header o footer de una sola página que desees, se llama: SOGO Add Script to Individual Pages Header Footer
    y el link de descarga es el siguiente: https://es.wordpress.org/plugins/oh-add-script-header-footer/

    NOTA: Pongan el script en el footer para evitar tiempo de carga en la web.
    Y marquen los campos de Hide Generic header script y Hide Generic footer script, esto hace que el script NO se repita en las demás páginas de la web.

    Espero les sirva así como me sirvió a mi, nos vemos 🙂

  8. Benildo Rodriguez

    Muchas gracias me ha ayudado a implementar efectivamente tanto la pagina de agradecimiento como el codigo de convercion.

  9. He seguido todos los pasos de que indica Jhon y no me funciona. ¿Alguien ha encontrado otra manera de hacerlo? 🙂

  10. Gracias Fernando, buen truco.
    Hace tiempo de este post pero tengo una duda/pregunta: ¿Es posible que la redirección se haga en una ventana nueva?, si es así, ¿como se haría?
    Gracias

  11. Chema Cagigas

    Hola buenas, tengo una duda, me gustaría saber si hay alguna manera de reenviar la información del formulario a la persona que lo rellena además del destinatario normal.

  12. quiero comentarles que yo corregí esto copiando el código .. a continuación .. que aunque es el mismo que han descrito en el chat .. encontré unos leves errores pero ya funciona … para copiarlo descarguen un complemento que se llama Insert Headers and Footers y peguenlo en Headers

    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    location = ‘http://tudominio.com/gracias’;
    }, false );

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido