Como adicionar campos de repetidor em seus formulários do WordPress?

Publicados: 2022-01-24

Se você precisa de um formulário personalizado para seus usuários, aprender como adicionar um campo repetidor do WordPress ao formulário é obrigatório.

Ter um campo repetidor significa que os usuários podem criar quantos subcampos desejarem e inserir todos os dados necessários. E, por sua vez, você obtém dados personalizados de cada um de seus usuários, permitindo analisá-los melhor.

Um plugin como o Everest Forms ajudará você a adicionar um campo repetidor nos formulários do WordPress sem problemas. E mostraremos como no tutorial passo a passo abaixo.

Mas antes disso, vamos entender os principais motivos pelos quais você deve considerar o uso de campos repetíveis em seus formulários.

Índice

Por que você precisa de um campo repetível em seus formulários?

Os formulários podem ficar longos e complexos muito rapidamente quando você tenta extrair informações detalhadas de seus usuários.

Suponha que você precise conhecer a formação educacional completa de seus usuários. Nesse caso, exibir campos para cada possível qualificação e grau que eles possam ter irá desordenar seu formulário.

Não seria muito melhor usar um campo repetidor do WordPress, onde o usuário pode criar quantos campos precisar e inserir seus dados educacionais? Isso fornece uma experiência de formulário personalizada para os usuários enquanto você recebe todas as informações necessárias.

Portanto, usando esses campos repetíveis de formulário do WordPress, você pode:

  • Reduza a taxa de abandono de formulários causada por formulários longos e complexos.
  • Receba informações precisas de seus usuários.

É por isso que você deve adicionar um campo repetidor do WordPress sempre que necessário em seus formulários.

Com isso dito, vamos ver nosso guia sobre como você pode criar um campo repetidor no WordPress.


Como adicionar campos de repetidor em seus formulários do WordPress?

Recomendamos usar o Everest Forms para adicionar um campo repetidor nos formulários do WordPress, assim como fizemos neste tutorial.

Plugin WordPress Everest Forms

É um dos plugins de criação de formulários mais populares no WordPress, acumulando mais de 100.000 instalações ativas. E tudo isso graças ao seu construtor de formulários fácil de arrastar e soltar e opções de personalização.

Sem mencionar os recursos avançados incluídos em complementos premium que podem ser usados ​​para estender a funcionalidade do plug-in. Portanto, os campos repetíveis do formulário do WordPress são apenas um de seus muitos recursos excelentes.

Adicionar campos de repetição em seus formulários do WordPress é muito fácil quando você tem um plugin como o Everest Forms em mãos. Você só precisa seguir as etapas explicadas abaixo com precisão.

Vamos começar!

1. Instale e ative o plugin gratuito Everest Forms

A primeira coisa que você deve fazer é instalar e ativar a versão gratuita do Everest Forms.

Para fazer isso, faça login no painel do seu site WordPress e abra Plugins >> Add New .

Plugins para adicionar nova guia

Digite “Everest Forms” na barra de pesquisa e o plug-in aparecerá nos resultados da pesquisa. Pressione o botão Instalar agora para iniciar o processo de instalação.

Instale o plugin gratuito Everest Forms

Em seguida, clique no botão Ativar para concluir a instalação. Agora, você tem a versão gratuita do plugin Everest Forms em seu site.

Ative o plugin gratuito Everest Forms

2. Baixe e instale o complemento de campo de repetidor premium

O plugin gratuito Everest Forms é mais que suficiente para criar contatos simples e outros tipos de formulários. No entanto, para criar especificamente um formulário com um campo repetidor do WordPress, você precisará da versão premium do Everest Forms. Ele vem com o complemento Campo de Repetidor, que permite adicionar quantos campos de repetidor você quiser em seu formulário.

É por isso que você deve primeiro comprar um plano Professional ou Agency para Everest Forms para usar este complemento. Basta acessar a página oficial de preços e comprar qualquer um dos dois planos adequados para você.

Planos de preços do Everest Forms

Em seguida, crie sua conta e entre nela. Você será levado ao painel da sua conta, onde todos os complementos disponíveis em seu plano estão listados na seção Downloads .

Baixar complementos

Os que você precisa são apenas os complementos Everest Forms Pro e Repeater Field . Basta baixar os dois e eles serão salvos como arquivos ZIP no seu dispositivo.

Agora, volte ao painel do WordPress e abra Plugins >> Add New .

Agora você pode fazer upload dos arquivos para instalá-los um por um. Certifique-se de instalar o complemento Pro antes de instalar o complemento Repeater Field . Caso contrário, você pode encontrar erros graves.

Então, clique no botão Upload Plugin e escolha o arquivo Everest Forms Pro primeiro.

Carregar complemento Pro

Em seguida, pressione Instalar agora e Ativar plug -in para concluir a instalação.

Ativar complemento Pro

Repita o mesmo processo com o add-on Repeater Field .

Agora, a página de Plugins Instalados terá estes 3 plugins: Everest Forms , Everest Forms (Pro) e Everest Forms Repeater Field .

Digite o aviso da chave de licença

Você pode ver um aviso no topo desta página informando para inserir a chave de licença para o complemento Everest Forms (Pro) . Você encontrará essa chave na guia Chaves de licença do painel da sua conta.

Chave de licença do Everest Forms

Basta copiar a chave, colá-la no campo em Everest Forms (Pro) e pressionar enter.

Com isso, você está pronto para começar a construir um formulário com campos repetíveis.


3. Crie um novo formulário com campo de repetidor

Comece navegando até Everest Forms >> Add New . Esta página oferece a opção de criar um formulário totalmente novo ou personalizar modelos pré-fabricados.

Adicionar novos formulários do Everest

Everest Forms vem com vários modelos iniciais para diferentes tipos de formulários. Se estiver com pouco tempo, você pode criar formulários de contato simples, formulários de solicitação de licença, formulários de consulta médica, formulários de solicitação de emprego etc. com esses modelos.

Novo formulário começar do zero

Mas neste tutorial, mostraremos como criar um novo formulário do zero e adicionar um campo repetidor do WordPress a ele. Então, clique na opção Iniciar do zero .

Em seguida, dê ao seu formulário um nome simples e lógico. Por exemplo, você pode intitulá-lo como 'Formulário de contato para visitantes'.

Dê o nome do formulário

Depois de clicar no botão, você será levado ao construtor de formulários que se parece com isso.

Interface do Construtor de Campos Repetíveis de Formulários WordPress

À esquerda estão todos os campos de formulário disponíveis para uso e suas opções de campo. À direita é onde você cria o formulário adicionando linhas e colocando campos nelas. Tudo o que você precisa fazer é arrastar os campos da esquerda para a linha da direita.

Campos de arrastar e soltar para campos repetíveis de formulário do WordPress

Quando precisar adicionar outra linha, clique em Adicionar linha . Isso cria uma nova linha para campos regulares, não campos repetíveis.

Para este último, você precisa pressionar o botão Add Repeater Row .

Adicionar nova linha de campo do repetidor do WordPress

Isso cria uma linha de repetidor onde você pode adicionar campos como costuma fazer. A única diferença é que esta linha de campo agora aparecerá repetível em seu formulário.

Adicionar um campo de repetidor no WordPress

Continue adicionando os campos necessários até que o formulário esteja completo e clique em Salvar quando terminar. Você pode ver a aparência do formulário no frontend com o recurso de visualização .

Salvar e visualizar o formulário de campo do repetidor

4. Personalize e defina as configurações do formulário

Em seguida, você precisa personalizar todos os campos que adicionou ao seu formulário. Para fazer isso, clique no campo que deseja editar e suas Opções de campo aparecerão à esquerda.

Opções gerais de campo Campo repetidor do WordPress

Você pode editar o Label , Meta Key e Description a partir daqui. Você também pode tornar um campo obrigatório para os usuários enviarem o formulário. Além dessas opções principais, o plugin também vem com opções de personalização específicas para diferentes campos.

Além disso, o Everest Forms oferece opções avançadas como Placeholder Text , Default Value , CSS Classes , Enable Autopopulate e muito mais.

Opções avançadas para campos regulares

Da mesma forma, você pode habilitar a lógica condicional nos campos para uma experiência de preenchimento de formulário personalizada.

Você também deve editar a linha do repetidor clicando em Campos do Repetidor antes de personalizar os campos dentro dela.

Opções de linha de campo do repetidor do WordPress

Além das opções gerais, você obtém as seguintes opções avançadas para a linha do repetidor:

  • Ocultar campo do repetidor: Oculte ou mostre o campo do repetidor na visualização do frontend.
  • Limite de repetição: Defina um limite de repetição para o campo do repetidor. Deixar o Limite de repetição vazio significa permitir que os usuários adicionem campos de repetidor um número infinito de vezes.
  • Adicionar novo rótulo: altere o rótulo do botão Adicionar .
  • Remover Rótulo: Altere o rótulo do botão Remover .
  • Ocultar Rótulo: Permite ocultar o rótulo do campo do formulário.
  • Classes CSS: Use classes CSS personalizadas para os campos do repetidor.
Opções avançadas para o campo repetidor do WordPress

Isso não é tudo. Há mais opções de configuração na guia Configurações do construtor de formulários.

Configuração das Configurações Gerais

Na seção Geral , você pode alterar o Nome do formulário , Descrição do formulário , Design do layout , Texto do botão Enviar , Mensagem desabilitada do formulário e muito mais. Melhor ainda, você habilita o anti-spam, desabilita o armazenamento de entradas, permite o envio de formulários ajax, etc., para o formulário.

Você também pode criar e editar modelos de e- mail na seção E-mail para administradores e usuários. Você pode até aplicar lógica condicional para quando quiser enviar ou não o email em questão.

Configuração de configurações de e-mail

Depois de concluir as alterações necessárias, não se esqueça de clicar no botão Salvar .

Salvar formulário após alterações

Agora no frontend, um usuário que preencher o formulário poderá fornecer suas informações completas através do campo repetidor do WordPress. Eles só precisam clicar no botão Adicionar e um novo conjunto dos mesmos campos aparecerá no formulário. Eles também podem remover a linha de que não precisam.

Adicionar Remover Linha de Campo

5. Coloque o formulário no seu site WordPress

O formulário de contato personalizado com campos repetíveis agora está pronto para ser colocado em seu site WordPress.

Você pode fazer isso de duas maneiras fáceis. Basta copiar o código de acesso do formulário na parte superior do construtor de formulários e abrir a página ou postagem na qual deseja exibir o formulário.

Copiar código de acesso do formulário no Builder

Em seguida, clique no ícone + e adicione o bloco Shortcode .

Adicionar bloco de código de acesso

Cole o shortcode que você copiou aqui e clique em Atualizar .

Colar Shortcode e Atualizar

Alternativamente, você pode procurar o bloco Everest Forms e escolher o formulário no menu suspenso.

Use o bloco Everest Forms

Por fim, clique em Atualizar e pronto! Seu formulário com o campo repetidor do WordPress agora está ativo em seu site.


Empacotando

Os campos repetíveis são um recurso bastante útil quando você precisa de dados personalizados sobre seus usuários. E o plugin Everest Forms torna mais fácil do que nunca criar formulários personalizados com campos de repetição para colocar em seu site.

Tudo o que você precisa é do complemento Repeater Field e deste tutorial abrangente.

No entanto, esta foi apenas uma prévia das vastas possibilidades que vêm com o Everest Forms. Por exemplo, você pode enviar dados de formulários de contato para o Planilhas Google, criar formulários de pesquisa e até alterar a cor do botão de envio.

Saiba mais sobre o Everest Forms em nosso blog repleto de conteúdo WordPress. Além disso, siga-nos no Facebook e Twitter para ficar atualizado.