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 medio lleno es molesto. Recientemente, uno de nuestros usuarios nos preguntó si era posible mostrar a sus lectores una ventana emergente de navegación confirmada. Esta pequeña ventana emergente alerta a los usuarios y evita que accidentalmente dejen un formulario medio lleno y sin enviar. En este artículo, le mostraremos cómo confirmar la ventana emergente de navegación para los formularios de WordPress.

Confirm navigation popup when user leaves a form unsubmitted

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

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

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

Puedes ver esta característica en acción en la pantalla del editor de posts de WordPress. Si tiene cambios no guardados 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 añadir esta función de advertencia a los comentarios de WordPress y otros formularios en su sitio.

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

Para este tutorial, vamos a crear un plugin personalizado, pero no se preocupe, también puede descargar el plugin 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 plugin. Puede hacerlo en un local install o en un sitio de preparación primero.

Vamos a empezar.

En primer lugar, debe crear una nueva carpeta en el equipo y asignarle un nombre que confirme la salida. Dentro de la carpeta de confirmación, debe crear otra carpeta y darle el nombre js.

Ahora abra un editor de texto plano como el Bloc de notas y cree un nuevo archivo. Dentro, simplemente pegue el siguiente código:

1234567891010111213141415161718 Esta función php simplemente añade un archivo JavaScript al front-end de su sitio web.

Continúe y guarde este archivo como confirm-leaving.php dentro de la carpeta principal confirm-leaving.

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

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

123456789101112131414151617171819jQuery(document).ready(function($) { $(document).ready(function() {needToConfirm = false; window.onbeforeunload = askConfirm;});function askConfirm() {if (needToConfirm) {/// Ponga su mensaje personalizado aquí y devuelva “Sus datos no guardados se perderán.”; }}}$(“#commentform”).change(function() {needToConfirm = true;})

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

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

Después de guardar ambos archivos, la estructura de carpetas debe ser la siguiente

Estructura del archivo del plugin

Ahora necesita conectarse a su sitio WordPress usando un cliente FTP client . Vea nuestra guía en Cómo usar FTP para subir archivos de WordPress .

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

Subir archivos plugin a su sitio WordPress

Después debe iniciar sesión en WordPress área Admin y visitar la página de Plugins. Localiza el plugin’Confirm Confirm Leaving’ en la lista de plugins instalados y haz clic en el enlace’activate’ debajo de él.

Activar plugin

Eso es todo. Ahora puedes visitar cualquier entrada de tu sitio web, escribir algo de texto en cualquier campo del formulario de comentarios y luego intentar dejar la página sin enviarla. Aparecerá una ventana emergente, advirtiéndole que está a punto de salir de una página con cambios no guardados.

popup notification warning user about unsaved changes

Adición de la advertencia a otros formularios en WordPress

Puedes usar el mismo código base para dirigirte a cualquier formulario de tu sitio de WordPress. Aquí le mostraremos un ejemplo de cómo utilizarlo para crear un formulario de contacto.

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

Vaya a la página donde ha añadido su formulario de contacto. Pase el ratón por encima del primer campo del formulario de contacto, haga clic con el botón derecho del ratón y, a continuación, seleccione Inspeccionar en el menú del navegador.

Finding form ID

Localice la línea que comienza con la etiqueta . En la etiqueta del formulario, encontrará el atributo ID.

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

Ahora edite el archivo confirm-leaving.js y añada el atributo ID después de #commentform.

Asegúrese de separar #commentform y el ID de su formulario con una coma. También tendrá que añadir el signo # como prefijo al atributo ID de su formulario.

Su código tendrá el siguiente aspecto:

123456789101112131414151617171819jQuery(document).ready(function($) { $(document).ready(function() {needToConfirm = false; window.onbeforeunload = askConfirm;});function askConfirm() {if (needToConfirm) {/// Ponga su mensaje personalizado aquí y devuelva “Sus datos no guardados se perderán.”; }}}$(“#commentform,#wpforms-form-170”).change(function() {necesidad de confirmar = true;});})

Guarde los cambios y vuelva a subir el archivo a su sitio web.

Ahora puede introducir 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 no guardados.

Puede descargar el plugin confirm-leaving aquí . Sólo apunta al formulario de comentarios, pero siéntase libre de editar el plugin para dirigirlo a otros formularios.

Eso es todo,

Rate this post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *