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 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.
¿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.
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 confirm-leaving
. 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:
<?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: Themelocal * 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');
Esta función php simplemente agrega 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 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.
Necesita guardar este archivo como confirm-leaving.js
dentro de la carpeta js.
Después de guardar ambos archivos, así es como debería verse la estructura de su carpeta:
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 confirm-leaving
carpeta a /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. Busque el complemento ‘Confirmar abandono’ en la lista de complementos instalados y haga clic en el enlace ‘activar’ debajo de él.
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.
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 WPForms complemento 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.
Busque la línea que comienza con el <form>
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 confirm-leaving.js
archivo y agregue el atributo ID después #commentform
.
Asegúrate de separar #commentform
y el ID de su formulario con una coma. También necesitará agregar #
Firme 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 se dirige 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.