Mostrar uma contagem em tempo real de campos repetidos em seu formulário

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

Neste tutorial, mostraremos como atualizar automaticamente um campo "Count" em tempo real usando um simples snippet de PHP.

Observação: este tutorial envolve a adição de PHP e JavaScript. Se precisar de ajuda para adicionar snippets ao seu site, consulte este guia sobre como adicionar código personalizado ao 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 "Contagem". Esse 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.

Adição do snippet de código

Use o seguinte snippet para ativar o recurso de contagem ao vivo em seu formulário.

Personalização do snippet de código

Você precisará atualizar os seguintes IDs no snippet para que correspondam ao seu próprio formulário:

  • wpforms-5410-field_1-container: Substituir 5410 com seu ID do formulário e field_1 com seu ID do campo do repetidor.
  • wpforms-5410-field_3: Substituir field_3 com seu Contagem ID do campo.

Para localizar seus IDs de formulário e campo, consulte este tutorial.

Quando esse snippet for adicionado e os IDs forem atualizados, o campo Count será atualizado automaticamente à medida que os usuários adicionarem ou removerem linhas do repetidor.

E é isso! Agora você adicionou um contador dinâmico ao seu campo repetidor, oferecendo aos usuários uma visão geral clara de quantas entradas foram feitas.