Cerrar accidentalmente una página sin enviar su formulario a medio llenar es molesto. Recientemente, uno de nuestros usuarios nos preguntó si era posible mostrar una ventana emergente que confirme la acción del usuario en los formularios. Esta pequeña alerta a los usuarios y evita que cierren accidentalmente páginas con formularios a medio llenar.

En este tutorial, le mostraremos cómo mostrar una ventana de confirmación de acción de cierre para sus formularios. blog de WordPress.

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

Suponga que un usuario está escribiendo un comentario en su blog. ya ha escrito muchas líneas, pero se distraen y se olvidan de enviar el comentario. Ahora, al hacer clic en un enlace por ejemplo, se perderá todo el contenido que ha comenzado a escribir.

La confirmación de navegación les da la oportunidad de completar su comentario.

Puede ver esta función desde la interfaz del editor de artículos / páginas. Si tiene cambios sin guardar e intenta salir de la página o cerrar el navegador, verá una advertencia emergente.

Veamos cómo podemos agregar esta función de advertencia en los comentarios de WordPress y otros formularios en su blog.

Cómo mostrar una ventana emergente de confirmación en formularios no enviados en WordPress

Para este tutorial, crear un complemento personalizado. Ya le hemos mostrado cómo crear un Plugin de WordPress rápidamente.

Vamos a empezar.

Primero necesitas crear una nueva carpeta en tu computadora y nombrarla "confirmar-acción". En esta carpeta, debe crear otra carpeta y nombrarla js.

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

<?php
/**
 * Confirmar acción
 * Nombre del complemento: Confirmar acción
 * URI del complemento: https://blogpascher.com
 * Descripción: este complemento muestra una advertencia a los usuarios cuando lo intentan y se olvidan de presionar el botón Enviar en un formulario de comentarios.
 * Versión: 1.0.0
 * Autor: TuNOMBRE
 * URI del autor: https://blogpascher.com
 * Licencia: GPL-2.0+
 * URI de licencia: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
función bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Confirmar salida', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', verdadero );
}
add_action('wp_enqueue_scripts', 'bpc_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 "confirmar-acción.php" en la carpeta confirmar la acción "(Raíz de su complemento).

Ahora necesitamos crear el archivo JavaScript que cargará este complemento. Crea un nuevo archivo y pega este código dentro:

jQuery (document) ready (function ($) {$ (document) ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); askConfirm función () {if (needToConfirm) {// Pon tu Mensaje de encargo aquí Return "se perderán los datos no guardados.";}} $ ( "# CommentForm") intercambio (function () {needToConfirm = true;}).})

Renombrar este archivo -confirmar leaving.js", Muévalo a la" subcarpeta " js »De« confirmar la acción".

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

Todo lo que tienes que hacer ahora es subir tu archivo a tu servidor usando tu cliente favoritos FTP. Después de eso, todo lo que tiene que hacer es activar el complemento desde su panel de control.

Es todo. Ahora puede visitar un artículo en su sitio web, intente escribir un comentario y luego haga clic en un enlace, verá una ventana emergente similar a esta.

Adición de la advertencia en otros formularios de WordPress

Puede usar el mismo código para apuntar a todos los formularios en su sitio de WordPress. Aquí le mostraremos un ejemplo en un formulario de contacto.

En este ejemplo, utilizamos el complemento WPForms para crear un formulario de contacto. Las instrucciones serán las mismas si utiliza otro formulario de contacto Plugin en su sitio.

Vaya a la página donde agregó su formulario de contacto. Mueva el mouse sobre el primer campo de su formulario de contacto, haga clic derecho y luego seleccione " inspeccionar“, Para acceder al código fuente.

Busque la línea que comienza con la etiqueta <form>. En la etiqueta del formulario encontrará el atributo ID. En este ejemplo, el ID de nuestro formulario es formulaire . Debe copiar el atributo de ID.

Ahora edita el confirmer-leaving.js archivo y agregue el atributo ID después de " #commentform Separado por una coma.

Su código debería verse así:

jQuery (document) ready (function ($) {$ (document) ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); askConfirm función () {if (needToConfirm) {// Pon tu Mensaje de encargo aquí Return "se perderán los datos no guardados.";}} $ ( "# CommentForm, forma #") intercambio (function () {needToConfirm = true;}).})

Guarde los cambios y instalar el plugin en su blog de WordPress.

Eso es todo por este tutorial. Espero que te ayude a agregar una ventana emergente de confirmación a tu blog. No dude en hacer preguntas si no comprende un punto.