Mostrar uma Contagem em Tempo Real de Campos Repetidores no Seu Formulário

Gostaria de exibir uma contagem em tempo real de quantas linhas de campos repetidores foram adicionadas ao seu formulário? Isto pode ser útil quando pretende que os utilizadores vejam quantos itens adicionaram, especialmente em cenários como a adição de nomes, tarefas ou itens de produto.

Neste tutorial, iremos guiá-lo através de como atualizar automaticamente um campo de “Contagem” em tempo real utilizando um simples trecho de PHP.

Nota: Este tutorial envolve a adição de PHP e JavaScript. Se precisar de ajuda para adicionar trechos ao seu site, por favor, reveja este guia sobre como adicionar código personalizado para WPForms.

Criar o Seu Formulário

Para começar, crie o seu formulário e inclua um campo Repetidor juntamente com um campo de Texto de Linha Única rotulado como algo como “Contagem”. Este campo será atualizado automaticamente e não deve ser preenchido manualmente pelo utilizador.

Se precisar de ajuda para criar um formulário, consulte o nosso tutorial sobre como criar o seu primeiro formulário.

Adicionar o Excerto de Código

Utilize o seguinte trecho para ativar a funcionalidade de contagem em tempo real no seu formulário.

Personalizar o Trecho de Código

Terá de atualizar os seguintes IDs no trecho para corresponderem ao seu próprio formulário:

  • wpforms-5410-field_1-container: Substitua 5410 pelo ID real do seu Formulário e field_1 pelo ID do seu Campo Repetidor.
  • wpforms-5410-field_3: Substitua field_3 pelo ID do seu Campo de Contagem.

Para localizar os IDs do seu formulário e campos, consulte este tutorial.

Depois de adicionar este trecho e atualizar os IDs, o campo de Contagem será atualizado automaticamente à medida que os utilizadores adicionam ou removem linhas do repetidor.

E é tudo! Adicionou agora um contador dinâmico ao seu campo repetidor, dando aos utilizadores uma visão clara de quantas entradas fizeram.