Confirm Navigation Popup When User Leaves A Form Unsubmitted

Cómo mostrar la ventana emergente de confirmación de navegación para formularios de 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 evita que dejen accidentalmente un formulario que está medio llenado y no enviado. En este artículo, le mostraremos cómo mostrar la ventana de confirmación de navegación para formularios de WordPress.

¿Qué es la ventana emergente de confirmación de navegación?

Suponga que un usuario comenta en su blog. Ya han escrito bastantes líneas, pero se distraen y olvidan enviar sus comentarios. Ahora, si cerraron su navegador, el comentario se perderá. La ventana emergente de confirmación de navegación les da la oportunidad de completar 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 de advertencia.

Ventana De Advertencia Para 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 de confirmación de 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 primero en una instalación local o en un sitio de prueba. Empecemos. Primero debe crear una nueva carpeta en su computadora y nombrarla confirm-exit. En 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:
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 que haya iniciado sesión, debe descargar la carpeta de confirmación de inicio en la carpeta / wp-contents / plugins / en su sitio web.
Sube Archivos De Complementos A Tu 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’ a continuación.
Activar El Complemento
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 que le advierte que está a punto de salir de una página con cambios no guardados.
Notificación Emergente Que Notifica Al Usuario Los Cambios No Guardados

Agregar la advertencia a otros formularios en WordPress

Puede usar la misma base de código para apuntar a todos los formularios en su sitio de WordPress. Aquí le mostraremos un ejemplo de su uso 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 otro complemento de formulario de contacto en su sitio web. Vaya a la página donde agregó su formulario de contacto. Desplácese sobre el primer campo de su formulario de contacto, haga clic con el botón derecho y seleccione Inspeccionar en el menú del navegador.
Encontrar El Id Del 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. Debe copiar el atributo ID. Ahora edite el archivo confirm-left.js y agregue el atributo ID después de #commentform. Asegúrese de separar el #commentform y su ID de formulario con una coma. También deberá agregar el signo # como prefijo al atributo ID de su formulario. Su código ahora se verá así: jQuery (documento) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); function askConfirm () {if (needToConfirm) {// Coloque su mensaje personalizado aquí return «Sus datos no guardados se perderán.»;}} $ («# commentform, # wpforms-form-170»). change (function () {needToConfirm = true;} );}) Guarde sus cambios y cargue el archivo 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 modificar el complemento para apuntar a otros formularios. Eso es todo, esperamos que este artículo le haya ayudado a mostrar la ventana de confirmación de navegación para los formularios de WordPress. Es posible que también desee probar suerte con estos 8 mejores tutoriales de jQuery para principiantes de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply