Mostre uma Contagem ao Vivo de Campos Repetidores em Seu Formulário

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

Neste tutorial, mostraremos como atualizar automaticamente um campo de “Contagem” em tempo real usando um simples trecho de código PHP.

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

Criando Seu Formulário

Para começar, crie seu formulário e inclua um campo Repetidor junto 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 usuário.

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

Adicionando o Trecho de Código

Use o seguinte trecho de código para habilitar o recurso de contagem em tempo real em seu formulário.

Personalizando o Trecho de Código

Você precisará atualizar os seguintes IDs no trecho de código para corresponder aos seus próprios formulários:

  • 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, confira este tutorial.

Depois que este trecho de código for adicionado e os IDs forem atualizados, o campo de Contagem será atualizado automaticamente à medida que os usuários adicionam ou removem linhas do repetidor.

E é isso! Você adicionou um contador dinâmico ao seu campo repetidor, dando aos usuários uma visão clara de quantas entradas eles fizeram.