Como Criar um Formulário Acordeão no WordPress

Está à procura de uma forma simples de adicionar um design de formulário acordeão ao seu site WordPress?

Os formulários acordeão oferecem uma forma intuitiva e acessível de apresentar dados complexos, mantendo um aspeto limpo e organizado.

Neste artigo, vou mostrar-lhe a forma mais fácil de criar um formulário acordeão para impulsionar a funcionalidade e a experiência do utilizador do seu site.

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

Como Criar um Formulário Acordeão no WordPress

Para criar um formulário com design de acordeão no WordPress, 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 vamos fazer é 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.

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

Para começar, aceda ao WPForms e registe-se para obter uma conta. Por favor, note que para este tutorial, usaremos uma licença Pro, mas pode usar qualquer nível de licença que desejar.

Precisa de ajuda para instalar o WPForms no seu website? Consulte este tutorial sobre como instalar plugins WordPress. Assim que tiver o plugin instalado, não se esqueça de o ativar!

Depois de terminar essa etapa, vamos instalar o WPCode e adicionar o trecho de código que faz o estilo do acordeão ficar completo.

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

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

Quando instalar o plugin WPCode no WordPress, terá acesso a uma biblioteca especial de trechos de código apenas para utilizadores do WPForms. Não se esqueça de ativar o plugin depois de o ter instalado!

Após instalar o WPCode a partir do repositório de plugins do WordPress, regresse ao WPForms. Agora vamos ativar um trecho de código no WPForms.

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

Note que se não tiver o WPCode instalado, não verá a opção Trechos de Código. Percorra ou use a funcionalidade de pesquisa para localizar o trecho Accordion Template Helper.

Clique no botão Instalar Trecho.

Após clicar para o instalar, abrirá uma página mostrando o trecho de código. A única coisa que precisa de fazer nesta página é ativar o trecho e clicar em Atualizar.

Agora está pronto para criar o seu formulário!

3. Criar um Novo Formulário WordPress

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

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

Será agora direcionado para o ecrã Campos, onde os campos disponíveis aparecem no painel esquerdo. Aqueles a que tem acesso dependerão do seu nível de licença.

No painel direito, verá uma pré-visualização editável do seu formulário. Se selecionou um formulário em branco, não se preocupe que não haja nada para começar. Arrastará e largará os seus elementos de formulário lá, e não ficará em branco por muito tempo!

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

Ao começar a construir o seu formulário, pense em como quer agrupar a informação. Ou seja, que informação quer que seja incluída no menu suspenso quando o acordeão do formulário for aberto?

Para cada uma dessas secções, precisa de adicionar um campo divisor de secção. Nomeie o campo como quiser que essa secção de informação seja chamada. O nosso exemplo é um formulário de candidatura, por isso vamos começar com informações de contacto no topo.

Uma vez que tenha o divisor de secção no lugar, pode arrastar e largar todos os elementos de formulário desejados abaixo dele da maneira que quiser.

Adicionar quebras de página

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

Nota: ao adicionar a quebra de página inicial, clique nela para abrir as opções do campo. No lado esquerdo, verá um menu suspenso onde pode fazer alterações ao indicador de progresso. Selecione Nenhum. Só precisa de fazer isto uma vez por formulário.

Se falhar este passo, o acordeão ainda funcionará, mas haverá uma barra de progresso inativa na parte superior do formulário quando estiver ativo. Após adicionar a quebra de página, repita o processo para tantas secções quantas o seu formulário tiver.

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

4. Adicionar a Classe CSS ao Seu Formulário

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

Já ativou o snippet de código antes de iniciar o formulário. Resta apenas uma coisa super fácil a fazer. Tem de adicionar a classe CSS que irá juntar tudo.

Primeiro, guarde o seu formulário. Com o construtor de formulários ainda aberto, navegue até à opção Definições no menu esquerdo. Irá abrir por defeito na página Geral. Percorra até ao fim e clique em Avançadas.

Em seguida, introduza wpf-accordion-form no campo Classe CSS do Formulário. Depois de introduzir esse código, clique no botão Guardar. Enquanto estamos nas definições, vamos atualizar as notificações e confirmações do nosso formulário.

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

É crucial configurar as mensagens e notificações que aparecerão depois de um utilizador preencher e submeter o formulário. Isto é fácil de fazer. Navegue até ao separador Definições e selecione Notificações.

Os administradores receberão alertas automaticamente. No entanto, o título, o corpo e a lista de destinatários do e-mail podem ser modificados, se necessário.

Em seguida, no separador Definições, selecione Confirmações para modificar a mensagem que os seus clientes receberão ao preencher o formulário.

Também pode utilizar a definição Tipo de Confirmação no WPForms para exibir uma mensagem, ligar para outra página ou redirecionar o utilizador.

Publique o Seu Formulário de Acordeão

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

Vamos usar o botão de incorporação para o nosso tutorial, mas se quiser tentar outra forma, consulte a nossa publicação sobre as 3 formas de incorporar um formulário no seu site WordPress.

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

Se pretender selecionar uma página existente, poderá escolher qual. Se criar uma nova página, ser-lhe-á pedido que lhe dê um nome.

Depois de fazer a sua escolha, o seu formulário abrir-se-á no WordPress, num rascunho da página que selecionou ou criou. Se ainda parecer um formulário de várias páginas aqui, não se preocupe. Clique para pré-visualizar a página e deverá ver o seu formulário de acordeão.

Agora está pronto para publicar a sua página e divulgar o seu formulário de acordeão. Depois de publicar o formulário de acordeão, tudo o que resta fazer é garantir que funciona como planeado, testando o formulário incorporado.

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

A criação de formulários de acordeão é um tópico popular de usabilidade entre os nossos leitores. Aqui ficam algumas respostas rápidas a algumas das perguntas mais frequentes:

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

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

Em vez de mostrar todos os campos de uma vez (o que pode ser avassalador para formulários longos), os formulários de acordeão revelam uma secção de cada vez, tornando os formulários complexos mais fáceis de gerir.

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

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

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

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

O estilo de acordeão será aplicado automaticamente ao seu formulário.

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

Os formulários de acordeão mostram todas as secções numa página com funcionalidade de expandir/recolher, permitindo aos utilizadores saltar facilmente entre secções e ver o progresso geral de relance.

Os formulários de várias páginas exibem uma secção de cada vez em páginas separadas com navegação para a frente/para trás. Os formulários de acordeão funcionam melhor quando os utilizadores precisam de consultar secções anteriores, enquanto os 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 de acordeão?

Use formulários de acordeão para candidaturas, registos detalhados ou inquéritos com mais de 15 campos organizados em 4-7 secções lógicas.

São perfeitos para candidaturas de emprego (informações de contacto, histórico de trabalho, referências), registos 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 contacto simples de 5 campos, onde as secçõ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 tenha o plugin WPCode instalado e o trecho Accordion Template Helper ativado.

No entanto, o WPForms Pro dá-lhe acesso a funcionalidades mais avançadas, como lógica condicional e integração de pagamentos, que melhoram 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 secção claros e descritivos que informem exatamente os utilizadores sobre que informação essa secção contém. Bons exemplos: “As suas informações de contacto”, “Histórico profissional”, “Formação académica”.

Evite rótulos vagos como “Secção 1” ou “Detalhes”. Torne os títulos das secções fáceis de ler, para que os utilizadores possam encontrar e expandir rapidamente a secção que precisam de rever ou editar.

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

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

Em vez de percorrer mais de 30 campos num ecrã pequeno, os utilizadores veem secções recolhíveis que podem expandir uma de cada vez.

No entanto, teste sempre o seu formulário de acordeão em dispositivos móveis reais para garantir que as secções expandem suavemente e não exigem uma deslocação excessiva dentro de cada secção.

Em seguida, Saiba Como Exigir um Endereço de Email para Downloads de Ficheiros

Não seria ótimo exigir que os utilizadores enviem os seus endereços de e-mail antes de descarregar um ficheiro do seu site WordPress? Saiba como incentivar os utilizadores a partilhar os seus endereços de e-mail para descarregar um ficheiro do seu site WordPress.

Crie o seu formulário de acordeão agora! :)

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

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