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

Gostaria de bloquear palavras específicas num campo de texto de linha única antes que um utilizador envie o seu formulário? Por predefinição, a proteção contra spam do WPForms é ativada quando o formulário é enviado. Com um pequeno trecho de JavaScript, pode adicionar uma lista de palavras-chave bloqueadas em tempo real que exibe uma mensagem de erro assim que uma palavra restrita é inserida.

Neste tutorial, vamos mostrar-lhe 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.

---

Criar o formulário

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

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

Anote:

• O ID do formulário
• O ID do campo de texto de linha única que pretende validar

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

Adicionar o snippet de código

Para adicionar a lista de palavras-chave bloqueadas 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 o nosso tutorial sobre como adicionar PHP ou JavaScript personalizado ao WPForms.

Depois de adicionar e guardar este código, aceda a uma página com o 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.

Personalizar o snippet

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

• 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 seu 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 do exemplo pela lista de palavras-chave que deseja bloquear. 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 é detetada.

Perguntas mais frequentes

Abaixo, respondemos algumas das principais perguntas sobre a utilização deste 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 Definições » Proteção contra spam e segurança e aplica-se a todos os formulários e campos do seu site quando o formulário é enviado. Este trecho de código visa apenas um campo específico de texto de linha única num formulário e mostra a mensagem de erro instantaneamente enquanto o utilizador está a digitar.

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 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 se deseja feedback imediato.

É isso. Agora já aprendeu a 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ãoEnviarnum formulário com base num dos campos do formulário? Consulte o nosso tutorialsobre Como mostrar condicionalmente o botão Enviar.

Ação de referência

wpforms_wp_footer_end