Adicionar uma lista de palavras-chave bloqueadas em tempo real a um campo de texto de linha única

Você gostaria de bloquear palavras específicas em um campo de texto de linha única antes que um usuário envie seu formulário? Por padrão, a proteção contra spam do WPForms é executada quando o formulário é enviado. Com um pequeno trecho de JavaScript, você pode adicionar uma lista de bloqueio de palavras-chave em tempo real que exibe uma mensagem de erro assim que uma palavra restrita é inserida.

Neste tutorial, mostraremos como usar wpforms_wp_footer_end e jQuery Validate para adicionar validação de palavras-chave no lado do cliente que funciona de forma semelhante a uma máscara de entrada.

---

Criando o formulário

Primeiro, crie seu formulário e adicione um campo de texto de linha única que você deseja proteger com a palavra-chave blocklist. Você também pode adicionar quaisquer outros campos necessários para o seu formulário.

Se precisar de ajuda com esta etapa, consulte nosso guia sobre como criar seu primeiro formulário no WPForms.

Anote:

• O ID do formulário
• O ID do campo de texto de linha única que você deseja validar

Você precisará desses valores ao configurar o trecho abaixo.

Adição do snippet de código

Para adicionar a lista de palavras-chave em tempo real, use o seguinte trecho de código. Este exemplo imprime um pequeno bloco de JavaScript no rodapé do seu site usando o wpforms_wp_footer_end ação.

Se precisar de ajuda para adicionar código personalizado, consulte nosso tutorial sobre como adicionar PHP ou JavaScript personalizado ao WPForms.

Depois de adicionar e salvar esse código, acesse uma página com seu formulário no front-end e teste o campo Texto de linha única digitando uma das palavras bloqueadas.

Você deverá ver uma mensagem de validação vermelha abaixo do campo assim que uma palavra-chave restrita for detectada, sem precisar enviar o formulário.

Personalização do snippet

Para adaptar este exemplo ao seu formulário, edite a seção de configuração na parte superior do script usando os números das linhas da captura de tela.

• ID do formulário
  Em linha 14:
  var targetFormID = 100; // Replace with your Form ID
  Mudança 100 para o ID do formulário que contém o campo Texto de linha única.
• ID do campo
  Em linha 15:
  var targetFieldID = 1; // Replace with your Field ID
  Mudança 1 para o ID do campo Texto de linha única que deve usar a palavra-chave blocklist.
• Palavras-chave bloqueadas
  Em linha 16:
  var blockedWords = ['badword', 'spam', 'unwanted']; // List of keywords to block
  Substitua as palavras de exemplo pela lista de palavras-chave que deseja bloquear. Você pode adicionar ou remover itens da matriz conforme necessário.
• Mensagem de erro
  Em linha 17:
  var customError = 'This content contains restricted keywords.';
  Atualize o texto entre aspas para alterar a mensagem que aparece abaixo do campo quando uma palavra-chave restrita é detectada.

Perguntas frequentes

Abaixo, respondemos algumas das principais perguntas sobre o uso desse filtro de palavras-chave personalizado.

Em que isso difere do filtro de palavras-chave integrado na Proteção contra Spam e Segurança?

O filtro de palavras-chave integrado é configurado em Configurações » Proteção contra spam e segurança e se aplica a todos os formulários e campos do seu site quando o formulário é enviado. Este trecho de código tem como alvo apenas um campo de texto de linha única específico em um formulário e exibe a mensagem de erro instantaneamente enquanto o usuário está digitando.

O filtro de palavras-chave padrão é a principal forma de bloquear palavras proibidas em todos os seus formulários e continuará a funcionar no momento do envio, mesmo que o JavaScript esteja desativado.

Este trecho é mais adequado para ser usado como uma verificação extra em tempo real para campos importantes nos quais você deseja obter feedback imediato.

É isso. Agora você aprendeu como adicionar uma lista de palavras-chave bloqueadas em tempo real a um campo de texto de linha única usando uma regra de validação JavaScript personalizada.

Gostaria de mostrar ou ocultar condicionalmente o botãoEnviarem um formulário com base em um dos campos do formulário? Confira nosso tutorial sobreComo mostrar condicionalmente o botão Enviar.

Ação de referência

wpforms_wp_footer_end