Cómo crear una ventana emergente para la confirmación de un formulario incompleto en WordPress










  • ¿Las personas abandonan su sitio sin completar formularios? A veces esto sucede porque un visitante retrocede accidentalmente de una página o cierra la ventana del navegador sin darse cuenta. En cualquier caso, es útil crear una ventana emergente para la confirmación de formularios incompletos en WordPress.

    Esto le da al visitante la oportunidad de permanecer en la página y terminar sin perder su información.

    Piénselo, ¿con qué frecuencia la confirmación de «quedarse» o «salir» lo salva cuando deja accidentalmente una publicación que ha estado creando durante horas? Sé que no puedo contar la cantidad de veces que WordPress me ha ahorrado tiempo y esfuerzo porque accidentalmente hice clic en algo.

    En este tutorial, le mostraré cómo crear un complemento emergente de confirmación de navegación en WordPress. No te preocupes, es relativamente fácil y sencillo. De hecho, no necesita saber mucho sobre codificación para que esto funcione.

    Creación de su ventana emergente para el complemento de confirmación de navegación

    Podría decirse que los complementos son el pan y la mantequilla de WordPress. Expanden lo que puede hacer en el sitio y, a menudo, aumentan la participación de sus visitantes.

    Hoy, creará un pequeño complemento propio para mostrar una confirmación de formulario vacía.

    Creando confirm_leave.php

    El archivo confirm_leave.php es lo que impulsará este complemento. Primero, cree una nueva carpeta en su computadora llamada «confirm-leaving-form».

    Confirmar formulario de salida

    Ahora creará un nuevo archivo dentro de esta carpeta. Abra una aplicación de edición de texto sin formato desde su computadora. Por ejemplo, los usuarios de Windows tienen el Bloc de notas.

    Pegue el siguiente código en su editor de texto (reemplace “ggexample.com” con su dominio):[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<? php

    /**


    * Confirmar abandono


    * Nombre del complemento: Confirmar formulario de


    abandono * URI del complemento: https://www.ggexample.com


    * Descripción: este complemento muestra una advertencia a los usuarios cuando intentan olvidar presionar el botón Enviar en un formulario de comentarios.


    * Versión: 1.0.0


    * Autor: Su nombre o empresa


    * URI de autor: https://www.ggexample.com


    * Licencia: GPL-2.0+


    * URI de licencia: https://www.gnu.org/licenses/gpl -2.0.txt


    */

    función wpb_confirm_leaving_js() {

    wp_enqueue_script( ‘Confirmar formulario de salida’, plugins_url( ‘js/confirm-leaving.js’, __FILE__ ), array(‘jquery’), ‘1.0.0’, true );

    }


    add_action(‘wp_enqueue_scripts’, ‘wpb_confirm_leaving_js’);
    [/ht_mensaje]

    Pegar código

    Guarde este archivo como “ confirm-leaving.php ” en su carpeta.

    Guardar PHP

    Al guardar un archivo PHP en aplicaciones como el Bloc de notas, no olvide cambiar «Guardar como tipo de archivo» a «Todos los archivos». De lo contrario, creará un documento de texto y no un archivo PHP. Esto hará que el complemento falle al intentar agregarlo a WordPress.

    Cambiar tipo de archivo

    Crear el JavaScript para el complemento de confirmación

    Ahora necesitamos algo de JavaScript para controlar la confirmación de formularios incompletos en WordPress. Sin él, el archivo PHP anterior es inútil.

    Cree una nueva carpeta dentro de la anterior y llámela » js «.

    Carpeta Java Script

    Crea un nuevo documento de texto y pega este código en él:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]jQuery(document).ready(function($ ) {

    $(documento).ready(function() {

    needToConfirm = false;


    window.onbeforeunload = askConfirm;


    });

    function askConfirm() {

    if (needToConfirm) {


    // Pon tu mensaje personalizado aquí


    return «¿Te vas tan pronto?
    Sus datos se perderán si continúa.”;


    }


    }

    $(“#formulariodecomentarios”).change(function() {

    needToConfirm = true;


    });

    })[/ht_mensaje]
    PegarJava Script

    Este código en particular se enfoca en la sección de comentarios de su sitio. Este segmento se encuentra en el código como «#formulario de comentarios». Para agregar otros formularios a este código, necesitará el ID de formulario de cada uno y colocarlos en la codificación de JavaScript. Cubriré un poco de eso en un segundo.

    Guarde este archivo en la carpeta «js» que creó como » confirm-leaving.js «.

    Guardar JavaScript

    Agregar formulario de confirmación de salida a WordPress

    Ahora tenemos nuestro pequeño complemento listo para ayudar a WordPress a confirmar la navegación desde los formularios. Todo lo que queda es agregarlo al sitio y activarlo.

    Para subirlo a su sitio, necesitará usar una aplicación FTP como FileZilla . Esto conecta su computadora directamente a su sitio web y le da acceso a todos sus recursos.

    Cargue la carpeta del formulario de confirmación de salida en el directorio » /wp-content/plugins/ » de su sitio web.

    Subir a complementos

    Vaya a la sección de complementos de WordPress en su sitio web.

    Complementos

    Encuentre su nuevo complemento y haga clic en el enlace «Activar».

    Activar enlace

    Ahora los usuarios recibirán un mensaje cuando no envíen datos desde el formulario de comentarios.

    Adición de otros ID de formulario a JavaScript

    La sección de comentarios probablemente no sea el único formulario que usará en su sitio web. ¿Qué hay de agregar otros? ¿Qué sucede si tiene formularios de contacto que desea que las personas envíen antes de irse?

    Para ello, necesitará el ID de formulario de cada uno de los que desee agregar. Para este tutorial, solo estoy usando una página muy básica usando el formulario de contacto de WPForms .

    Vaya a la página de su formulario e «inspeccione» el elemento. Puede hacer esto de varias maneras. Como estoy usando una PC, simplemente hice clic con el botón derecho en el área del formulario y luego hice clic en inspeccionar. Los usuarios de MAC utilizarán Command+Click.

    Inspeccionar elemento

    Busque el ID del formulario dentro del código. Comenzará con “<formulario”. Desafortunadamente, cada complemento de creación de formularios es diferente. Esto significa que tendrá que investigar un poco para encontrar el ID correcto del formulario que desea incluir.

    Como puede ver en la imagen, mi identificación es «wpforms-form-1835». Obtengo esto de la parte ID= del código. Busque en un área como esta para encontrar la ID de su formulario.

    Ubicación de ID de formulario

    Ingrese su ID de formulario en la codificación de JavaScript. Para ello, utilice un «#» y luego el ID. Por ejemplo, el segmento de JavaScript que usaría se ve así:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]$(“#commentform,#wpforms -form-1835″).change(function() {[/ht_message]

    Esto le dice a WordPress que inicie la ventana emergente tanto para la sección de comentarios como para el formulario de contacto. Asegúrese de separar cada formulario con una coma.

    Formularios separados

    Hazlo más fácil para los invitados

    Las confirmaciones de formularios incompletos en WordPress ayudan a las personas a recordar enviar datos o evitar perderlos al hacer clic accidentalmente en algo incorrecto. Es solo una de esas mejoras menores que los visitantes aprecian y que a menudo dan por sentadas. Brinde a sus invitados la mejor experiencia posible y ayude a mantener su atención en los formularios que comienzan a completar.

    ¿Con qué frecuencia utiliza código real para realizar modificaciones en su sitio web de WordPress? ¿Cuántos formularios tiene disponibles para que los visitantes completen?