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 pode ser muito frustrante. 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.

No entanto, se esse recurso não for configurado corretamente, ele pode ser irritante e atrapalhar o site, frustrando os usuários. Você precisará de uma maneira confiável de adicioná-lo sem problemas e evitar esses problemas.

É por isso que queremos mostrar a você como fazer isso usando um plug-in personalizado. Não se preocupe, é mais fácil do que você imagina!

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

O que é um popup de confirmação de navegação? Por que você precisa dele?

Vamos supor que um usuário esteja escrevendo um comentário no seu blog do WordPress. 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.

Esse recurso é mostrado 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, será exibido um pop-up de aviso.

A configuração de um pop-up de confirmação de navegação pode melhorar a experiência do usuário, as taxas de conversão e a confiança do usuário.

Veja como: Oferecer aos usuários um recurso de aviso mostra que você se preocupa com a experiência dos usuários, o que pode ajudar a promover a fidelidade e o retorno de visitas. É mais provável que os usuários preencham formulários ou comentários se souberem que não perderão seu progresso.

Com isso em mente, mostraremos como adicionar esse recurso de aviso aos comentários do WordPress e a outros formulários em seu site. Aqui está uma visão geral rápida de tudo o que falaremos neste guia:

Pronto? Vamos começar.

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.

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

Agora, vamos abrir um editor de texto simples, como o Bloco de Notas, e criar 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. Para isso, crie um novo arquivo em seu editor de texto 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.

Em seguida, você deverá 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. Para obter instruções passo a passo, consulte nosso guia sobre como usar o FTP para fazer upload de arquivos do WordPress.

Depois de conectado, você precisará carregar a pasta confirm-leaving na pasta/wp-contents/plugins/ do seu site.

Depois disso, faça login na área de administração do WordPress e vá para “Plugins”.

A partir daí, você deverá ver o plug-in “Confirm Leaving” na lista de plug-ins instalados. Em seguida, você pode clicar no link “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.

Adicionar o pop-up de aviso a outros formulários em seu site 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ê usar um plugin de formulário de contato diferente no seu site.

A primeira coisa a fazer é ir para a página em que você adicionou o formulário de contato. Em seguida, 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.

A partir daqui, você deverá localizar a linha que começa com a tag <form> para encontrar o atributo ID. Neste exemplo, o ID do nosso formulário é wpforms-form-170.

Depois de encontrar a tag, copie o atributo ID.

Agora, vamos editar o arquivo confirm-leaving.js e adicionar 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]

Se tudo estiver correto, você poderá salvar as alterações e carregar o arquivo de volta no 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 fazer o download do plug-in confirm-leaving aqui, depois instalar e ativar o plug-in como de costume. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Observe que ele tem como alvo o formulário de comentários, mas você pode editar o plug-in para direcionar seu formulário de registro de usuário, pesquisas, formulário de feedback, formulário de solicitação de emprego ou qualquer outro formulário.

Dica bônus: melhore o desempenho dos seus formulários do WordPress

Depois de adicionar o pop-up de navegação de confirmação, é uma boa ideia monitorar a frequência com que os usuários abandonam os formulários.

Saber quantas pessoas saem sem terminar pode ajudá-lo a ver se o seu site está funcionando bem para elas. Dessa forma, você pode descobrir o que pode estar fazendo com que elas saiam e fazer melhorias.

Uma das melhores ferramentas para rastrear o abandono de formulários é o MonsterInsights.

É o melhor plug-in do Google Analytics, que facilita a visualização de como os usuários interagem com seus formulários e onde eles tendem a desistir, tudo a partir do painel do WordPress.

Para obter mais detalhes, consulte nosso guia sobre como rastrear e reduzir o abandono de formulários.

Se for o caso, você também pode executar um teste de divisão A/B. Isso significa experimentar diferentes versões de seus formulários para ver qual delas tem melhor desempenho.

Por exemplo, você pode alterar o texto do pop-up de confirmação de navegação ou personalizar o formulário. Ao analisar os resultados, você pode determinar o que mantém os usuários envolvidos e ajuda a reduzir as taxas de abandono.

O Thrive Optimize é o melhor plugin para essa tarefa. Ele permite que você execute testes de divisão A/B sem qualquer codificação e mantém seus dados seguros.

Para saber mais, consulte nosso guia sobre como fazer testes A/B split no WordPress.

Esperamos que este artigo tenha ajudado você a mostrar o pop-up de confirmação de navegação para formulários do WordPress. Talvez você também queira dar uma olhada em nossa seleção de especialistas dos melhores criadores de formulários on-line e em nosso guia sobre como adicionar melhores notificações personalizadas.

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.