Como criar um formulário de acordeão no WordPress

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

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

Crie seu formulário de acordeão do WordPress agora

Neste artigo, vamos mostrar-lhe a forma mais fácil de conceber um formulário acordeão para melhorar a funcionalidade do seu sítio Web e a experiência do utilizador.

Como criar um formulário de acordeão no WordPress

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

O WPForms é um plugin de criação de formulários avançado e fácil de usar para criar todos os tipos de formulários. Ele vem com mais de 2.000 modelos de formulários do WordPress e uma tonelada de recursos para aumentar a funcionalidade do seu site.

Para começar, vá até WPForms e registe-se para a conta. Por favor, note que para este tutorial, vamos usar uma licença Pro, mas você pode usar qualquer nível de licença que você gosta.

Precisa de ajuda para instalar o WPForms no seu site? Confira este tutorial sobre como instalar plugins do WordPress.

Depois de ter instalado o plugin, não se esqueça de o ativar!

Uma vez terminado esse passo, vamos instalar o WPCode e adicionar o fragmento de código que faz com que o estilo acordeão se torne realidade.

2. Instalar o WPCode e adicionar o snippet de código do acordeão

Para que a magia do formulário acordeão funcione, precisamos de instalar o plugin WPCode, que funciona com o WPForms. Certifique-se de que completa ambas as partes deste passo: instalar o WPCode e adicionar o snippet 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 o ter instalado!

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

A partir do seu painel de controlo do WordPress, navegue até WPForms " Ferramentas na barra lateral de navegação esquerda. Nessa página, selecione o separador Code Snippets.

Tenha em atenção que, se não tiver o WPCode instalado, não verá a opção "Code Snippets".

Percorra ou utilize a funcionalidade de pesquisa para localizar o snippetdo Accordion Template Helper.

Clique no botão Instalar snippet .

Depois de clicar para o instalar, será aberta uma página que mostra o fragmento de código. A única coisa que tem de fazer nesta página é ativar o snippet e clicar em Atualizar.

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

3. Criar um novo formulário

A partir do 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 objectivos neste tutorial, vamos começar com um formulário em branco. Isto dar-lhe-á uma ideia melhor de como criar o formato de acordeão.

Será agora direcionado para o ecrã Campos, onde os campos disponíveis aparecem no painel esquerdo. Os campos a que tem acesso dependem 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 por não ter nada para começar. Arraste e largue os elementos do seu formulário e ele não ficará em branco durante muito tempo!

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

Quando começar a criar o formulário, pense na forma como pretende agrupar as informações. Ou seja, que informações pretende incluir no menu pendente quando o acordeão do formulário é aberto?

Para cada uma dessas secções, é necessário adicionar um campo de divisão de secção. Dê ao campo o nome que quiser dar a essa secção de informação.

O nosso exemplo é um formulário de candidatura, por isso vamos começar com as informações de contacto no topo.

Assim que tiver a divisória de secção no lugar, pode arrastar e largar todos os elementos de formulário desejados por baixo dela, da forma que desejar.

Adicionar quebras de página

Quando os campos estiverem todos no lugar, adicione um campo Quebra de página na parte inferior de cada uma das secções do formulário.

Nota: quando adicionar a quebra de página inicial, clique nela para abrir as opções de campo. No lado esquerdo, verá um menu pendente 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 continuará a funcionar, mas haverá uma barra de progresso inativa na parte superior do formulário quando este estiver ativo.

Depois de adicionar a quebra de página, repita o processo para o número de secções que o formulário tiver.

Se o pré-visualizar agora, vai 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. Adicionar a classe CSS

Nesta altura, deve ter todo o seu formulário criado. Cada secção do seu formulário deve começar com um separador de secção e terminar com uma quebra de página. Essas secções são as que se tornarão os menus pendentes no acordeão.

Já activou o fragmento de código antes de iniciar o formulário. Falta apenas uma coisa super fácil de fazer. Tem de adicionar a classe CSS que vai juntar tudo.

Primeiro, guarde o seu formulário. Com o criador de formulários ainda aberto, navegue até à opção Definições no menu da esquerda. Por predefinição, irá para a página Geral. Desloque-se até ao fim e clique em Avançadas.

Em seguida, introduza wpf-accordion-form no campo Classe CSS do formulário.

Depois de ter introduzido o código, clique no botão Guardar . Enquanto estivermos nas definições, vamos atualizar as notificações e confirmações do 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 da mensagem de correio eletrónico 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 preencherem o formulário.

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

Publicar o formulário de acordeão

Depois de terminar de atualizar as confirmações e notificações do formulário, está pronto para publicar!

Existem diferentes formas de incorporar um formulário no WordPress. Vamos utilizar o botão incorporar para o nosso tutorial, mas se quiser experimentar 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 perguntar-lhe-á se pretende 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 ter feito a sua escolha, o seu formulário será aberto no WordPress, num rascunho da página que selecionou ou criou. Se ainda parecer um formulário de várias páginas, não se preocupe. Clique para pré-visualizar a página e verá o seu formulário de acordeão.

Agora, está pronto para publicar a sua página e colocar o seu formulário acordeão no mundo.

Depois de ter publicado o formulário acordeão, só falta garantir que funciona como planeado, testando o formulário incorporado.

Parabéns por ter completado o seu formulário acordeão!

FAQs sobre o formulário de acordeão

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

Quais são os prós/contras dos formulários de acordeão em relação aos formulários de várias páginas?

Um formulário de acordeão permite-lhe colocar mais conteúdo num espaço pequeno, mas pode ser demasiado pesado se não for bem concebido.

Quais são as melhores práticas para etiquetas de formulários acordeão?

Utilize etiquetas concisas e claras. Utilize títulos e evite designações como "Secção 1".

Como conceber formulários de acordeão para computador e telemóvel?

Para criar formulários de acordeão que sejam responsivos e funcionem sem problemas em computadores e dispositivos móveis, considere inscrever-se no WPForms!

A seguir, saiba como exigir um endereço de correio eletrónico para transferências de ficheiros

Não seria fantástico exigir que os utilizadores enviassem os seus endereços de correio eletrónico antes de descarregarem um ficheiro do seu sítio WordPress? Saiba como incentivar os utilizadores a partilharem os seus endereços de correio eletrónico para descarregarem um ficheiro do seu sítio WordPress.

Crie seu formulário de acordeão do WordPress agora

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

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