Fechar acidentalmente uma página sem enviar o formulário preenchido pela metade é irritante. Recentemente, um de nossos usuários nos perguntou se era possível exibir uma janela pop-up que confirma a ação do usuário nos formulários. Este pequeno alerta alerta os usuários e evita que fechem acidentalmente páginas com formulários preenchidos pela metade.

Neste tutorial, mostraremos como exibir uma janela de confirmação de ação de fechamento para seus formulários. blog WordPress.

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

Suponha que um usuário esteja escrevendo um comentário em seu blog. ele já escreveu um bom número de linhas, mas eles se distraem e se esquecem de enviar o comentário. Agora, clicando em um link, por exemplo, todo o conteúdo que ele começou a escrever será perdido.

A confirmação de navegação dá a eles a chance de completar seu comentário.

Você pode ver esse recurso na interface do editor de artigos / páginas. Se houver alterações não salvas e tentar sair da página ou fechar o navegador, você verá um aviso pop-up.

Vamos ver como podemos adicionar esse recurso de aviso nos comentários do WordPress e outros formulários em seu blog.

Como exibir um pop-up de confirmação em formulários não enviados no WordPress

Para este tutorial, vamos crie um plugin personalizado. Já mostramos como criar um WordPress Plugin rapidamente.

Vamos começar.

Primeiro você precisa criar uma nova pasta em seu computador e nomeá-la como "ação de confirmação". Nesta pasta, você precisa criar outra pasta e nomeá-la como js.

Agora abra um editor de texto como o Bloco de notas e crie um novo arquivo. Dentro, basta colar o seguinte código:

<?php
/**
 * Confirmar ação
 * Nome do plugin: Confirmar ação
 * URI do plug-in: https://blogpascher.com
 * Descrição: Este plugin mostra um aviso aos usuários quando eles tentam esquecer de clicar no botão enviar em um formulário de comentários.
 * Versão: 1.0.0
 *Autor: SeuNOME
 * URI do autor: https://blogpascher.com
 * Licença: GPL-2.0+
 * URI de licença: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
função bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Confirmar saída', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Esta função php simplesmente adiciona um arquivo javascript ao front end do seu site.

Vá em frente e salve este arquivo como "confirmar-ação.php" na pasta confirmar a ação "(Raiz do seu plugin).

Agora precisamos criar o arquivo JavaScript que este plugin irá carregar. Crie um novo arquivo e cole este código dentro de:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); função askConfirm () {if (needToConfirm) {// Coloque o seu personalizado mensagem aqui voltar "seus dados não salvos serão perdidos.";}} $ ( "# CommentForm") cambial (function () {needToConfirm = true;}).})

Renomeie este arquivo confirmar-leaving.js", Mova-o para a" subpasta " js »De« confirmar a ação"

Este código JavaScript detecta se o usuário possui alterações não salvas no formulário de comentários. Se o usuário tentar sair da página, ele exibirá um aviso pop-up.

Tudo o que você precisa fazer agora é enviar o arquivo para o servidor usando o cliente favoritos FTP. Depois disso, tudo que você precisa fazer é ativar o plugin no seu painel.

Isso é tudo. Agora você pode visitar um artigo em seu site, tentar escrever um comentário e clicar em um link, você notará um pop-up semelhante a este.

Adição do aviso em outros formulários WordPress

Você pode usar o mesmo código para direcionar todos os formulários em seu site WordPress. Aqui mostraremos um exemplo em um formulário de contato.

Neste exemplo, usamos o plugin WPForms para criar um formulário de contato. As instruções serão as mesmas se você usar outro contacto forma de encaixe em seu site.

Vá para a página onde você adicionou seu formulário de contato. Mova o mouse sobre o primeiro campo do formulário de contato, clique com o botão direito e selecione “ inspecionar“, Para acessar o código-fonte.

Encontre a linha que começa com a tag <form>. Na tag do formulário você encontrará o atributo ID. Neste exemplo, o ID do nosso formulário é formulaire . Você deve copiar o atributo ID.

Agora edite o confirmer-leaving.js arquivo e adicione o atributo ID após " #commentform Separado por vírgula.

Seu código deve ficar assim:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); função askConfirm () {if (needToConfirm) {// Coloque o seu personalizado mensagem aqui voltar "seus dados não salvos serão perdidos.";}} $ ( "# CommentForm, forma #") cambial (function () {needToConfirm = true;}).})

Salve as alterações e instalar o plugin em seu blog WordPress.

É isso para este tutorial. Espero que ajude você a adicionar uma janela pop-up de confirmação ao seu blog. Não hesite em fazer perguntas se você não entender um ponto.