Como fazer um formulário com um campo repetidor em WPForms

Quer saber como incorporar um campo repetidor WPForms em seus formulários online para capturar mais dados para cada envio de formulário?

Os campos repetidores em formulários permitem que os usuários insiram vários conjuntos de dados semelhantes, ao mesmo tempo que tornam os formulários mais intuitivos e fáceis de usar.

Neste artigo, mostraremos a maneira mais fácil de projetar um campo repetidor para WPForms para aumentar a funcionalidade do seu site e a experiência do usuário.

Por que usar um campo repetidor WPForms?

A beleza do campo repetidor WPForms reside em sua capacidade de agilizar a coleta de dados e, ao mesmo tempo, oferecer vários outros benefícios, como:

• Design Centrado no Usuário: Ao introduzir campos repetidores, você capacita os usuários a ditar a extensão de suas entradas. É um aceno sutil à autonomia do usuário e aprimora a experiência geral do usuário.
• Flexibilidade no design de formulários: nem todos os formulários têm tamanho único. Com campos repetidores, você pode atender a vários cenários – seja uma entrada única ou entradas múltiplas, garantindo que seu formulário se adapte a diversos requisitos.
• Estruturação de dados consistente: Um dos desafios com vários campos são os dados inconsistentes. Os dados permanecem estruturados e uniformes com campos repetidores, simplificando o processamento e a análise de back-end.
• Comprimento reduzido do formulário: em vez de ter um formulário longo e intimidante com vários campos, os campos repetidores fornecem uma aparência mais limpa, garantindo que os usuários não fiquem sobrecarregados à primeira vista.

Quer você seja um empresário que busca uma integração simplificada do cliente ou um blogueiro interessado na coleta eficiente de dados, o campo repetidor WPForms é inestimável. Vamos mergulhar nas etapas para configurá-lo!

Como fazer um formulário com um campo repetidor em WPForms

Criar um formulário com um campo repetidor em WPForms é bastante fácil e requer apenas um conhecimento básico de lógica condicional. Siga as etapas abaixo para começar:

1. Assine e instale o WPForms Pro

Quando se trata de criar formulários exclusivos, WPForms é a melhor opção. Você pode usá-lo para criar e publicar qualquer tipo de formulário no WordPress. O plugin de formulário vem com mais de 1.000 modelos de formulário, que podem ser usados ​​para criar formulários de campo repetidor.

Como usaremos lógica condicional para configurar os campos repetidores em seu formulário para este guia, você deve assinar o WPForms Pro, que também fornece acesso a integrações premium, complementos e vários recursos úteis.

Após adquirir uma assinatura do WPForms Pro, você deve instalar e ativar o plugin em seu site WordPress.

Agora vamos criar seu formulário!

2. Crie um novo formulário em branco

Vá para WPForms no painel de administração do WordPress e escolha Adicionar novo na lista de opções.

Em seguida, dê um nome ao seu formulário e escolha um modelo WPForms existente ou apenas configure um novo formulário com base em suas necessidades.

Neste tutorial, faremos um novo formulário para mostrar todos os passos essenciais para configurar o campo de repetição. Então, escolheremos a opção Criar Formulário em Branco .

Agora você será direcionado para a tela Campos , onde os campos disponíveis aparecem no painel esquerdo. Aqueles aos quais você tem acesso dependerão do seu nível de licença.

Você verá uma visualização editável do seu formulário no painel direito. Como selecionamos um formulário em branco, esta seção aparecerá vazia.

Use o construtor de formulários intuitivo do WPForms para adicionar, modificar e organizar facilmente campos personalizados para personalizar o formulário de acordo com sua preferência.

Para este tutorial, adicionaremos tipos de campos primários como Nome , Email e Telefone para obter as informações de um único usuário, ou seja, Registrante 1.

A seguir, orientaremos você nas etapas fáceis para criar um componente repetidor por meio de um campo suspenso e lógica condicional.

3. Adicione um campo suspenso com opções Sim/Não

Para adicionar o campo suspenso ao seu formulário, você pode clicar nele no painel esquerdo ou arrastar e soltar diretamente na visualização do formulário.

Depois disso, dê ao campo suspenso Etiqueta um nome como “Adicionar outro?” e então você pode adicionar opções simples de Sim/Não para Choices .

A seguir, repetiremos as mesmas etapas para adicionar os campos Nome , Email e Número de telefone abaixo do campo suspenso do Registrante 2.

Depois disso, adicionaremos outro campo suspenso com as mesmas opções Label e Yes/No em Choices para criar o efeito repetidor.

Isso permite criar um efeito em que cada conjunto subsequente de campos de registrante usa lógica condicional apenas para ser exibido se o usuário respondeu Sim para “Adicionar outro?”

Agora, precisamos aplicar a lógica condicional aos campos do formulário para que somente quando o usuário selecionar Sim no menu suspenso apareçam campos adicionais do registrante.

4. Aplique lógica condicional aos campos do formulário

Você pode fazer isso facilmente clicando em qualquer campo da visualização correta do formulário e navegando até a guia Smart Logic em Opções de campo .

No menu Smart Logic , marque a opção Habilitar lógica condicional para todos os campos do formulário abaixo de “Adicionar outro?” Campo suspenso que criamos anteriormente.

Em seguida, use a lógica condicional para mostrar o campo apenas se o campo suspenso , ou seja, “Adicionar outro?” eu digo “Sim”. Repita isso para todos os outros campos abaixo dele.

5. Habilite a lógica condicional para os campos suspensos

Para evitar que a pessoa que preenche o formulário adicione um terceiro registrante, a menos que tenha inserido as informações do Registrante 2, você precisará configurar a lógica condicional para o campo suspenso abaixo dele.

Para fazer isso, marque a opção Habilitar Lógica Condicional no campo suspenso abaixo dos campos Registrante 2 – Nome, Email e Telefone.

Em seguida, use a lógica condicional para Mostrar o campo somente se o campoRegistrante 2 – Email não estiver vazio .Isto criará o efeito de campo repetidor.

Você pode repetir as etapas acima quantas vezes quiser para obter inúmeras informações do registrante, que só serão exibidas se o usuário responder Sim para “Adicionar outro?”.

Em seguida, clique no botão Salvar no canto superior direito do construtor de formulários antes de prosseguir para garantir que nenhuma de suas alterações seja perdida.

Estamos quase lá! Agora, precisamos habilitar as notificações e confirmações do formulário que aparecem após o envio do formulário.

6. Habilite notificações e confirmações de formulário

Configurar as mensagens e notificações que aparecerão depois que o usuário preencher e enviar seu formulário de registro é crucial.

Este processo é simples. Selecione Notificações na guia Configurações na tela do Form Builder.

Os alertas serão enviados automaticamente aos administradores. No entanto, você pode configurar a lista de assunto, corpo e destinatários, se necessário.

A mensagem que seus consumidores verão após enviar o formulário poderá ser alterada escolhendo Confirmações na página Configurações .

Você também pode usar a configuração Tipo de confirmação em WPForms para exibir uma mensagem, vincular a outra página ou redirecionar o usuário.

Bom trabalho! Tudo o que resta fazer agora é publicar seu formulário em uma página nova ou existente para torná-lo público e pronto para receber envios.

8. Publique seu formulário com campos repetidores

Crie uma nova página da web ou postagem ou modifique uma existente. Depois disso, selecione o ícone WPForms clicando no botão Adicionar bloco .

Em seguida, escolha o design do formulário do campo repetidor no menu suspenso no bloco WPForms para adicioná-lo à sua página ou postagem.

Se você deseja personalizar a aparência do seu formulário, agora pode ser um bom momento para estilizá-lo usando o editor de blocos.

Se tudo parecer estar indo na direção certa, você pode tornar seu formulário público clicando no botão Atualizar ou Publicar .

Quando você terminar de publicar o formulário, a única coisa que resta a fazer é testar o formulário incorporado para garantir que funcione conforme esperado no frontend.

Mais perguntas sobre o campo repetidor do WPForms

A criação de formulários de campo repetidor é um tópico de interesse popular entre nossos leitores. Aqui estão algumas respostas rápidas para algumas das perguntas mais frequentes:

O que é um campo repetidor?

Um campo repetidor é uma ferramenta versátil, permitindo aos usuários adicionar dinamicamente vários conjuntos de campos idênticos em um formulário. Imagine-o como um botão “copiar” para um grupo de campos. Aumenta a flexibilidade ao inserir dados repetíveis, como registros múltiplos.

Como adiciono um campo repetidor no WordPress?

Normalmente, você precisaria de um plugin WordPress confiável para incorporar um campo repetidor. WPForms, um criador de formulários WordPress de primeira linha, pode ser a escolha ideal se você deseja adicionar um campo repetidor aos seus formulários, sem nenhum conhecimento de CSS ou codificação.

O que é um campo repetidor no WordPress?

Dentro do ecossistema WordPress, um campo repetidor permite criar um conjunto de subcampos que podem ser duplicados pelo usuário durante o preenchimento do formulário. Isto é especialmente útil quando o número de conjuntos de dados repetíveis não é predefinido.

A seguir, aprenda como criar um formulário acordeão no WordPress

Você está procurando uma maneira simples de adicionar um design de formulário sanfonado ao seu site WordPress? Confira nossa postagem sobre o método mais simples para criar um formulário sanfonado usando WPForms para aumentar a usabilidade e a experiência do usuário do seu site.

Crie seu formulário WordPress agora

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.