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 puede ser súper frustrante. 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.

Sin embargo, si esta característica no se establece correctamente, puede resultar molesta e interrumpir tu sitio, frustrando a los usuarios. Necesitarás una forma fiable de añadirla sin problemas y evitar estos inconvenientes.

Por eso queremos mostrarte cómo hacerlo utilizando un plugin creado a medida. No te preocupes, ¡es más fácil de lo que crees!

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? ¿Por qué es necesario?

Supongamos que un usuario está escribiendo un comentario en su blog de WordPress. Ya han escrito bastantes líneas, pero se distraen y se olvidan de enviar los comentarios. Si cierran el navegador, el comentario se perderá.

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

Esta característica se muestra 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, aparecerá una ventana emergente de advertencia.

Establecer una ventana emergente de confirmación de navegación puede mejorar la experiencia de usuario, las tasas de conversión y la confianza de los usuarios.

He aquí cómo: Dar a los usuarios una característica de advertencia muestra que te preocupas por la experiencia de tus usuarios, lo que puede ayudar a fomentar la lealtad y las visitas de retorno. Los usuarios son más propensos a completar formularios o comentarios si saben que no van a perder su progreso.

Teniendo esto en cuenta, le mostraremos cómo añadir esta característica de advertencia a los comentarios de WordPress y a otros formularios de su sitio. Aquí tienes un resumen rápido de todo lo que hablaremos en esta guía:

¿Preparados? Primeros pasos.

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 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 primero en una instalación local o en un sitio de ensayo.

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

Ahora, vamos a abrir un editor de texto plano como el Bloc de notas y crear un nuevo archivo. Dentro, simplemente pega 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. Usted puede hacer esto mediante la creación de un nuevo archivo en el editor de texto y pegar este código en su interior:

[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.

A continuación, deberá 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. Para obtener instrucciones paso a paso, puede consultar nuestra guía sobre cómo utilizar FTP para subir archivos de WordPress.

Una vez conectado, tendrás que subir la carpeta confirm-leaving a la carpeta/wp-contents/plugins/ de tu sitio web.

A continuación, acceda al área de administración de WordPress y diríjase a “Plugins”.

Desde aquí, deberías ver el plugin ‘Confirm Leaving’ en la lista de plugins instalados. A continuación, puede hacer clic en el enlace ‘activar’ debajo de él.

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 ventana emergente de advertencia a otros formularios en su sitio de 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 utiliza un plugin de formulario de contacto diferente en su sitio web.

Lo primero que tienes que hacer es ir a la página donde has añadido tu formulario de contacto. A continuación, lleva el ratón hasta el primer campo de tu formulario de contacto, haz clic con el botón derecho y selecciona “Inspeccionar” en el menú del navegador.

Desde aquí, querrás localizar la línea que comienza con la etiqueta <form> para encontrar el atributo ID. En este ejemplo, el ID de nuestro formulario es wpforms-form-170.

Una vez que hayas encontrado la etiqueta, sigue adelante y copia el atributo ID.

Ahora, vamos a editar el archivo confirm-leaving.js y añadir 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]

Si todo va bien, puede guardar los cambios y volver 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á un mensaje / ventana emergente con una advertencia de que tiene cambios sin guardar.

Puede descargar el plugin de confirmación de salida aquí, luego instalar y activar el plugin como de costumbre. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Tenga en cuenta que está orientado al formulario de comentarios, pero puede editar el plugin para orientarlo a su formulario de registro de usuario, encuestas, formulario de respuesta, formulario de solicitud de empleo o cualquier otro formulario.

Consejo adicional: Mejore el rendimiento de sus formularios de WordPress

Después de añadir la ventana emergente de confirmación de navegación, es una buena idea hacer un seguimiento de la frecuencia con la que los usuarios abandonan sus formularios.

Saber cuántas personas abandonan sin terminar puede ayudarle a ver lo bien que les está funcionando su sitio. De este modo, podrá averiguar qué puede estar provocando que se marchen e introducir mejoras.

Una de las mejores herramientas para el seguimiento del abandono de formularios es MonsterInsights.

Es el mejor plugin de Google Analytics, que facilita ver cómo interactúan los usuarios con tus formularios y dónde tienden a abandonar, todo desde tu escritorio de WordPress.

Para más detalles, consulte nuestra guía sobre cómo realizar el seguimiento y reducir el abandono de formularios.

En todo caso, también puede realizar una prueba de división A/B. Esto significa probar diferentes versiones de tus formularios para ver cuál tiene mejor rendimiento.

Por ejemplo, puede cambiar el texto de su ventana emergente de confirmación de navegación o personalizar su formulario. Analizando los resultados, podrá determinar qué es lo que mantiene la participación de los usuarios y ayuda a reducir las tasas de abandono.

Thrive Optimize es el mejor plugin para esta tarea. Te permite realizar pruebas A/B sin necesidad de código y mantiene tus datos seguros.

Para obtener más información, puede consultar nuestra guía sobre cómo realizar pruebas A/B en WordPress.

Esperamos que este artículo te haya ayudado a mostrar el mensaje / ventana emergente de confirmación de navegación para formularios de WordPress. Es posible que también desee comprobar nuestras selecciones de expertos de los mejores maquetadores de formularios en línea y nuestra guía sobre cómo añadir mejores avisos personalizados.

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.