Contact Form 7 es el plugin de formularios de contacto más utilizado en WordPress por ello al momento de hablar de envío de formularios muchas veces buscamos soluciones para redirigir nuestros fieles clientes que han dejado su opinión, duda o sugerencia sobre algún producto o servicio en nuestro formulario de contacto.
Pero una vez enviado el mensaje, ¿Por qué no redirigir a estos clientes a una página especial, ofertas o categorías de nuestra tienda? Seguramente les gustará más encontrar esa sorpresa una vez que han enviado su consulta en el formulario.
¿Qué necesitamos?
- 1) Sitio web en WordPress
- 2) Plugin de formularios, Contact Form 7
- 3) Plugin para añadir códigos Javascript en WordPress, Scripts n Styles
- 4) Una landing, página destino, home o categoría de ofertas
Una vez cumplas los requisitos previos, iniciamos con diseñar el formulario de contacto en Contact Form, aquí tienes un paso a paso para crear un Formulario de Contact Form 7, brevemente te resumo los datos.
1) Sitio Web en WordPress
Claramente antes de empezar, comentar que esta función la hemos testeado en webs con WordPress, debes tener tu sitio web elaborado con este CMS, instalar los plugins para formulario de contacto y para almacenar la cadena de Script que redirige al usuario a una nueva página Lading de agradecimiento o incluso a otro dominio externo.
2) Creación de formulario rápido con Plugin Contact Form 7
Una vez hecha la instalación de contact form 7 en WordPress pasamos crearlo rápidamente con los campos que requerimos para su funcionamiento
En el formulario hemos añadido los siguientes campos, una vez rellenado y hecho clic en el botón Envíar este formulario redirecciona al usuario a la página de destino deseada,la cual añadimos en el siguiente paso con JavaScript.
- Campo de Nombre, Teléfono, Código Postal, Email, Asunto y 3 campos para adjuntar documentos.
3) Código en Scripts n Styles para redireccionar Contact Form 7
Lo primero será instalar del repositorio de WordPress el plugin que necesitamos para la redirección.
Podrás descargarlo desde aquí: Descargar Plugin Scripts n Styles
Para instalarlo puedes seguir este tutorial: ¿Cómo agregar código JavaScript a WordPress?, con plugins y sin ellos de forma correcta.
Una vez instalado nos vamos a la pestaña de «Herramientas > Scripts n Styles y añadimos el código tal como indicamos a continuación.
¿Cómo redirigir a los usuarios que rellenan el formulario?
Existen dos formas de redirigir, la más recomendada es incrustando el siguiente código JavaScript en el sitio web, como bien sabrás los códigos que adiciones a tu theme tanto de CSS como JS los debes añadir o bien en un childtheme o bien con un plugin externo que te permita mantener las funciones en caso de actualización del theme y que así no pierdas la información que tanto tiempo te costo diseñar (estilos CSS o funciones JavaScript)
El siguiente código lo tenemos que añadir en nuestro plugin Scripts n Styles o bien en el <head> de tu tema hijo, con el indicamos en location = ‘URL-Redireccion’ la URL donde deseas envíar al visitante que ha completado el formulario, esta redirección se realiza por medio de JavaScript accediendo al evento .addEventListener del Contact Form7 llamado ‘wpcf7mailsent’. Podría adaptarse el Script a cualquier otro tipo de formulario con unos cuantos cambios.
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://sitioweb.com/';
}, false );
</script>
Hecho esto tenemos listo nuestro funcionamiento tanto con el plugin Contact Form 7 y el plugin de Scripts n Styles que nos permite mantener los códigos que tanto necesita nuestro wordpress para funcionar aún teniendo actualizaciones de themes, plantillas, Corel de WordPress.
4) Diseña la página destino de la redirección
El último paso es elegir un destino, en el ejemplo anterior hemos indicado que nuestro cliente una vez rellenado el formulario será enviado al nuevo dominio sitioweb.com, incluso podrías cambiar esta ruta por nuestra página Index https://clongrafico.com/ o cualquier otra landing que gustes bien sea en el mismo dominio o en uno nuevo.
Lo más importante de esta redirección es que el usuario no se quedará con un mensaje de gracias por tu mensaje y sin saber que hacer, donde lo normal es que presionen el aspa «X» y cierren la ventana, con esta opción de redireccionar una vez enviado el formulario podemos lograr mejores ventas, generar nuevas opciones de compra o que se interese por cursos o servicios nuevos, o algo mejor dar un descuento para su próximo pedido que solo será visible para los clientes que hayan enviado su mensaje mediante el formulario y caigan en la Landing Page de oferta.
Esperamos que te haya gustado, si es así no dudes en comentar si tienes cualquier nueva duda sobre las redirecciones de Form en WordPress o si prefieres otro método.
Las redirecciones siempre habian sido un problema para mi, en este caso los formularios redirigidos de contact form 7 no se salvan, pero gracias a la explicación los pude realizar.
Hola, gracias a este artículo he podido redirigir los formularios de contacto en mi sitio web con gran facilidad
Hola, me ha encantado el post. La Creación de formulario rápido con Plugin Contact Form 7 es excelente y la redirección ofrece muchas ventajas, podemos jugar mucho con ello.
La redirección del formulario de contact form 7 no puede ser más fácil gracias a el tutorial que has indicado, muchisimas gracias por tu ayuda.
La redirección funciona a la perfección, es un método muy utilizado para mantener a los clientes que nos contactan en nuestra web, participativos y reduciendo el rebote o salida del sitio.
Agradezco el aporte. Muy fácil de usar y funcionando el formulario de contacto en WordPress con Contact Form 7.
Es el plugin por excelencia de todas las web que realizo.