Cómo mostrar un popup de confirmación de navegación para formularios en WordPress

No hay nada más frustrante que llenar un formulario de WordPress, solo para presionar el botón de retroceder por error y perderlo todo. Todos hemos pasado por eso, y generalmente es suficiente para que alguien se rinda de inmediato.

Para los propietarios de sitios, ese pequeño inconveniente puede significar ventas perdidas y menos registros. Los visitantes se irán molestos y será mucho menos probable que regresen e intenten de nuevo.

¿La buena noticia? Hay una solución fácil: un popup de confirmación de navegación. Esta simple advertencia les da a los usuarios una segunda oportunidad antes de que abandonen una página con un formulario no enviado.

En esta guía, te mostraremos cómo agregar esta función a tus formularios de WordPress para que puedas crear una experiencia más fluida y aumentar tus tasas de finalización de formularios.

¿Qué es un popup de confirmación de navegación y por qué lo necesitas?

Un popup de confirmación de navegación es una advertencia del navegador que aparece cuando un usuario con cambios no guardados en un formulario intenta abandonar una página web.

Probablemente hayas visto esta función en acción en la pantalla del editor de contenido de WordPress. Si tienes cambios no guardados e intentas abandonar la página, aparece una advertencia para evitar que pierdas tu trabajo.

Agregar esto a tus propios formularios es un pequeño cambio con grandes beneficios:

• Mejora la experiencia del usuario: Ahorra a los visitantes la frustración de perder su progreso accidentalmente, demostrando que valoras su tiempo.
• Aumenta las tasas de conversión: Al evitar el abandono accidental, le das a los usuarios una segunda oportunidad para completar el formulario, lo que puede aumentar los leads.
• Genera confianza en el usuario: Una función pensada como esta demuestra profesionalismo y cuidado, lo que puede ayudar a generar lealtad y fomentar visitas recurrentes.

Teniendo esto en cuenta, agreguemos esta advertencia a tus comentarios de WordPress y otros formularios en tu sitio.

Aquí tienes todo lo que cubriremos en esta guía:

• Método 1: Mostrar un popup de confirmación de navegación para formularios no enviados en WordPress
• Método 2: Agregar el popup de advertencia a otros formularios en tu sitio de WordPress
• Extra: Mejora el rendimiento de tus formularios de WordPress
• Preguntas frecuentes sobre popups de confirmación de navegación
• Guías adicionales para usar formularios de WordPress

¿Listo? Empecemos.

Método 1: Mostrar un popup de confirmación de navegación para formularios no enviados en WordPress

Este método implica la creación de un plugin simple y personalizado.

¡No te preocupes si nunca antes has programado! Te guiaremos en cada paso del proceso, y es una excelente manera de ver cómo funcionan los plugins de WordPress.

Además, también puedes descargar el plugin al final de este tutorial para instalarlo en tu sitio web.

Sin embargo, recomendamos encarecidamente crear el plugin tú mismo para comprender mejor cómo funciona el código. Puedes seguirlo en una instalación local o sitio de staging primero.

Primero, necesitas crear una nueva carpeta en tu computadora y nombrarla confirm-leaving. Dentro de la carpeta confirm-leaving, crearás otra carpeta y la nombrarás js.

Ahora, abramos un editor de texto plano como el Bloc de notas y creemos un nuevo archivo. Dentro, simplemente pega el siguiente código:

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.wpbeginner.com
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
 * Version:     1.0.0
 * Author:      WPBeginner
 * Author URI:  https://www.wpbeginner.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

function wpb_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Esta función PHP utiliza wp_enqueue_script, que es el método oficial de WordPress para agregar JavaScript. Esta es la mejor práctica porque ayuda a prevenir conflictos de scripts con otros plugins.

Ahora, guarda este archivo como confirm-leaving.php dentro de la carpeta principal confirm-leaving.

Ahora, necesitamos crear el archivo JavaScript que este plugin está cargando. Puedes hacerlo creando un nuevo archivo en tu editor de texto y pegando este código dentro:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Este JavaScript detecta si un usuario ha comenzado a llenar el formulario de comentarios. Si intenta abandonar la página antes de enviarlo, se activa la ventana emergente de advertencia.

Guarda este archivo como confirm-leaving.js dentro de la carpeta js que creaste anteriormente.

Después de guardar ambos archivos, así es como debería verse la estructura de tu carpeta:

Ahora, necesitas conectarte a tu sitio de WordPress usando un cliente FTP. Para instrucciones paso a paso, puedes ver nuestra guía sobre cómo usar FTP para subir archivos a WordPress.

Una vez conectado, deberás subir la carpeta confirm-leaving a la carpeta /wp-contents/plugins/ en tu sitio web.

Después de eso, querrás iniciar sesión en el área de administración de WordPress y dirigirte a 'Plugins'.

Desde aquí, deberías ver el plugin 'Confirm Leaving' en la lista de plugins instalados. Luego puedes hacer clic en el enlace 'activar' debajo de él.

Eso es todo. Ahora puedes visitar cualquier publicación en tu sitio web, escribir algo en el formulario de comentarios y luego intentar salir de la página.

Luego, aparecerá una ventana emergente, advirtiéndote que tienes cambios sin guardar.

Por razones de seguridad, los navegadores web modernos mostrarán su propio mensaje de advertencia genérico (como “¿Salir del sitio? Los cambios que realizaste podrían no guardarse.”) en lugar del texto personalizado del código. El propósito del código es simplemente activar esta indicación estándar del navegador.

Método 2: Agregar el popup de advertencia a otros formularios en tu sitio de WordPress

Puedes usar el mismo código para dirigirte a cualquier otro formulario en tu sitio de WordPress, como un formulario de contacto.

En este ejemplo, nos dirigimos a un formulario creado con el plugin WPForms, pero estos pasos funcionarán si usas un plugin de formulario de contacto diferente en tu sitio web.

¿No tienes un formulario de contacto y quieres crear uno? Entonces puedes consultar nuestra guía sobre cómo crear un formulario de contacto.

En WPBeginner, usamos WPForms para incrustar muchos formularios diferentes, incluido nuestro formulario de contacto, encuestas anuales a lectores y solicitudes de migración. Si tienes curiosidad sobre la herramienta y lo que puede hacer, puedes ir a nuestra reseña completa de WPForms.

Lo primero que debes hacer es ir a la página donde tienes incrustado tu formulario de contacto.

Luego, moverás el ratón sobre el primer campo de tu formulario de contacto, harás clic derecho y luego seleccionarás 'Inspeccionar' en el menú del navegador.

Desde aquí, querrás localizar la línea que comienza con la etiqueta <form> para encontrar el atributo ID. En este ejemplo, el ID de nuestro formulario es wpforms-form-170.

Una vez que hayas encontrado la etiqueta, procede a copiar el atributo ID.

Ahora, abre tu archivo confirm-leaving.js para editar el selector de jQuery. Necesitarás agregar el ID de tu formulario justo después de #commentform, separado por una coma. Asegúrate de agregar un prefijo # a tu nuevo ID, al igual que el formulario de comentarios.

Tu código ahora se verá así:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Si todo se ve bien, puedes guardar tus cambios en el archivo confirm-leaving.js y subirlo de nuevo a tu servidor, sobrescribiendo el archivo anterior.

Ahora, puedes ingresar cualquier texto en cualquier campo de tu formulario de contacto y luego intentar salir de la página sin enviar el formulario. Aparecerá una ventana emergente con una advertencia de que tienes cambios sin guardar.

📥 Descarga del plugin: Puedes descargar el plugin confirm-leaving aquí, luego instala y activa el plugin como de costumbre. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Ten en cuenta que se enfoca en el formulario de comentarios, pero puedes editar el plugin para que se dirija a tu formulario de registro de usuarios, encuestas, formulario de comentarios, formulario de solicitud de empleo, o cualquier otro formulario.

Extra: Mejora el rendimiento de tus formularios de WordPress

Después de agregar la ventana emergente de confirmación de navegación, es una buena idea rastrear con qué frecuencia los usuarios abandonan sus formularios. Conocer estos datos puede ayudarte a encontrar y solucionar problemas que hacen que las personas se vayan.

Una de las mejores herramientas para rastrear el abandono de formularios es MonsterInsights. Es el mejor plugin de Google Analytics para WordPress. Su complemento Forms (disponible en la versión Pro) facilita el seguimiento automático de las vistas y envíos de formularios.

De esta manera, puedes ver cómo interactúan los usuarios con tus formularios directamente desde tu panel.

En WPBeginner, usamos MonsterInsights para rastrear todas nuestras conversiones importantes, incluyendo formularios, botones y enlaces de afiliados. Consulta nuestra reseña completa de MonsterInsights para conocer todas sus funciones.

Para más detalles, consulta nuestra guía sobre cómo rastrear y reducir el abandono de formularios.

También puedes ejecutar pruebas A/B para ver qué versión de tu formulario funciona mejor. Por ejemplo, podrías probar diferentes estilos de formulario o textos de botón para ver qué fomenta más completados.

Por ejemplo, podrías cambiar la redacción de tu ventana emergente de confirmación de navegación o personalizar tu formulario. Al analizar los resultados, puedes determinar qué mantiene a los usuarios comprometidos y ayuda a reducir las tasas de abandono.

Thrive Optimize es el mejor plugin para esta tarea. Te permite ejecutar pruebas A/B fácilmente sin necesidad de codificación.

Para obtener más información, consulta nuestra guía sobre cómo hacer pruebas A/B en WordPress.

Preguntas frecuentes sobre popups de confirmación de navegación

¿Agregar este código ralentizará mi sitio web?

No, en absoluto. El código JavaScript es muy ligero y solo se ejecuta cuando un usuario intenta salir de una página con un formulario alterado. No tendrá un impacto notable en el rendimiento de tu sitio.

¿Puedo cambiar el mensaje en la ventana emergente de confirmación?

Desafortunadamente, no. Por razones de seguridad, los navegadores modernos ya no permiten que los sitios web muestren un mensaje personalizado en la ventana emergente de confirmación. Siempre mostrarán una advertencia genérica y estándar al usuario.

¿Esta ventana emergente de confirmación funciona en navegadores móviles?

Sí, el evento onbeforeunload es compatible con la mayoría de los navegadores móviles modernos, incluidos Chrome y Safari tanto en Android como en iOS. El comportamiento será el mismo que en un escritorio.

Guías adicionales para usar formularios de WordPress

Esperamos que este artículo te haya ayudado a mostrar la ventana emergente de confirmación de navegación para tus formularios de WordPress.

También te pueden interesar estas otras guías y selecciones de expertos:

• Cómo crear un formulario de contacto con múltiples destinatarios
• Cómo enviar correos electrónicos de confirmación después de enviar formularios de WordPress
• Formas de usar la lógica condicional en tus formularios de WordPress
• Los mejores creadores de formularios en línea (selecciones de expertos)
• La guía definitiva para usar formularios de WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.