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_okya 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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Es uno de los mejores trucos para poder medir la cantidad de formularios enviados por Analytics. Muy bien!!!
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
Ahí habéis estado finos 😉
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?
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
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
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.
Cierto, ahora recomiendan https://contactform7.com/redirecting-to-another-url-after-submissions/) hacer seguimientos mediante Google Analytics o añadir el siguiente script al tema:
document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'http://example.com/'; }, false );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
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.
Lo he instalado y no se envía el formulario. Se queda colgando.
Mira que he cambiado el truco porque ha cambiado
Sí, pero he añadido el codigo a la cabecera en el tema y no se envía. Se queda colgado.
¿Has cambiado el dominio?
Sí, he puesto la url de la página de gracias, y se queda el formulario pensando.
Muchas gracias por Responder. Saludos
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!!
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 );
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?
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’
ya coloque el código en la pagina y el header y no me funciona, alguna solución estoy usando theme PL Framework
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 🙂
Gracias por la información, pero me temo que no funciona de ninguna manera…
Muchas gracias me ha ayudado a implementar efectivamente tanto la pagina de agradecimiento como el codigo de convercion.
a mi no me lo quiere hacer, no se por que la verdad……
He seguido todos los pasos de que indica Jhon y no me funciona. ¿Alguien ha encontrado otra manera de hacerlo? 🙂
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
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.
Sí claro, solo tienes que activar el Email 2, justo debajo del correo electrónico que configuras para ti
Hola me funcionó muy bien, pero si solo quiero que sea un formulario de 4 que tenga como hago
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 );