Como Criar um Formulário de Acordeão no WordPress

Você está procurando uma maneira simples de adicionar um design de formulário de acordeão ao seu site WordPress?

Formulários de acordeão oferecem uma maneira intuitiva e acessível de apresentar dados complexos, mantendo uma aparência limpa e organizada.

Neste artigo, mostrarei a maneira mais fácil de projetar um formulário de acordeão para impulsionar a funcionalidade e a experiência do usuário do seu site.

Crie Seu Formulário de Acordeão WordPress Agora! 🙂

Como Criar um Formulário de Acordeão no WordPress

Para criar um formulário com design de acordeão no WordPress, você pode contar com a simplicidade e funcionalidade do WPForms. Siga os passos abaixo para começar:

1. Instalar e Ativar o WPForms

A primeira coisa que faremos é instalar e ativar o WPForms, que é um plugin construtor de formulários avançado e fácil de usar para criar todos os tipos de formulários.

Ele vem com mais de 2.100 modelos de formulários WordPress e uma tonelada de recursos para impulsionar a funcionalidade do seu site.

Para começar, acesse o WPForms e registre-se para obter uma conta. Observe que para este tutorial, usaremos uma licença Pro, mas você pode usar qualquer nível de licença que desejar.

Precisa de ajuda para instalar o WPForms no seu site? Confira este tutorial sobre como instalar plugins do WordPress. Assim que tiver o plugin instalado, não se esqueça de ativá-lo!

Depois de concluir essa etapa, vamos instalar o WPCode e adicionar o trecho de código que completa o estilo do acordeão.

2. Adicione o Trecho de Código do Acordeão

Para fazer a mágica do formulário de acordeão funcionar, precisamos instalar o plugin WPCode, que funciona com o WPForms. Certifique-se de completar ambas as partes desta etapa: instalar o WPCode e adicionar o trecho de código do acordeão.

Ao instalar o plugin WPCode no WordPress, você terá acesso a uma biblioteca especial de trechos de código apenas para usuários do WPForms. Não se esqueça de ativar o plugin depois de instalá-lo!

Após instalar o WPCode do repositório de plugins do WordPress, retorne ao WPForms. Agora ativaremos um trecho de código no WPForms.

No painel do seu WordPress, navegue até WPForms » Ferramentas na barra lateral de navegação esquerda. Nessa página, selecione a aba Trechos de Código.

Observe que se você não tiver o WPCode instalado, não verá a opção Trechos de Código. Role ou use o recurso de pesquisa para localizar o trecho Accordion Template Helper.

Clique no botão Instalar Trecho.

Após clicar para instalá-lo, uma página mostrando o trecho de código será aberta. A única coisa que você precisa fazer nesta página é ativar o trecho e clicar em Atualizar.

Agora você está pronto para criar seu formulário!

3. Crie um Novo Formulário WordPress

No painel de administração do seu WordPress, navegue até WPForms e clique em Adicionar Novo na lista de opções.

Em seguida, dê um nome ao seu formulário. Você pode selecionar um modelo existente com base em seus requisitos específicos, mas para nossos propósitos neste tutorial, vamos começar com um formulário em branco. Isso lhe dará uma ideia melhor de como criar o formato de acordeão.

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.

No painel direito, você verá uma prévia editável do seu formulário. Se você selecionou um formulário em branco, não se preocupe que não haja nada para começar. Você arrastará e soltará seus elementos de formulário lá, e ele não ficará em branco por muito tempo!

Construa seu formulário usando divisores de seção

Ao começar a construir seu formulário, pense em como você deseja agrupar as informações. Ou seja, quais informações você deseja que sejam incluídas no menu suspenso quando o acordeão do formulário for aberto?

Para cada uma dessas seções, você precisa adicionar um campo divisor de seção. Nomeie o campo como quiser que essa seção de informações seja chamada. Nosso exemplo é um formulário de inscrição, então vamos começar com informações de contato no topo.

Uma vez que o divisor de seção esteja no lugar, você pode arrastar e soltar todos os elementos de formulário desejados abaixo dele da maneira que quiser.

Adicionar quebras de página

Depois que todos os seus campos estiverem no lugar, adicione um campo Quebra de Página na parte inferior de cada uma de suas seções de formulário.

Observação: ao adicionar a quebra de página inicial, clique nela para abrir as opções do campo. No lado esquerdo, você verá um menu suspenso onde pode fazer alterações no indicador de progresso. Selecione Nenhum. Você só precisa fazer isso uma vez por formulário.

Se você pular esta etapa, o acordeão ainda funcionará, mas haverá uma barra de progresso inativa na parte superior do formulário quando ele estiver ativo. Após adicionar a quebra de página, repita o processo para quantas seções seu formulário tiver.

Se você pré-visualizar agora, parecerá um formulário de várias páginas e não um acordeão.  Não se preocupe; estamos prestes a adicionar o ingrediente mágico: uma classe CSS!

4. Adicione a Classe CSS ao Seu Formulário

Neste ponto, você deve ter todo o seu formulário criado. Cada seção do seu formulário deve começar com um divisor de seção e terminar com uma quebra de página. Essas seções são o que se tornarão os menus suspensos no acordeão.

Você já ativou o snippet de código antes de iniciar o formulário. Há apenas uma coisa super fácil a fazer. Você precisa adicionar a classe CSS que unirá tudo.

Primeiro, salve seu formulário. Com o construtor de formulários ainda aberto, navegue até a opção Configurações no menu esquerdo. Ele será definido por padrão na página Geral. Role até o final e clique em Avançado.

Em seguida, insira wpf-accordion-form no campo Classe CSS do Formulário. Após inserir esse código, clique no botão Salvar. Enquanto estivermos nas configurações, vamos atualizar as notificações e confirmações do nosso formulário.

5. Configure Notificações e Confirmações

É crucial configurar as mensagens e notificações que aparecerão após um usuário preencher e enviar o formulário. Isso é fácil de fazer. Navegue até a aba Configurações e selecione Notificações.

Vá para WPForms » Pagamentos e clique na guia Cupons para ver seu resumo de cupons para transações feitas via WPForms.

Em seguida, na guia Configurações, selecione Confirmações para modificar a mensagem que seus clientes receberão ao preencher o formulário.

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

Publique Seu Formulário de Acordeão

Depois de terminar de atualizar as confirmações e notificações do seu formulário, você está pronto para publicar! Existem diferentes maneiras de incorporar um formulário no WordPress.

Vamos usar o botão de incorporação para o nosso tutorial, mas se você quiser tentar outra maneira, confira nosso post sobre as 3 maneiras de incorporar um formulário no seu site WordPress.

Com seu formulário aberto no construtor de formulários, basta clicar no botão Incorporar no canto superior direito. Uma janela modal perguntará se você deseja incorporar o formulário em uma página existente ou criar uma nova página.

Se você quiser selecionar uma página existente, poderá escolher qual. Se você criar uma nova página, será solicitado que dê um nome a ela.

Depois de fazer sua escolha, seu formulário será aberto no WordPress, como um rascunho da página que você selecionou ou criou. Se ainda parecer um formulário de várias páginas aqui, não se preocupe. Clique para visualizar a página e você deverá ver seu formulário em acordeão.

Agora você está pronto para publicar sua página e divulgar seu formulário em acordeão para o mundo. Depois de publicar o formulário em acordeão, tudo o que resta a fazer é garantir que ele funcione como planejado testando o formulário incorporado.

Perguntas frequentes sobre como projetar um formulário em acordeão no WordPress

Criar formulários em acordeão é um tópico popular de usabilidade entre nossos leitores. Aqui estão algumas respostas rápidas para algumas das perguntas mais frequentes:

O que é um formulário em acordeão?

Um formulário em acordeão é um formulário com várias seções, onde cada seção pode ser expandida ou recolhida clicando nos cabeçalhos das seções.

Em vez de mostrar todos os campos de uma vez (o que pode ser esmagador para formulários longos), os formulários em acordeão revelam uma seção por vez, tornando os formulários complexos mais gerenciáveis.

Os usuários basicamente clicam nas seções sequencialmente, semelhante a abas ou formulários de várias páginas, mas tudo dentro de uma única página.

Como crio um formulário em acordeão no WordPress?

Instale o WPForms Pro e o plugin WPCode. No WPCode, ative o snippet Accordion Template Helper.

Em seguida, crie seu formulário no WPForms, organize os campos em seções usando campos Section Divider, adicione campos Page Break após cada seção e adicione a classe CSS wpf-accordion-form nas configurações Advanced do seu formulário.

A estilização do acordeão será aplicada automaticamente ao seu formulário.

Qual é a diferença entre formulários em acordeão e formulários de várias páginas?

Formulários em acordeão mostram todas as seções em uma página com funcionalidade de expandir/recolher, permitindo que os usuários alternem facilmente entre as seções e vejam o progresso geral rapidamente.

Formulários de várias páginas exibem uma seção por vez em páginas separadas com navegação para frente/para trás. Formulários em acordeão funcionam melhor quando os usuários precisam consultar seções anteriores, enquanto formulários de várias páginas reduzem a carga cognitiva para formulários muito longos, mostrando apenas os campos relevantes.

Quando devo usar um design de formulário em acordeão?

Use formulários em acordeão para candidaturas, registros detalhados ou pesquisas com mais de 15 campos organizados em 4-7 seções lógicas.

Eles são perfeitos para candidaturas de emprego (informações de contato, histórico de trabalho, referências), registros de eventos (detalhes do participante, preferências de refeição, pagamento) ou formulários de admissão abrangentes.

Evite o design de acordeão para formulários de contato simples de 5 campos, onde as seções recolhíveis adicionam complexidade desnecessária.

Como adiciono um acordeão ao meu site WordPress?

Para formulários de acordeão especificamente, use o WPForms com o trecho de código de acordeão, conforme descrito neste guia.

Para conteúdo de acordeão (como FAQs), use um plugin de acordeão dedicado ou o módulo de acordeão do seu construtor de páginas. O método de acordeão do WPForms só funciona para formulários, não para conteúdo geral da página.

Posso usar formulários de acordeão no WPForms Lite?

A técnica de formulário de acordeão funciona com qualquer nível de licença do WPForms, incluindo o Lite, desde que você tenha o plugin WPCode instalado e o trecho Accordion Template Helper ativado.

No entanto, o WPForms Pro oferece acesso a recursos mais avançados, como lógica condicional e integração de pagamentos, que aprimoram significativamente os formulários de acordeão.

Quais são as melhores práticas para rótulos de formulários de acordeão?

Use títulos de seção claros e descritivos que informem exatamente aos usuários quais informações aquela seção contém. Bons exemplos: “Suas Informações de Contato”, “Histórico Profissional”, “Formação Acadêmica”.

Evite rótulos vagos como “Seção 1” ou “Detalhes”. Torne os títulos das seções escaneáveis para que os usuários possam encontrar e expandir rapidamente a seção que precisam revisar ou editar.

Formulários de acordeão funcionam em dispositivos móveis?

Sim, formulários de acordeão funcionam em dispositivos móveis e, na verdade, melhoram a experiência do usuário móvel para formulários longos.

Em vez de rolar mais de 30 campos em uma tela pequena, os usuários veem seções recolhíveis que podem expandir uma de cada vez.

No entanto, sempre teste seu formulário de acordeão em dispositivos móveis reais para garantir que as seções se expandam suavemente e não exijam rolagem excessiva dentro de cada seção.

Em seguida, aprenda como exigir um endereço de e-mail para downloads de arquivos

Não seria ótimo exigir que os usuários enviem seus endereços de e-mail antes de baixar um arquivo do seu site WordPress? Aprenda como incentivar os usuários a compartilharem seus endereços de e-mail para baixar um arquivo do seu site WordPress.

Crie Seu Formulário de Acordeão Agora! :)

Pronto para criar 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 uma garantia de devolução do dinheiro em 14 dias.

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