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

Gostaria de apresentar uma contagem em tempo real do número de linhas do campo repetidor que foram adicionadas ao seu formulário? Isto pode ser útil quando pretende que os utilizadores vejam quantos itens introduziram, especialmente em cenários como a adição de nomes, tarefas ou itens de produtos.

Neste tutorial, vamos mostrar-lhe como atualizar automaticamente um campo "Count" em tempo real utilizando um simples snippet PHP.

Nota: 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 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 com a designação "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 snippet de código

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

Personalizar o snippet de código

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

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

Para localizar os IDs dos seus formulários e campos, consulte este tutorial.

Quando este snippet for adicionado e os IDs forem actualizados, o campo Contagem será atualizado automaticamente à medida que os utilizadores adicionarem ou removerem linhas do repetidor.

E já está! Adicionou agora um contador dinâmico ao seu campo repetidor, dando aos utilizadores uma visão clara do número de entradas que fizeram.