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.
![Confirm navigation popup when user leaves a form unsubmitted Confirm navigation popup when user leaves a form unsubmitted](https://www.wpbeginner.com/wp-content/uploads/2016/04/confirmnavigation.jpg)
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.
![Unsaved changes warning popup in WordPress post editor Unsaved changes warning popup in WordPress post editor](https://www.wpbeginner.com/wp-content/uploads/2016/04/postedit-unsavedchanges.png)
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');[/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; }); })[/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:
![Plugin file structure Plugin file structure](https://www.wpbeginner.com/wp-content/uploads/2016/04/pluginfilestructure.png)
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.
![Uploading plugin files to your WordPress site Uploading plugin files to your WordPress site](https://www.wpbeginner.com/wp-content/uploads/2016/04/uploadplugin.png)
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.
![Activate plugin Activate plugin](https://www.wpbeginner.com/wp-content/uploads/2016/04/activateplugin.png)
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.
![popup notification warning user about unsaved changes popup notification warning user about unsaved changes](https://www.wpbeginner.com/wp-content/uploads/2016/04/notificationpopup.jpg)
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.
![Finding form ID Finding form ID](https://www.wpbeginner.com/wp-content/uploads/2016/04/findingformid.png)
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; }); })[/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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Igor says
Tried to use your code in bbpress forum. Unfortunately no popup message appears after user dose not post his comment. Tried all variations of changing id in JS file but still nothing appears.
Bob Garrett says
Further to my previous query I have now tried using the form’s parent div id and modified the code. This almost works but…
The text shown by the pop-up is not the text entered in the code.
Even if the form is completed and submit hit, then going to another page still results in the warning.
How can I resolve this?
Tom Kelley says
Have tried this vvvvv to no avail. Working with Gravity Forms. All else works well, but the warning still comes up when hitting the submit button on a completed form. Any advice?
WPBeginner Support
Nov 27, 2016 at 6:52 am
Hi Bonnie,
We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.
Bonnie Ramthun says
I’m still trying to figure out how to make sure the popup DOESN’T appear when the user presses the “Submit” button. The confirm leaving popup shouldn’t appear if the user has entered all the information required, but this code makes it pop up every time.
I would so appreciate the help, if there is a solution available.
Swayam Dhawan says
I Need the same function when someone navigate from particular page in website and while click on stay , they must navigate to home page of the website.
waiting for the response.
Bonnie Ramthun says
I am so happy for your wonderful confirm navigation code! I need it desperately because many of my clients users can’t get it through their head that they need to press the “Submit” button on the form.
The code works perfectly, except for one problem. When I press the “Submit” button on my WPForms form, the confirm navigation code pops up. I would like the “confirm navigation” to happen only when the user doesn’t press the “Submit” button. I can’t figure out how to do this. Can you help?
WPBeginner Support says
Hi Bonnie,
We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.
Administrador
Will C says
I have two separate multi-page gravity forms on my site. When this plugin is active, I get a confirmation popup when clicking “Next Step” on one of the forms (undesired), but not the other. Are you aware of any issues with gravity forms and “window.onbeforeunload”? Thanks
Nipa Sarker says
Having same issues with buddy press create group steps.
Nipa Sarker says
I ma using the code for buddy-press multi step create group from.It is working fine except while clicking on the next step button or save button it is showing the same alert.
I ma using the form id “#create-group-form” instead of the #commentform
Luis Zarza says
Hi, nice post!
It helped a lot. But your solution won’t work while logged in. It only works for users that fill in the form and are logged out. I need it also to work for logged in users, please!
Could you provide a solution for that?
Thanks.
Luis Zarza says
Sorry, it does actually works when you create the plugin. At first I did it only throwing the JS to the page I wanted without creating the plugin, because I didn’t want the script to be loaded on all the pages of my site.
Alain Aubry says
Hi
Contact Form 7 does not use an ID in their form, how can I make this work?
WPBeginner Support says
Contact Form 7 uses an ID with all the forms. The line that contains form ID will look something like this:
1-click Use in WordPress
In this example, the form’s ID attribute is
wpcf7-f85-p11-o1
. Hope this helps.Administrador
Betty L Van Fossen says
I have two problems. One I get these pop up in my mail all the time,q it’s aggravating. I’m 89 in yrs.therefore a little short on patience and I start using my pointer to fast hitting other things, so I get myself in lots of problems. Two –guess(I know) I have to many cookies they say. What are the cookies –how do I eleminate them? What do you mean subscribe without commenting. I prefer the e-mail. O.K..to personal and meaningful conversation.
Betty L Van Fossen says
Does Pop Ups work the same for e-mail as WordPress for removing?
WPBeginner Support says
We are not sure what you mean. Can you please explain?
Administrador
Betty L Van Fossen says
Safari said I could not get in cause I had to many cookies. In the meantime I was on my e-mail and the pop ups came on, while on my e-mail they are always popping up. I got on google and asked for help on cookies and pop ups and gave me lots to choose from. Now word press got in here, what is word press. I’m not going to write a book,just NEED HELP. Answer by e-mail. I’m turning you off now I’m really tired now.
Betty L Van Fossen says
I will wait for your reply in my e-mail as I’m tired so will turn off now.