Redireccionar Contact Form 7: Guía Paso a Paso

Implementar una redirección después de que un usuario completa un formulario de Contact Form 7 en tu sitio web WordPress es una práctica altamente recomendada para mejorar la experiencia del usuario y optimizar el seguimiento de conversiones. Anteriormente, esto se lograba con el hook on_sent_ok, pero este método ya no está disponible. Afortunadamente, existen diversas alternativas efectivas y sencillas para lograr este objetivo. En este artículo, te guiaremos a través de diferentes métodos para redirigir a tus usuarios a una página de agradecimiento o cualquier otra URL de tu preferencia después de enviar un formulario en Contact Form 7.

¿Por qué redirigir a los usuarios después del envío de un formulario?

Redirigir a los usuarios a una página de agradecimiento tras completar un formulario ofrece múltiples beneficios significativos para tu sitio web y la interacción con tus visitantes:

• Mantener al usuario enganchado: Después de completar un formulario, redirigir al usuario a una página de agradecimiento personalizada ayuda a mantenerlo dentro de tu sitio web, explorando contenido adicional o conociendo más sobre tus productos o servicios. Evitas que la interacción termine abruptamente y fomentas una mayor navegación.
• Experiencia de usuario personalizada: Una página de agradecimiento te permite ofrecer un mensaje personalizado y relevante después de la interacción del usuario. Puedes confirmar la recepción de sus datos, ofrecer información adicional, o incluso proporcionar un código de descuento o contenido exclusivo como agradecimiento por su tiempo y acción. Esto contribuye a una experiencia más positiva y memorable.
• Confirmación de recepción de datos: La redirección a una página de agradecimiento sirve como confirmación visual e inmediata de que la información enviada a través del formulario ha sido recibida exitosamente. Esto brinda tranquilidad al usuario y asegura que su acción ha tenido el resultado esperado.
• Seguimiento de conversiones: La página de agradecimiento se convierte en un punto clave para el seguimiento de conversiones. Al redirigir a los usuarios a esta página después del envío del formulario, puedes implementar herramientas de análisis como Google Analytics para medir con precisión cuántos usuarios completaron el formulario y llegaron a la página de agradecimiento. Esto es fundamental para evaluar la efectividad de tus formularios y campañas de marketing.

Plugins recomendados para redireccionar Contact Form 7

Existen plugins de WordPress diseñados específicamente para simplificar el proceso de redirección en Contact Form 7. A continuación, te presentamos dos de las opciones más recomendadas y populares:

1. Redirection for Contact Form 7

Redirection for Contact Form 7 es un plugin dedicado exclusivamente a gestionar las redirecciones de Contact Form 7. Su principal ventaja radica en su simplicidad y facilidad de uso. Permite redirigir a los visitantes a una página de agradecimiento o a cualquier otra URL después de que el formulario se haya enviado correctamente. Es importante destacar que la redirección solo ocurre si el mensaje se envía sin errores, asegurando que la redirección se produzca solo en casos de éxito.

2. Controls for Contact Form 7 (Analytics & Tracking)

Controls for Contact Form 7 es un plugin más completo que, además de ofrecer funcionalidades de redirección, proporciona una amplia gama de opciones para personalizar y controlar los formularios de Contact Form 7. Entre sus características adicionales, se incluyen el almacenamiento de las entradas de formularios, la opción de deshabilitar AJAX, el seguimiento de analíticas y, por supuesto, la redirección a páginas de agradecimiento. Si buscas una solución más integral para gestionar tus formularios, este plugin puede ser una excelente opción.

Redirección con Redirection for Contact Form 7: Paso a paso

Implementar la redirección utilizando el plugin Redirection for Contact Form 7 es un proceso muy intuitivo. Sigue estos pasos:

1. Dirígete a Contacto >> Formularios de contacto en el panel de administración de WordPress.
2. Selecciona el formulario de Contact Form 7 al que deseas agregar la redirección.
3. Haz clic en la pestaña "Redirect Settings" (Ajustes de redirección).
4. En el menú desplegable "Choose a page" (Elige una página), selecciona la página de agradecimiento que deseas mostrar a los usuarios después del envío del formulario.
5. Opcional: Si deseas redirigir a una URL externa, marca la casilla "Use external URL" (Usar URL externa) e introduce la URL deseada en el campo "External URL" (URL externa).
6. Haz clic en el botón "Save" (Guardar) para aplicar los cambios.

Consejos adicionales con Redirection for Contact Form 7:

• Abrir en una nueva pestaña: Puedes configurar el plugin para que la página de agradecimiento se abra en una nueva pestaña del navegador, manteniendo tu sitio web original abierto.
• Parámetros de consulta: El plugin te permite pasar campos específicos del formulario como parámetros de consulta en la URL de redirección. Esto puede ser útil para personalizar aún más la página de agradecimiento con información del usuario.
• Retraso en la redirección: Puedes configurar un retraso en segundos antes de que se produzca la redirección. Esto puede ser útil si deseas mostrar un mensaje breve de confirmación en la misma página antes de redirigir al usuario.
• Scripts personalizados: Redirection for Contact Form 7 también te permite agregar scripts personalizados que se ejecutarán una vez que el formulario se haya enviado correctamente. Esto abre un abanico de posibilidades para funcionalidades más avanzadas.

Redirección con Controls for Contact Form 7: Paso a paso

Si optas por utilizar el plugin Controls for Contact Form 7, el proceso de redirección es igualmente sencillo:

1. Dirígete a Contacto >> Formularios de contacto en el panel de administración de WordPress.
2. Selecciona el formulario de Contact Form 7 que deseas modificar.
3. Haz clic en la pestaña "Customize" (Personalizar).
4. Localiza el campo "Redirect to URL on Success" (Redirigir a URL en caso de éxito) e introduce la URL de la página de agradecimiento (o cualquier otra URL de destino) en este campo.
5. Haz clic en el botón "Save" (Guardar) para guardar la configuración.

Consejos adicionales con Controls for Contact Form 7:

• Deshabilitar AJAX: Este plugin te permite deshabilitar AJAX para formularios específicos, lo cual puede ser útil en ciertos escenarios.
• CSS personalizado: Puedes deshabilitar el CSS predeterminado de Contact Form 7 y aplicar tu propio estilo personalizado.
• Formato de párrafo automático: El plugin te permite desactivar el formato de párrafo automático.
• Tipos de entrada HTML5: Puedes controlar el uso de tipos de entrada HTML5.
• Seguimiento de analíticas: Controls for Contact Form 7 facilita la integración con plataformas de analíticas como Google Analytics, Matomo o Facebook Pixel para el seguimiento de conversiones y el análisis del rendimiento de tus formularios.

Solución basada en código: JavaScript y eventos DOM

Si prefieres una solución basada en código y evitar la instalación de plugins adicionales, puedes utilizar JavaScript y los eventos DOM de Contact Form 7 para implementar la redirección. Este método requiere agregar un fragmento de código a tu sitio web.

Pasos para la redirección con código JavaScript:

1. Accede al archivo functions.php de tu tema hijo (recomendado) o utiliza un plugin como Code Snippets para insertar código PHP personalizado.
2. Añade el siguiente fragmento de código PHP:

add_action( 'wp_footer', 'mi_redireccion_cf7' ); function mi_redireccion_cf7() { ?> <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'http://ejemplo.com/pagina-de-agradecimiento/'; }, false ); </script> <?php } 

Importante:

• Reemplaza http://ejemplo.com/pagina-de-agradecimiento/ con la URL de la página a la que deseas redirigir a los usuarios.
• Este código utiliza el evento wpcf7mailsent, que se dispara cuando el correo electrónico del formulario se ha enviado correctamente.

Añadir un retraso a la redirección con JavaScript

Si deseas agregar un retraso antes de que se produzca la redirección, puedes modificar el código JavaScript anterior utilizando la función setTimeout(). Esto permite mostrar un mensaje de confirmación breve antes de redirigir al usuario.

Código JavaScript con retraso de 5 segundos:

add_action( 'wp_footer', 'mi_redireccion_cf7_con_retraso' ); function mi_redireccion_cf7_con_retraso() { ?> <script> document.addEventListener( 'wpcf7mailsent', function( event ) { setTimeout(function(){ location = 'http://ejemplo.com/pagina-de-agradecimiento/'; }, 5000); }, false ); </script> <?php } 

En este ejemplo, el usuario será redirigido a http://ejemplo.com/pagina-de-agradecimiento/ después de un retraso de 5 segundos (5000 milisegundos). Puedes ajustar el valor del tiempo (en milisegundos) según tus necesidades.

Preguntas frecuentes (FAQ)

¿Por qué es recomendable redirigir después de enviar un formulario de Contact Form 7?

Redirigir mejora la experiencia del usuario, permite el seguimiento de conversiones, confirma el envío exitoso y mantiene a los usuarios enganchados en tu sitio web.

¿Qué plugin es mejor para redireccionar Contact Form 7?

Redirection for Contact Form 7 es ideal por su simplicidad y enfoque en la redirección. Controls for Contact Form 7 es más completo y ofrece funcionalidades adicionales.

¿Puedo redirigir sin usar plugins?

Sí, puedes utilizar código JavaScript y los eventos DOM de Contact Form 7 para implementar la redirección, como se muestra en la sección de "Solución basada en código".

¿Cómo puedo añadir un retraso a la redirección?

Utiliza la función setTimeout() en JavaScript para añadir un retraso en milisegundos antes de que se produzca la redirección, como se muestra en el ejemplo de "Añadir un retraso a la redirección con JavaScript".

Conclusión

Redirigir a los usuarios después de enviar un formulario de Contact Form 7 es una práctica esencial para optimizar la experiencia del usuario y mejorar el seguimiento de conversiones en tu sitio web WordPress. Ya sea utilizando plugins como Redirection for Contact Form 7 o Controls for Contact Form 7, o implementando una solución basada en código JavaScript, tienes a tu disposición diversas opciones para lograr este objetivo de manera efectiva y sencilla. Elige el método que mejor se adapte a tus necesidades y conocimientos técnicos, y comienza a aprovechar los beneficios de la redirección en tus formularios.