Como permitir que visitantes dupliquem campos de formulário

Muitas vezes, os usuários do seu formulário provavelmente desejam simplesmente duplicar os campos dos seus formulários. Campos para nomes extras, detalhes de contato, horas trabalhadas e assim por diante são fáceis de adicionar quando os usuários podem simplesmente repeti-los.

Agora, com o campo WPForms Repeater, os usuários do seu site podem fazer exatamente isso! Neste tutorial, mostrarei como modificar seus formulários para permitir campos duplicados em apenas 5 etapas.

Como permitir que visitantes dupliquem campos de formulário

Primeiro, obtenha WPForms

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

Então, primeiro obtenha o plugin WPForms!

1. Selecione ou crie seu formulário

O campo Repetidor é um ótimo recurso incluído nos formulários que você cria por meio de WPForms. Com ele, os usuários do seu formulário podem adicionar mais entradas ou duplicar blocos inteiros do formulário.

Mas você não precisa criar um formulário totalmente novo para começar a permitir que os usuários dupliquem campos.

Você já deve utilizar formulários em seu site que gostaria de modificar com o campo Repetidor. Basta clicar em Editar abaixo do formulário para o qual deseja abrir o construtor de formulários.

Mas, se precisar criar um novo formulário, você pode começar escolhendo entre milhares de modelos de formulário fornecidos na galeria WPForms.

Oferecemos uma ampla seleção de modelos de formulário que vêm com a funcionalidade de campo Repetidor integrada.

Ou você pode escolher um modelo de formulário diferente e adicionar rapidamente o campo Repetidor com o construtor de formulário.

E, como sempre, você mesmo pode construir seu formulário do zero, começando com um formulário em branco.

Crie seu formulário WordPress agora

2. Adicione o campo repetidor

Depois de selecionar e carregar seu formulário no construtor de formulários, você pode adicionar o campo Repetidor .

Você o verá entre os campos do lado esquerdo da tela.

Basta clicar no campo Repetidor, arrastá-lo para o formulário e soltá-lo onde desejar.

Então, como o campo Layout, o campo Repetidor permite que outros campos do seu formulário sejam adicionados a ele.

Então, quais campos pertencem à seção Campo repetidor? Os campos que você deseja permitir que os usuários do formulário dupliquem.

Em um formulário de inscrição de grupo, por exemplo, os usuários provavelmente gostariam de incluir vários nomes de participantes para inscrição ao mesmo tempo.

Antes de WPForms oferecer o campo Repetidor, você pode ter obstruído seu formulário com alguns campos de Nome que seu usuário * pode * precisar.

Ou você pode ter utilizado configurações de lógica condicional para incluir campos de Nome adicionais se o usuário quisesse incluir mais.

Seja qual for o caso, o campo Repetidor agora torna a duplicação de campos muito mais fácil para você e seus usuários de formulário!

3. Exibir linhas ou blocos

Agora, antes de prosseguirmos, dê uma olhada nas opções de exibição que são aplicadas ao campo Repetidor.

Você não apenas pode personalizar os campos na área do campo Repetidor para serem adicionados como Linhas únicas, mas também pode permitir que blocos inteiros de campos sejam duplicados.

Dica profissional : navegue até a guia Avançado para ocultar o rótulo do campo Repetidor como eu fiz.

Ao selecionar os campos na área Repetidor para serem exibidos como Linhas, os usuários do formulário duplicarão cada linha horizontal.

Como você 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 a serem repetidos juntos, que não cabem em apenas uma linha.

E com Blocos, os botões + adicionar ou – remover ficam abaixo de toda a seção de campos. Mais sobre esses botões mais tarde.

No meu exemplo abaixo, selecionei Blocos como forma de exibir meus campos repetíveis. Em seguida, incluí os campos na área do campo Repetidor que desejo que os usuários possam duplicar como uma seção.

Agora, quando os usuários do formulário adicionam outro participante, eles podem fornecer todas as informações solicitadas no formulário para cada bloco.

Dessa forma, os usuários do formulário podem duplicar seções inteiras do formulário de uma só vez.

4. Escolha um layout

A seguir, confira as diferentes maneiras de organizar o layout de seus campos repetíveis.

Você pode configurar seus campos em linhas únicas, colunas com espaçamento uniforme e colunas desiguais.

Se você tiver linhas repetíveis de nomes e idades de participantes, por exemplo, poderá escolher um Layout que posicione um espaço maior para o nome e um espaço menor para a idade.

Portanto, meu exemplo de colunas Linhas e Layout no construtor de formulário acima seria assim para um usuário de formulário:

Ou lembra daquele bloco que mostrei no final da etapa 3 com o nome do participante, informações de contato de emergência e outros campos?

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

Então, seria algo assim para o usuário:

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

Modificar esses aspectos do campo Repetidor apenas ajuda a manter tudo limpo e organizado em todo o formulário.

5. Personalize a visualização dos botões

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

Estes são os botões nos quais o usuário do formulário clicará para adicionar nomes, seções de registro ou quaisquer outros campos que você disponibilizou para duplicação.

Por padrão, esses botões exibem + ou – no final de cada linha, mas você pode personalizar esses ícones ao utilizar um bloco.

Como os botões estão alojados abaixo do Bloco, em vez de no final da Linha, permitir que ele se torne mais longo por meio da personalização ainda mantém as coisas visualmente organizadas.

Primeiro, selecione o tipo de botão .

As opções aqui incluem:

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

Se o seu botão exibir qualquer tipo de texto, você poderá personalizá-lo na próxima caixa. É aqui que você pode alterar o que o rótulo do botão lê.

Em um formulário de registro de grupo, por exemplo, você pode personalizar seu botão para “Adicionar Participante”.

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

Por padrão, esse limite é definido no mínimo 1 e no máximo 10. Isso significa que os usuários do formulário podem registrar até 10 participantes neste formulário.

Assim, ao aplicar as configurações mostradas acima, o botão em nosso formulário de registro de grupo ficaria assim para os usuários:

Como sempre, quando estiver satisfeito com seus campos personalizados e repetíveis, salve seu formulário para publicar quando estiver pronto.

E isso é tudo! Agora você sabe como permitir que os visitantes do site dupliquem campos em seus formulários.

Bônus: o campo repetidor em ação

Mostrei como usar a área do campo Repetidor em um formulário de registro de grupo, mas gostaria de compartilhar alguns outros bons exemplos desse recurso em ação.

Formulário de quadro de horários do funcionário

Primeiro, dê uma olhada neste quadro de horários de funcionários que oferecemos como modelo:

Os detalhes do funcionário são coletados primeiro, incluindo nome, e-mail do funcionário, ID do funcionário, além do total de horas da semana.

Os funcionários podem então inserir seus dias e horas específicas trabalhadas durante a semana, essencialmente usando este formulário como um quadro de horários semanal.

Ele utiliza blocos e colunas repetíveis que permitem aos usuários duplicar campos para o dia da semana em que trabalharam, juntamente com o horário de entrada e saída desse dia. Esses campos podem ser repetidos até 14 vezes ou em turnos duplos para uma semana.

Quer usar este formulário em seu site? Obtenha o modelo!

Formulário de lista de turma

Agora, confira esta lista de turmas que também oferecemos como modelo:

Ele começa reunindo as informações do professor para facilitar o acompanhamento de cada envio.

Então, com o campo Repetidor, os professores podem adicionar facilmente informações para cada aluno em sua lista, como série, aniversário ou quaisquer outros dados que queiram incluir para manutenção de registros.

Os professores podem usar esta lista para até 20 alunos. Ou, como sempre, este modelo de formulário é totalmente personalizável, portanto o número máximo de entradas permitidas pode ser modificado.

Gostou deste formulário? Obtenha o modelo!

Por que devo permitir que os visitantes dupliquem os campos do formulário?

É bom para os usuários do seu formulário! Permitir que os visitantes dupliquem os campos do formulário facilita muito o processo de preenchimento dos formulários, principalmente quando os usuários precisam inserir informações semelhantes ou repetitivas. Isso pode economizar o tempo dos visitantes do site e tornar a experiência de preenchimento de formulários mais conveniente e eficiente.

E é bom para você também! Quando os usuários podem duplicar campos de formulário, é mais fácil coletar e organizar dados para análise, porque pontos de dados semelhantes são agrupados e mais gerenciáveis.

Além disso, simplesmente mantém seu formulário organizado e visualmente atraente. Os visitantes do seu site não ficarão sobrecarregados com longas seções de campos vazios e você não terá que criar uma trilha complicada de regras lógicas condicionais para manter campos adicionais ocultos.

O Campo Repetidor é uma situação em que todos ganham!

Perguntas frequentes

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

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

Permitir que os visitantes dupliquem campos de formulário significa fornecer-lhes a opção de criar várias instâncias de um campo específico dentro de um formulário. Dessa forma, eles podem inserir informações semelhantes ou repetitivas com mais eficiência.

No WPForms, nos referimos a essas duplicatas como campos repetidores, pois 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 site?

Os métodos de implementação podem variar dependendo da plataforma ou das ferramentas que você está usando.

Quanto aos WPForms, habilitamos a duplicação de campos com um simples clique ou ação de arrastar e soltar. Em outros casos, pode ser necessário usar código personalizado ou plug-ins para adicionar essa funcionalidade.

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

Definir limites pode ajudar a manter a usabilidade do formulário e evitar que os usuários criem um número excessivo de campos, o que pode afetar o desempenho do formulário ou o gerenciamento de dados.

Com o campo WPForms Repeater, você pode definir um limite máximo para entradas duplicadas, para controlar esse aspecto do seu formulário.

Crie seu formulário WordPress agora

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

Compartilhei algumas informações sobre como permitir que visitantes dupliquem campos, mas há ainda mais para aprender sobre como usar o campo Repetidor. Esse recurso oferece muito, há muito o que abordar.

Para aprender algumas dicas adicionais rápidas e fáceis – incluindo ideias de personalização não abordadas aqui – dê uma olhada em nosso tutorial de campo Repetidor.

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

Se este artigo ajudou você, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos de WordPress.