Como mostrar o pop-up de confirmação de navegação para formulários no WordPress

Fechar acidentalmente uma página sem enviar seu comentário ou com um formulário preenchido pela metade é irritante. Recentemente, um de nossos usuários nos perguntou se era possível mostrar aos seus leitores um pop-up de confirmação de navegação.

Esse pequeno pop-up alerta os usuários e evita que eles deixem acidentalmente formulários preenchidos pela metade e não enviados. É uma boa maneira de melhorar a experiência do usuário e evitar que os visitantes tenham que começar algo do zero.

Neste artigo, mostraremos como exibir o pop-up de confirmação de navegação para formulários do WordPress.

O que é um pop-up de confirmação de navegação?

Vamos supor que um usuário esteja escrevendo um comentário no seu blog. Ele já escreveu algumas linhas, mas se distrai e se esquece de enviar os comentários. Agora, se ele fechar o navegador, o comentário será perdido.

O pop-up de confirmação de navegação dá a eles a chance de concluir o comentário.

Você pode ver esse recurso em ação na tela do editor de posts do WordPress. Se você tiver alterações não salvas e tentar sair da página ou fechar o navegador, verá um pop-up de aviso.

Vamos ver como podemos adicionar esse recurso de aviso aos comentários do WordPress e a outros formulários em seu site:

Mostrar pop-up Confirmar navegação para formulários não enviados no WordPress

Para este tutorial, criaremos um plug-in personalizado, mas não se preocupe, você também pode fazer download do plug-in no final deste tutorial para instalá-lo em seu site.

No entanto, para entender melhor o código, pedimos que você tente criar seu próprio plug-in. Você pode fazer isso em uma instalação local ou em um site de teste primeiro.

Vamos começar.

Primeiro, você precisa criar uma nova pasta em seu computador e chamá-la de confirm-leaving. Dentro da pasta confirm-leaving, você precisa criar outra pasta e nomeá-la js.

Agora, abra um editor de texto simples, como o Bloco de Notas, e crie um novo arquivo. Dentro dele, basta colar o código a seguir:

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

Essa função PHP simplesmente adiciona um arquivo JavaScript ao front-end de seu site.

Vá em frente e salve esse arquivo confirm-leaving.php dentro da pasta principal confirm-leaving.

Agora, precisamos criar o arquivo JavaScript que esse plug-in está carregando.

Crie um novo arquivo e cole esse código nele:

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

Esse código JavaScript detecta se o usuário tem alterações não salvas no formulário de comentários. Se um usuário tentar navegar para fora da página ou fechar a janela, será exibido um pop-up de aviso.

Você precisa salvar esse arquivo como confirm-leaving.js dentro da pasta js.

Depois de salvar os dois arquivos, a estrutura de pastas deve ficar assim:

Agora, você precisa se conectar ao seu site WordPress usando um cliente FTP. Consulte nosso guia sobre como usar o FTP para fazer upload de arquivos do WordPress.

Depois de conectado, você precisa carregar a pasta confirm-leaving em /wp-contents/plugins/ no seu site.

Depois disso, você precisa fazer login na área de administração do WordPress e visitar a página do plug-in.

Localize o plug-in “Confirm Leaving” (Confirmar saída) na lista de plug-ins instalados e clique no link “activate” (ativar) abaixo dele.

Isso é tudo. Agora você pode visitar qualquer publicação em seu site, escrever algum texto em qualquer campo do formulário de comentários e, em seguida, tentar sair da página sem enviar.

Será exibida uma janela pop-up avisando que você está prestes a sair de uma página com alterações não salvas.

Adicionando o aviso a outros formulários no WordPress

Você pode usar a mesma base de código para direcionar qualquer formulário em seu site WordPress. Aqui, mostraremos um exemplo de uso para direcionar um formulário de contato.

Neste exemplo, estamos usando o plugin WPForms para criar um formulário de contato. As instruções serão as mesmas se você estiver usando um plugin de formulário de contato diferente no seu site.

Vá para a página em que adicionou o formulário de contato. Passe o mouse sobre o primeiro campo do formulário de contato, clique com o botão direito do mouse e selecione “Inspecionar” no menu do navegador.

Localize a linha que começa com a tag <form>. Na tag de formulário, você encontrará o atributo ID.

Neste exemplo, o ID do nosso formulário é wpforms-form-170. Você precisa copiar o atributo ID.

Agora, edite o arquivo confirm-leaving.js e adicione o atributo ID após #commentform.

Certifique-se de separar #commentform do ID do formulário com uma vírgula. Você também precisará adicionar um sinal # como prefixo ao atributo ID do formulário.

Seu código agora terá a seguinte aparência:

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

Salve as alterações e carregue o arquivo de volta em seu site.

Agora, você pode inserir qualquer texto em qualquer campo do formulário de contato e tentar sair da página sem enviar o formulário. Será exibido um pop-up com um aviso de que você tem alterações não salvas.

Você pode baixar o plug-in confirm-leaving aqui. Ele tem como alvo apenas o formulário de comentários, mas sinta-se à vontade para editar o plug-in para ter como alvo outros formulários.

Esperamos que este artigo tenha ajudado você a mostrar o pop-up de navegação de confirmação para formulários do WordPress. Talvez você também queira conferir nossos plugins e ferramentas obrigatórios do WordPress para sites de negócios ou ler nosso guia definitivo sobre como aumentar o tráfego do seu blog.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.