Cómo mostrar la ventana emergente de confirmación de navegación para formularios en WordPress

Cerrar accidentalmente una página sin enviar su comentario o con un formulario a medio llenar es molesto. Recientemente, uno de nuestros usuarios nos preguntó si era posible mostrar a sus lectores una ventana emergente de confirmación de navegación. Esta pequeña ventana emergente alerta a los usuarios y les impide dejar accidentalmente un formulario a medio llenar y sin enviar. En este artículo, le mostraremos cómo mostrar la ventana emergente de confirmación de navegación para formularios de WordPress.

Confirmar la ventana emergente de navegación cuando el usuario deja un formulario sin enviar

¿Qué es la ventana emergente Confirmar navegación?

Supongamos que un usuario está escribiendo un comentario en su blog. Ya han escrito bastantes líneas, pero se distraen y olvidan enviar comentarios. Ahora, si cerraron su navegador, el comentario se perderá.

La ventana emergente de confirmación de navegación les da la oportunidad de terminar su comentario.

Puede ver esta función en acción en la pantalla del editor de publicaciones de WordPress. Si tiene cambios sin guardar e intenta salir de la página o cerrar el navegador, verá una ventana emergente de advertencia.

Ventana emergente de advertencia de cambios no guardados en el editor de publicaciones de WordPress

Veamos cómo podemos agregar esta función de advertencia a los comentarios de WordPress y otros formularios en su sitio.

Mostrar ventana emergente Confirmar navegación para formularios no enviados en WordPress

Para este tutorial, crearemos un complemento personalizado, pero no se preocupe, también puede descargar el complemento al final de este tutorial para instalarlo en su sitio web.

Sin embargo, para comprender mejor el código, le pediremos que intente crear su propio complemento. Puede hacer esto en una instalación local o en un sitio de prueba primero.

Empecemos.

Primero debe crear una nueva carpeta en su computadora y nombrarla confirmar-salir. Dentro de la carpeta de confirmación de salida, debe crear otra carpeta y nombrarla js.

Ahora abra un editor de texto sin formato como el Bloc de notas y cree un nuevo archivo. En el interior, simplemente pegue el siguiente código:


Esta función php simplemente agrega un archivo JavaScript al front-end de su sitio web.

Continúe y guarde este archivo como confirm-dejando.php dentro de la carpeta principal de confirmación-salida.

Ahora necesitamos crear el archivo JavaScript que se está cargando este complemento.

Cree un nuevo archivo y pegue este código dentro de él:

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;
});

 })

Este código JavaScript detecta si el usuario tiene cambios sin guardar en el formulario de comentario. Si un usuario intenta navegar fuera de la página o cerrar la ventana, mostrará una ventana emergente de advertencia.

Debe guardar este archivo como confirm-dejando.js dentro de la carpeta js.

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

Estructura del archivo del complemento

Ahora necesita conectarse a su sitio de WordPress utilizando un cliente FTP. Consulte nuestra guía sobre cómo usar FTP para cargar archivos de WordPress.

Una vez conectado, debe cargar la carpeta de confirmación de salida en la carpeta / wp-contents / plugins / en su sitio web.

Subir archivos de complementos a su sitio de WordPress

Después de eso, debe iniciar sesión en el área de administración de WordPress y visitar la página de complementos. Busque el complemento 'Confirmar abandono' en la lista de complementos instalados y haga clic en el enlace 'activar' debajo de él.

Activar complemento

Eso es todo. Ahora puede visitar cualquier publicación en su sitio web, escribir texto en cualquier campo del formulario de comentarios y luego intentar salir de la página sin enviar. Aparecerá una ventana emergente, advirtiéndole que está a punto de salir de una página con cambios no guardados.

notificación emergente que advierte al usuario sobre cambios no guardados

Agregar la advertencia a otros formularios en WordPress

Puede usar la misma base de código para apuntar a cualquier formulario en su sitio de WordPress. Aquí le mostraremos un ejemplo de cómo usarlo para orientar un formulario de contacto.

En este ejemplo, estamos usando el complemento WPForms para crear un formulario de contacto. Las instrucciones serán las mismas si está utilizando un complemento de formulario de contacto diferente en su sitio web.

Vaya a la página donde ha agregado su formulario de contacto. Lleve el mouse al primer campo en su formulario de contacto, haga clic con el botón derecho y luego seleccione Inspeccionar en el menú del navegador.

Encontrar ID de formulario

Busque la línea que comienza con el

etiqueta. En la etiqueta del formulario, encontrará el atributo ID.

En este ejemplo, el ID de nuestro formulario es wpforms-form-170. Necesita copiar el atributo ID.

Ahora edite el archivo confirm-dejando.js y agregue el atributo ID después de #commentform.

Asegúrese de separar #commentform y el ID de su formulario con una coma. También deberá agregar el signo # como prefijo al atributo de ID de su formulario.

Su 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;
});

 })

Guarde sus cambios y cargue el archivo nuevamente en su sitio web.

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

Puede descargar el complemento de confirmación de salida aquí. Solo apunta al formulario de comentarios, pero siéntase libre de editar el complemento para apuntar a otros formularios.

Eso es todo, esperamos que este artículo le haya ayudado a mostrar la ventana emergente de confirmación de navegación para los formularios de WordPress. Es posible que también desee probar estos 8 mejores tutoriales de jQuery para principiantes de WordPress.

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

Publicaciones relacionadas

Botón volver arriba