Como Mostrar Popup de Confirmação de Navegação para Formulários no WordPress

Não há nada mais frustrante do que preencher um formulário do WordPress, apenas para clicar no botão voltar por engano e perder tudo. Todos nós já passamos por isso — e geralmente é o suficiente para fazer alguém desistir imediatamente.

Para os proprietários de sites, esse pequeno contratempo pode significar vendas perdidas e menos cadastros. Os visitantes sairão irritados e terão muito menos probabilidade de voltar e tentar novamente.

A boa notícia? Existe uma solução fácil: um popup de confirmação de navegação. Este aviso simples dá aos usuários uma segunda chance antes de saírem de uma página com um formulário não enviado.

Neste guia, mostraremos como adicionar esse recurso aos seus formulários do WordPress para que você possa criar uma experiência mais tranquila e aumentar suas taxas de conclusão de formulários.

O que é um Popup de Confirmação de Navegação e Por Que Você Precisa Dele?

Um popup de confirmação de navegação é um aviso do navegador que aparece quando um usuário com alterações não salvas em um formulário tenta sair de uma página da web.

Você provavelmente já viu esse recurso em ação na tela do editor de conteúdo do WordPress. Se você tiver alterações não salvas e tentar sair da página, um popup de aviso aparecerá para evitar que você perca seu trabalho.

Adicionar isso aos seus próprios formulários é uma pequena mudança com grandes benefícios:

• Melhora a Experiência do Usuário: Isso evita que os visitantes percam o progresso acidentalmente, mostrando que você valoriza o tempo deles.
• Aumenta as Taxas de Conversão: Ao evitar o abandono acidental, você dá aos usuários uma segunda chance de preencher o formulário, o que pode aumentar os leads.
• Constrói Confiança do Usuário: Um recurso atencioso como este demonstra profissionalismo e cuidado, o que pode ajudar a construir lealdade e incentivar visitas de retorno.

Com isso em mente, vamos adicionar este aviso aos seus comentários do WordPress e outros formulários em seu site.

Aqui está tudo o que abordaremos neste guia:

• Método 1: Mostrar Popup de Confirmação de Navegação para Formulários Não Enviados no WordPress
• Método 2: Adicionar o Popup de Aviso a Outros Formulários em Seu Site WordPress
• Bônus: Melhore o Desempenho dos Seus Formulários WordPress
• Perguntas Frequentes Sobre Popups de Confirmação de Navegação
• Guias Adicionais para Usar Formulários WordPress

Pronto? Vamos começar.

Método 1: Mostrar Popup de Confirmação de Navegação para Formulários Não Enviados no WordPress

Este método envolve a criação de um plugin simples e personalizado.

Não se preocupe se você nunca codificou antes! Nós o guiaremos em cada etapa do processo, e é uma ótima maneira de ver como os plugins do WordPress funcionam.

Além disso, você também pode baixar o plugin no final deste tutorial para instalá-lo em seu site.

No entanto, recomendamos fortemente que você crie o plugin sozinho para entender melhor como o código funciona. Você pode acompanhar em uma instalação local ou site de staging primeiro.

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

Agora, vamos abrir um editor de texto simples como o Bloco de Notas e criar um novo arquivo. Dentro dele, simplesmente cole o seguinte código:

<?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
		
		

Esta função PHP usa wp_enqueue_script, que é o método oficial do WordPress para adicionar JavaScript. Esta é a melhor prática porque ajuda a evitar conflitos de script com outros plugins.

Agora, salve este arquivo como confirm-leaving.php dentro da pasta principal confirm-leaving.

Agora, precisamos criar o arquivo JavaScript que este plugin está carregando. Você pode fazer isso criando um novo arquivo em seu editor de texto e colando este código dentro dele:

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
		
		

Este JavaScript detecta se um usuário começou a preencher o formulário de comentários. Se ele tentar sair da página antes de enviar, um pop-up de aviso será acionado.

Salve este arquivo como confirm-leaving.js dentro da pasta js que você criou anteriormente.

Após salvar ambos os arquivos, sua estrutura de pastas deverá ficar assim:

Agora, você precisa se conectar ao seu site WordPress usando um cliente FTP. Para instruções passo a passo, consulte nosso guia sobre como usar FTP para enviar arquivos para o WordPress.

Uma vez conectado, você precisará enviar a pasta confirm-leaving para a pasta /wp-contents/plugins/ em seu site.

Depois disso, você desejará fazer login na área de administração do WordPress e ir para 'Plugins'.

A partir daqui, você deverá ver o plugin 'Confirm Leaving' na lista de plugins instalados. Você pode então clicar no link 'ativar' abaixo dele.

É isso. Agora você pode visitar qualquer postagem em seu site, digitar algo no formulário de comentários e, em seguida, tentar sair da página.

Em seguida, um pop-up aparecerá, avisando que você tem alterações não salvas.

Por motivos de segurança, navegadores modernos exibirão sua própria mensagem de aviso genérica (como "Sair do site? As alterações que você fez podem não ser salvas.") em vez do texto personalizado do código. O propósito do código é simplesmente acionar este prompt padrão do navegador.

Método 2: Adicionar o Popup de Aviso a Outros Formulários em Seu Site WordPress

Você pode usar o mesmo código para direcionar qualquer outro formulário em seu site WordPress, como um formulário de contato.

Neste exemplo, estamos visando um formulário feito com o plugin WPForms, mas estes passos funcionarão se você usar um plugin de formulário de contato diferente em seu site.

Ainda não tem um formulário de contato e quer criar um? Então você pode conferir nosso guia sobre como criar um formulário de contato.

No WPBeginner, usamos o WPForms para incorporar muitos formulários diferentes, incluindo nosso formulário de contato, pesquisa anual de leitores e solicitações de migração. Se você estiver curioso sobre a ferramenta e o que ela pode fazer, pode conferir nossa análise completa do WPForms.

A primeira coisa a fazer é ir para a página onde você incorporou seu formulário de contato.

Em seguida, passe o mouse sobre o primeiro campo do seu formulário de contato, clique com o botão direito e selecione 'Inspecionar' no menu do navegador.

A partir daqui, você vai querer 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, abra seu arquivo confirm-leaving.js para editar o seletor jQuery. Você precisará adicionar o ID do seu formulário logo após #commentform, separado por uma vírgula. Certifique-se de adicionar um prefixo # ao seu novo ID, assim como o formulário de comentários tem.

Seu código agora ficará assim:

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
		
		

Se tudo parecer bom, você pode salvar suas alterações no arquivo confirm-leaving.js e enviá-lo de volta para o seu servidor, sobrescrevendo o arquivo antigo.

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

📥 Download do Plugin: Você pode baixar o plugin confirm-leaving aqui, em seguida, instale e ative o plugin como de costume. Se precisar de ajuda, você pode consultar nosso guia sobre como instalar um plugin do WordPress.

Observe que ele tem como alvo o formulário de comentários, mas você pode editar o plugin para ter como alvo seu formulário de registro de usuário, pesquisas, formulário de feedback, formulário de candidatura de emprego ou quaisquer outros formulários.

Bônus: Melhore o Desempenho dos Seus Formulários WordPress

Após adicionar o pop-up de confirmação de navegação, é uma boa ideia rastrear com que frequência os usuários abandonam seus formulários. Saber esses dados pode ajudá-lo a encontrar e corrigir problemas que fazem as pessoas saírem.

Uma das melhores ferramentas para rastrear o abandono de formulários é o MonsterInsights. É o melhor plugin de Google Analytics para WordPress. Seu add-on de Formulários (disponível na versão Pro) facilita o rastreamento automático de visualizações e envios de formulários.

Dessa forma, você pode ver como os usuários interagem com seus formulários diretamente do seu painel.

No WPBeginner, usamos o MonsterInsights para rastrear todas as nossas conversões importantes, incluindo formulários, botões e links de afiliados. Confira nossa análise completa do MonsterInsights para saber sobre todos os seus recursos.

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

Você também pode executar testes A/B para ver qual versão do seu formulário tem melhor desempenho. Por exemplo, você pode testar diferentes estilos de formulário ou texto de botão para ver o que incentiva mais conclusões.

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

Thrive Optimize é o melhor plugin para essa tarefa. Ele permite que você execute testes A/B facilmente sem nenhum código.

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

Perguntas Frequentes Sobre Popups de Confirmação de Navegação

Adicionar este código deixará meu site lento?

Não, de forma alguma. O código JavaScript é muito leve e só é executado quando um usuário tenta sair de uma página com um formulário alterado. Ele não terá impacto perceptível no desempenho do seu site.

Posso alterar a mensagem no pop-up de confirmação?

Infelizmente, não. Por motivos de segurança, os navegadores modernos não permitem mais que sites exibam uma mensagem personalizada no pop-up de confirmação. Eles sempre mostrarão um aviso genérico e padrão ao usuário.

Este pop-up de confirmação funciona em navegadores móveis?

Sim, o evento onbeforeunload é suportado pela maioria dos navegadores móveis modernos, incluindo Chrome e Safari em Android e iOS. O comportamento será o mesmo que em um desktop.

Guias Adicionais para Usar Formulários WordPress

Esperamos que este artigo tenha ajudado você a mostrar o pop-up de confirmação de navegação para seus formulários do WordPress.

Você também pode querer conferir estes outros guias e escolhas de especialistas:

• Como Criar um Formulário de Contato com Múltiplos Destinatários
• Como Enviar E-mails de Confirmação Após Submissões de Formulário no WordPress
• Maneiras de Usar Lógica Condicional em Seus Formulários do WordPress
• Melhores Criadores de Formulários Online (Escolhas de Especialistas)
• O Guia Definitivo para Usar Formulários no WordPress

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