Como permitir que os visitantes dupliquem campos de formulário

Há muitas ocasiões em que os utilizadores dos seus formulários provavelmente gostariam de poder simplesmente duplicar os campos nos seus formulários. Os campos para nomes extra, detalhes de contacto, horas trabalhadas, etc., são fáceis de adicionar quando os utilizadores podem simplesmente repeti-los.

Agora, com o campo WPForms Repeater, os utilizadores do seu site podem fazer isso mesmo! Neste tutorial, vou mostrar-lhe como modificar os seus formulários para permitir campos duplicados em apenas 5 passos.

Como permitir que os visitantes dupliquem campos de formulário

Primeiro, obtenha o WPForms

Ok, eu sei que eu disse que este tutorial leva apenas 5 passos, então isso parece extra. 😉 Mas, é meio que um dado que você vai precisar WPForms instalado e ativado em seu site WordPress para duplicar os campos em seus formulários.

Página inicial do WPForms

Por isso, primeiro, adquira o plugin WPForms!

1. Selecione ou crie o seu formulário

O campo Repetidor é um ótimo recurso incluído nos formulários que você constrói através do WPForms. Com ele, os utilizadores do seu formulário podem adicionar mais entradas ou duplicar blocos inteiros do formulário.

Mas não é necessário criar um formulário totalmente novo para começar a permitir que os utilizadores dupliquem campos.

É possível que já utilize formulários no seu site que gostaria de modificar com o campo Repetidor. Basta clicar em Editar por baixo do formulário para o qual pretende abrir o criador de formulários.

Editar um formulário

Mas, se precisar de criar um novo formulário, pode começar por escolher entre milhares de modelos de formulários fornecidos na galeria WPForms.

Oferecemos uma extensa seleção de modelos de formulários que vêm com a funcionalidade do campo Repetidor incorporada.

Navegação nos modelos de formulário do campo Repetidor

Em alternativa, pode escolher um modelo de formulário diferente e adicionar rapidamente o campo Repetidor com o construtor de formulários.

E, como sempre, pode construir o seu formulário a partir do zero, começando com um formulário em branco.

Crie o seu formulário WordPress agora

2. Adicionar o campo Repetidor

Depois de ter o formulário selecionado e carregado no criador de formulários, pode adicionar o campo Repetidor.

É apresentado entre os campos do lado esquerdo do ecrã.

Adicionar o campo Repetidor a um formulário

Basta clicar no campo Repetidor, arrastá-lo para o seu formulário e largá-lo onde quiser.

Depois, tal como o campo Disposição, o campo Repetidor permite que outros campos do seu formulário sejam adicionados a ele.

Adicionar campos à área de campo Repetidor

Então, que campos pertencem à secção de campos Repetidores? Os campos que pretende que os utilizadores do formulário possam duplicar.

Num formulário de registo de grupo, por exemplo, os utilizadores gostariam provavelmente de incluir vários nomes de participantes a registar ao mesmo tempo.

Vista frontal do campo do Repetidor

Antes de o WPForms oferecer o campo Repetidor, você poderia ter entupido seu formulário com um punhado de campos Nome que seu usuário *poderia* precisar.

Ou pode ter utilizado definições de lógica condicional para incluir campos de Nome adicionais se o utilizador quisesse incluir mais.

Aplicar definições de lógica condicional

Seja qual for o caso, o campo Repetidor torna agora a duplicação de campos muito mais fácil para si e para os utilizadores do seu formulário!

Leia também: Formas de usar WPForms para sites educacionais

3. Exibir linhas ou blocos

Agora, antes de avançarmos muito mais, dê uma vista de olhos às opções de visualização que são aplicadas ao campo Repetidor.

Selecionar o campo Repetidor para apresentar linhas

Não só pode personalizar os campos na área de campo Repetidor para serem adicionados como linhas individuais, como também pode permitir que blocos inteiros de campos sejam duplicados.

Dica profissional: Navegue até ao separador Avançadas para ocultar a etiqueta do campo Repetidor, como eu fiz.

Quando seleciona os campos na área Repetidor para serem apresentados como Linhas, os utilizadores do formulário duplicarão cada linha horizontal.

Vista frontal do bloco de campo Repetidor

Como pode ver acima, os botões + adicionar ou - remover estão no final de cada linha.

Os blocos, por outro lado, são bons para combinar campos que devem ser repetidos em conjunto e que não cabem numa única linha.

Seleção da visualização do campo Repetidor como Blocos

E com os Blocos, os botões + adicionar ou - remover estão por baixo de toda a secção de campos. Mais sobre esses botões, mais tarde.

No meu exemplo abaixo, selecionei Blocos como a forma de apresentar os meus campos repetíveis. Em seguida, incluí os campos na área do campo Repetidor que pretendo que os utilizadores possam duplicar como uma secção.

Vista frontal dos blocos de campo do repetidor

Agora, quando os utilizadores do formulário adicionam outro participante, podem fornecer todas as informações que solicitei no formulário para cada bloco.

Desta forma, os utilizadores do formulário podem duplicar secções inteiras do formulário de uma só vez.

4. Selecionar um esquema

Em seguida, verifique as diferentes formas de organizar o Layout dos seus campos repetíveis.

Seleção da disposição do campo Repetidor

Pode configurar os seus campos em linhas simples, colunas com espaçamento uniforme e colunas irregulares.

Se tiver Linhas repetidas de nomes e idades de participantes, por exemplo, pode escolher um Layout que posicione um espaço maior para o nome e um espaço menor para a idade.

Seleção da disposição das colunas do campo Repetidor 2

Assim, o meu exemplo de colunas Linhas e Disposição no criador de formulários acima teria o seguinte aspeto para um utilizador do formulário:

Ou, lembra-se do bloco que lhe mostrei no final do passo 3 com o nome do participante, as informações de contacto de emergência e outros campos?

Posso utilizar um Layout de 2 colunas para personalizar esta parte do formulário.

Seleção da disposição das colunas do campo Repetidor 2

Depois, o utilizador terá o seguinte aspeto:

Vista frontal da disposição em 2 colunas do campo Repetidor

Dica profissional: Utilize um campo Nome simples, de uma linha, para manter as colunas uniformemente espaçadas, como fiz acima.

A modificação destes aspectos do campo Repetidor apenas ajuda a manter tudo limpo e organizado em todo o formulário.

5. Personalizar a vista de botões

A última coisa a personalizar na secção do campo repetidor são os botões + e - para adicionar e remover campos repetíveis.

Estes são os botões em que o utilizador do formulário clicará para adicionar nomes, secções de registo ou quaisquer outros campos que tenha disponibilizado para duplicação.

Por defeito, estes botões apresentam + ou - no final de cada linha, mas pode personalizar estes ícones quando utiliza um bloco.

Navegar para as definições do botão de campo Repetidor

Uma vez que os botões estão alojados por baixo do bloco, em vez de no fim da linha, permitir que esta se torne mais comprida através da personalização mantém as coisas visualmente arrumadas.

Primeiro, selecione o Tipo de botão.

Selecionar o tipo de botão do campo Repetidor

As opções aqui incluem:

  • Botões com ícones
  • Botões
  • Ícones com texto
  • Ícones
  • Texto simples

Se o botão apresentar qualquer tipo de texto, pode personalizá-lo na caixa seguinte. É aqui que pode alterar o texto da etiqueta do botão.

Personalização dos rótulos dos botões do campo Repetidor

Num formulário de registo de grupo, por exemplo, pode personalizar o botão para "Adicionar participante".

Finalmente, pode escolher o limite mínimo e máximo para os seus campos repetíveis.

Definir o limite do botão do campo Repetidor

Por defeito, este Limite está definido para um mínimo de 1 e um máximo de 10. Isto significa que os utilizadores do formulário podem registar até 10 participantes neste formulário.

Assim, ao aplicar as definições mostradas acima, o botão no nosso formulário de registo de grupo teria o seguinte aspeto para os utilizadores:

Vista frontal do botão de campo Repetidor

Como sempre, quando estiver satisfeito com os seus campos personalizados e repetíveis, não se esqueça de guardar o seu formulário para o publicar quando estiver pronto.

E é tudo o que há para fazer! Agora já sabe como permitir que os visitantes do sítio Web dupliquem campos nos seus formulários.

Bónus: O campo repetidor em ação

Já mostrei como utilizar a área do campo Repetidor num formulário de registo de grupo, mas gostaria de partilhar alguns outros bons exemplos desta funcionalidade em ação.

Formulário de folha de ponto do empregado

Em primeiro lugar, dê uma vista de olhos a esta folha de horas de trabalho que oferecemos como modelo:

Vista completa do modelo de formulário de folha de horas do empregado

Os dados do empregado são recolhidos em primeiro lugar, incluindo o seu nome, e-mail do empregado, ID do empregado e o total de horas da semana.

A secção de detalhes do empregado do modelo

Os empregados podem então introduzir os seus dias e horas de trabalho específicos para a semana, utilizando essencialmente este formulário como uma folha de ponto semanal.

A secção da folha de horas semanal do modelo de formulário

Utiliza blocos e colunas repetíveis que permitem aos utilizadores duplicar campos para o dia da semana em que trabalharam, juntamente com a hora de entrada e de saída desse dia. Estes campos podem ser repetidos até 14 vezes, ou seja, uma semana de turnos duplos.

Pretende utilizar este formulário no seu sítio Web? Obtenha o modelo!

Formulário de registo de turma

Agora, veja esta lista de aulas que também oferecemos como modelo:

Vista completa do modelo de formulário de lista de turma

Começa por recolher as informações do professor para facilitar o acompanhamento de cada envio.

A secção de informações sobre o professor do modelo de formulário

Depois, com o campo Repetidor, os professores podem adicionar facilmente informações sobre cada aluno da sua lista - como o nível de escolaridade, a data de nascimento ou quaisquer outros dados que queiram incluir para manutenção de registos.

A secção da lista de classes do modelo de formulário

Os professores podem utilizar esta lista para um máximo de 20 alunos. Ou, como sempre, este modelo de formulário é totalmente personalizável, pelo que o número máximo de entradas permitido pode ser modificado.

Gostou deste formulário? Obtenha o modelo!

Consulte também este guia para saber se deve ou não utilizar o campo WPForms Repeater ou o campo Layout com Lógica Condicional para otimizar ainda mais o seu formulário.

Por que razão devo permitir que os visitantes dupliquem campos de formulário?

É bom para os utilizadores de formulários! Permitir que os visitantes dupliquem campos de formulário facilita muito o processo de preenchimento de formulários, especialmente quando os utilizadores precisam de introduzir informações semelhantes ou repetitivas. Isto pode poupar tempo aos visitantes do seu sítio e tornar a sua experiência de preenchimento de formulários mais conveniente e eficiente.

E também é bom para si! Quando os utilizadores podem duplicar campos de formulário, é mais fácil recolher e organizar dados para análise, porque os pontos de dados semelhantes são agrupados e mais fáceis de gerir.

Além disso, mantém o formulário organizado e visualmente apelativo. Os visitantes do seu site não ficarão sobrecarregados com longas secções de campos vazios e não terá de criar um trilho complicado de regras de lógica condicional para manter os campos adicionais ocultos.

O Campo de Repetição é um ganho para todos!

FAQ

No WPForms, estamos sempre entusiasmados em oferecer orientação sobre os recursos e ferramentas que fornecemos. Então, aqui estão as respostas para algumas de nossas perguntas mais frequentes sobre a duplicação de campos de formulário:

O que significa permitir que os visitantes dupliquem campos de formulário?

Permitir que os visitantes dupliquem campos de formulário significa dar-lhes a opção de criar várias instâncias de um campo específico num formulário. Desta forma, podem introduzir informações semelhantes ou repetitivas de forma mais eficiente.

No WPForms, nós nos referimos a essas duplicatas como campos repetidores, já que os usuários do formulário podem repetir esses campos para inserir mais informações.

Como posso implementar a duplicação de campos nos formulários do meu sítio Web?

Os métodos de implementação podem variar consoante a plataforma ou as ferramentas que estiver a utilizar.

Quanto ao WPForms, permitimos a duplicação de campos com um simples clique ou ação de arrastar e largar. Noutros casos, poderá ser necessário utilizar código personalizado ou plug-ins para adicionar esta funcionalidade.

Devo definir um limite para o número de vezes que um campo de formulário pode ser duplicado?

A definição de limites pode ajudar a manter a usabilidade do formulário e evitar que os utilizadores criem um número excessivo de campos, o que pode afetar o desempenho do formulário ou a gestão de dados.

Com o campo WPForms Repeater, pode definir um limite máximo para entradas duplicadas, de modo a controlar este aspeto do seu formulário.

Crie o seu formulário WordPress agora

A seguir, consulte este guia rápido e fácil

Já partilhei bastante informação sobre como permitir que os visitantes dupliquem campos, mas há ainda mais para aprender sobre a utilização do campo Repetidor. Esta funcionalidade oferece tanto, que há muito para cobrir.

Para aprender algumas dicas adicionais rápidas e fáceis - incluindo ideias de personalização não abordadas aqui - não se esqueça de dar uma vista de olhos no nosso tutorial do campo Repetidor.

Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.

Divulgação: O nosso conteúdo é apoiado pelos leitores. Isso significa que se você clicar em alguns de nossos links, podemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso é importante e como você pode nos apoiar.

Kacie Cooper

Kacie é uma escritora e criadora de modelos para WPForms. Ela tem blogado no WordPress e escrito sobre ele desde 2016.Saiba mais

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.

Adicionar um comentário

Ficamos satisfeitos por ter escolhido deixar um comentário. Tenha em atenção que todos os comentários são moderados de acordo com a nossa política de privacidade e que todas as hiperligações são nofollow. NÃO utilize palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e os Termos de Serviço da Cloudflare.