Cómo mostrar ventana emergente de confirmación de navegación para formularios en WordPress

Cerrar accidentalmente una página sin enviar tu comentario o con un formulario a medio rellenar es molesto. Recientemente, uno de nuestros usuarios nos preguntó si era posible mostrar a sus lectores un mensaje / ventana emergente de confirmación de navegación.

Esta pequeña ventana emergente alerta a los usuarios y evita que dejen accidentalmente formularios a medio rellenar y sin enviar. Es una buena forma de mejorar la experiencia del usuario y evitar que los visitantes tengan que empezar algo desde cero.

En este artículo, le mostraremos cómo mostrar confirmar ventana emergente de navegación para los formularios de WordPress.

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

Supongamos que un usuario está escribiendo un comentario en tu blog. Ya han escrito unas cuantas líneas, pero se distraen y se olvidan de enviar los comentarios. Ahora bien, si cierran el navegador / explorador, el comentario se perderá.

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

Puede ver esta característica en acción en la pantalla del editor de entradas de WordPress. Si tiene cambios sin guardar e intenta salir de la página o cerrar el navegador, verá un mensaje / ventana emergente de advertencia.

Veamos cómo podemos añadir esta característica de advertencia a los comentarios de WordPress y a otros formularios de tu sitio:

Mostrar ventana emergente de Confirmación de Navegación para Formularios no Enviados en WordPress

Para este tutorial, vamos a crear un plugin personalizado, pero no te preocupes, también puedes descargar el plugin al final de este tutorial para instalarlo en tu sitio web.

Sin embargo, para una mejor comprensión del código, le pediremos que intente crear su propio plugin. Puede hacerlo primero en una instalación local o en un sitio de ensayo.

Primeros pasos.

Primero, necesitas crear una nueva carpeta en tu ordenador y llamarla confirm-leaving. Dentro de la carpeta confirm-leaving, tienes que crear otra carpeta y llamarla js.

Ahora abre un editor de texto plano como Notepad y crea un nuevo archivo. Dentro, simplemente pegue el siguiente código:

[php]
<?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:      WPBeginner
 * 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');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/php]

Esta función PHP simplemente añade un archivo JavaScript a la parte frontal de su sitio web.

Guarda este archivo confirm-leaving.php dentro de la carpeta principal de confirm-leaving.

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

Crea un nuevo archivo y pega este código en él:

[javascript]
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;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

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

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

Después de guardar ambos archivos, ésta es la estructura de carpetas:

Ahora, necesitas conectarte a tu sitio WordPress usando un cliente FTP. Consulte nuestra guía sobre cómo utilizar FTP para subir archivos de WordPress.

Una vez conectado, es necesario subir confirmar dejando la carpeta a /wp-contents/plugins/ la carpeta en su sitio web.

Después, deberá acceder al área de administrador de WordPress y visitar la página del plugin.

Localice el plugin “Confirmar salida” en la lista de plugins instalados y haga clic en el enlace “activar” que aparece debajo.

Eso es todo. Ahora puede visitar cualquier entrada de su sitio web, escribir un texto en cualquier campo del formulario de comentarios y, a continuación, intentar salir de la página sin enviar el comentario.

Aparecerá un mensaje / ventana emergente, advirtiéndole de que está a punto de abandonar una página con cambios no guardados.

Añadir la advertencia a otros formularios en WordPress

Puede utilizar el mismo código base para cualquier formulario de su sitio WordPress. Aquí, le mostraremos un ejemplo de su uso para orientar un formulario de contacto.

En este ejemplo, estamos utilizando 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 en su sitio web.

Vaya a la página donde ha añadido su formulario de contacto. Sitúe el ratón sobre el primer campo del formulario de contacto, haga clic con el botón derecho y seleccione “Inspeccionar” en el menú del navegador.

Localice la línea que comienza con la etiqueta <form>. En la etiqueta de formulario, encontrará el atributo ID.

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

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

Asegúrate de separar #commentform del ID de tu formulario con una coma. También tendrás que añadir un signo # como prefijo al atributo ID de tu formulario.

Tu código tendrá ahora este aspecto:

[javascript]
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;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Guarda los cambios y vuelve a subir el archivo a tu 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á un mensaje / ventana emergente con una advertencia de que tiene cambios sin guardar.

Puede descargar el plugin de confirmación de abandono aquí. Solo se dirige al formulario de comentarios, pero no dudes en editar el plugin para dirigirlo a otros formularios.

Eso es todo; esperamos que este artículo te haya ayudado a mostrar el mensaje / ventana emergente de navegación de confirmación para formularios de WordPress. También puede marcar / comprobar nuestra debe tener plugins de WordPress y herramientas para sitios de negocios o leer nuestra guía definitiva sobre cómo aumentar el tráfico de su blog.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.