Cómo Mostrar Confirmar ventana emergente de navegación para formularios en WordPress

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

¿Qué es Confirmar navegación emergente??

Supongamos que un usuario está escribiendo un comentario en tu blog. Ya han escrito varias líneas, pero se distraen y se olvidan de enviar comentarios. Ahora si cierran su navegador, entonces 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 abandonar la página o cerrar el navegador, aparecerá un mensaje emergente de advertencia..

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

Mostrar confirmación emergente 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 una mejor comprensión del 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 necesitas crear una nueva carpeta en tu computadora y nombrarla confirmar-dejando. Dentro de la carpeta de confirmación de salida, debe crear otra carpeta y nombrarla js.

Ahora abra un editor de texto plano 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 inicio de su sitio web. 
 
Adelante, guarda este archivo como confirm-leaving.php dentro de la carpeta principal de confirmación de salida. 
 
Ahora necesitamos crear el archivo JavaScript que este complemento está cargando.. 
 
Crea un nuevo archivo y pega este código dentro de él: 
 
 jQuery (document) .ready (function ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm;); function askConfirm () if (needToConfirm) // Pon tu el mensaje personalizado aquí devuelve "Se perderán sus datos no guardados"; $ ("# commentform"). change (function () needToConfirm = true;);) 
 
Este código JavaScript detecta si el usuario tiene cambios no guardados en forma de comentario. Si un usuario intenta alejarse de la página o cerrar la ventana, se mostrará una ventana emergente de advertencia.. 
 
Necesitas guardar este archivo como confirm-leaving.js dentro de la carpeta js. 
 
Después de guardar ambos archivos, este es el aspecto que debería tener la estructura de su carpeta: 
 
 
Ahora necesitas conectarte a tu sitio de WordPress usando un cliente FTP. Vea nuestra guía sobre cómo usar FTP para cargar archivos de WordPress. 
 
Una vez conectado, necesitas subir confirmar-dejando carpeta para / wp-contents / plugins / carpeta en su sitio web. 
 
 
Después de eso, debe iniciar sesión en el área de administración de WordPress y visitar la página de Complementos. Localice el complemento 'Confirmar el abandono' en la lista de complementos instalados y haga clic en el enlace 'activar' debajo de este. 
 
 
Eso es todo. Ahora puede visitar cualquier publicación en su sitio web, escribir un texto en cualquier campo del formulario de comentarios y luego intentar salir de la página sin enviarla. Aparecería una ventana emergente, advirtiéndole que está a punto de abandonar una página con cambios no guardados. 
 
 
Agregando la advertencia a otras formas en WordPress
 
Puede usar la misma base de código para dirigirse a cualquier formulario en su sitio de WordPress. Aquí le mostraremos un ejemplo de cómo usarlo para seleccionar 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 de su formulario de contacto, haga clic con el botón derecho y luego seleccione Inspeccionar en el menú del navegador. 
 
 
Localiza la línea que comienza con el  etiqueta. En la etiqueta de formulario, encontrará el atributo ID. 
 
En este ejemplo, la ID de nuestro formulario es wpforms-form-170. Necesitas copiar el atributo ID. 
 
Ahora edita el confirm-leaving.js archivo y agregar el atributo ID después de #commentar.
 
Asegúrate de separar #commentar y la identificación de su formulario con una coma. También necesitarás agregar # firme como prefijo al atributo ID de su formulario. 
 
Tu código ahora se verá así:
 
 jQuery (document) .ready (function ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm;); function askConfirm () if (needToConfirm) // Pon tu aquí el mensaje personalizado devuelve "Se perderán los datos que no haya guardado"; $ ("# commentform, # wpforms-form-170"). change (function () needToConfirm = true;);) 
 
Guarda tus cambios y sube el archivo a tu sitio web. 
 
Ahora puede ingresar cualquier texto en cualquier campo de su formulario de contacto y luego intentar dejar la página sin enviar el formulario. Aparecerá una ventana emergente con una advertencia de que tienes cambios sin guardar. 
 
Puede descargar el plugin de confirmación de salida aquí. Solo se dirige al formulario de comentarios, pero puede editar el complemento para dirigirse a otros formularios.. 
 
Eso es todo, esperamos que este artículo le ayude a mostrar la ventana emergente de confirmación para los formularios de WordPress. También puedes probar estos 8 mejores tutoriales de jQuery para principiantes de WordPress. 
 
Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..