Cerrar accidentalmente una página sin enviar su comentario o con un formulario a medio completar 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 no enviado a la mitad. 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 de confirmación de navegación?
Digamos que un usuario está publicando un comentario en su blog. Ya han escrito algunas líneas, pero se distraen y se olvidan de publicar comentarios. Ahora, si cierran el navegador, el comentario se perderá.
La ventana emergente de confirmación de navegación les da la opción de finalizar el 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 su navegador, aparecerá una ventana emergente de advertencia.
Veamos cómo podemos agregar esta función de alerta 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 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 comprender mejor el código, le pediremos que intente crear su propio plugin. Puede hacer esto primero en una instalación local o en un sitio de prueba.
Vamos a empezar.
Primero necesita 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 simple 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://trucoswp.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: TrucosWP
* Author URI: https://trucoswp.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 de salida.
Ahora necesitamos crear el archivo JavaScript que se está cargando este plugin.
Cree un nuevo archivo y pegue este código en é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 comentarios. Si un usuario intenta salir de la página o cerrar la ventana, se 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 carpetas:
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 en /wp-contents/plugins/ carpeta en su sitio web.
A continuación, debe iniciar sesión en el área de administración de WordPress y visitar la página de plugins. Busque el plugin «Confirmar salida» en la lista de plugins instalados y haga clic en el enlace «activar» que se encuentra debajo.
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.
Agregue el aviso a otros formularios en WordPress
Puede utilizar la misma base de código para apuntar a cualquier formulario en su sitio de WordPress. Aquí te mostraremos un ejemplo de su uso para abordar un formulario de contacto.
En este ejemplo, estamos usando el WPForms plugin para crear un formulario de contacto. Las instrucciones serán las mismas si usa un plugin de formulario de contacto diferente en su sitio web.
Vaya a la página donde agregó su formulario de contacto. Pase el mouse sobre el primer campo del formulario de contacto, haga clic con el botón derecho y seleccione Inspeccionar en el menú del navegador.
Encuentra la línea que comienza con <form> etiqueta. En la etiqueta del formulario, encontrará el atributo ID.
En este ejemplo, nuestro ID de módulo es wpforms-form-170. Necesita copiar el atributo ID.
Ahora edita el archivo confirm-leaving.js archivo y agregue el atributo ID después #commentform.
Asegúrate de separar #commentform y el ID del módulo con una coma. También necesitará agregar # firmar como prefijo del atributo ID del módulo.
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 que indica que hay cambios sin guardar.
Puede descargar el plugin de confirmación de salida aquí. Solo se dirige al formulario de comentarios, pero siéntase libre de modificar el plugin 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. También puede intentar tener en sus manos estos 8 mejores tutoriales de jQuery para principiantes de WordPress.
¿Te ha resultado útil??
0 / 0