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

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

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

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

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

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 a funcionalidade do WPForms. Siga as etapas abaixo para começar:

1. Instalar e ativar o WPForms

A primeira coisa que faremos é instalar e ativar o WPForms.

O WPForms é um plug-in 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é o WPForms e registre-se na 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 em seu site? Confira este tutorial sobre como instalar plug-ins do WordPress.

Depois de instalar o plug-in, não se esqueça de ativá-lo!

Depois de concluir essa etapa, instalaremos o WPCode e adicionaremos o snippet de código que faz com que o estilo do acordeão seja criado.

2. Instale o WPCode e adicione o snippet de código do acordeão

Para que a mágica do formulário acordeão funcione, precisamos instalar o plug-in WPCode, que funciona com o WPForms. Certifique-se de concluir as duas partes desta etapa: instalar o WPCode e adicionar o snippet de código do acordeão.

Ao instalar o plug-in 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 plug-in depois de instalá-lo!

Depois de instalar o WPCode no repositório de plug-ins do WordPress, volte ao WPForms. Agora vamos ativar um trecho de código no WPForms.

No painel do WordPress, navegue até WPForms " Ferramentas na barra lateral de navegação à esquerda. Nessa página, selecione a guia Code Snippets.

Observe que, se você não tiver o WPCode instalado, não verá a opção Code Snippets.

Role a tela ou use o recurso de pesquisa para localizar o snippetAccordion Template Helper.

Clique no botão Install Snippet .

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

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

3. Criar um novo formulário

No painel de administração do WordPress, navegue até WPForms e clique em Add New (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 os fins deste tutorial, começaremos com um formulário em branco. Isso lhe dará uma ideia melhor de como criar o formato de acordeão.

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

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

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

Ao começar a criar o formulário, pense em como deseja agrupar as informações. Ou seja, quais informações você deseja incluir no menu suspenso quando o acordeão do formulário for aberto?

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

Nosso exemplo é um formulário de inscrição, portanto, começaremos com as informações de contato na parte superior.

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

Adicionar quebras de página

Quando todos os campos estiverem prontos, adicione um campo Page Break na parte inferior de cada uma das seções do formulário.

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

Se você perder essa etapa, o acordeão ainda funcionará, mas haverá uma barra de progresso inativa na parte superior do formulário quando ele estiver ativo.

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

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

4. Adicionar a classe CSS

Nesse ponto, você deve ter criado todo o formulário. Cada seção do 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á os menus suspensos no acordeão.

Você já ativou o snippet de código antes de iniciar o formulário. Só falta fazer uma coisa superfácil. Você precisa adicionar a classe CSS que reunirá tudo isso.

Primeiro, salve o formulário. Com o construtor de formulários ainda aberto, navegue até a opção Settings (Configurações ) no menu esquerdo. O padrão será a página General (Geral ). Role a tela até o fim e clique em Advanced (Avançado).

Em seguida, digite wpf-accordion-form no campo Form CSS Class (Classe CSS do formulário).

Depois de inserir esse código, clique no botão Save (Salvar ). Enquanto estivermos nas configurações, vamos atualizar nossas notificações e confirmações de formulário.

5. Configure Notifications & Confirmations (Configurar notificações e confirmações)

É fundamental configurar as mensagens e notificações que serão exibidas depois que um usuário preencher e enviar o formulário.

Isso é fácil de fazer. Navegue até a guia Settings (Configurações ) e selecione Notifications (Notificações).

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

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

Você também pode usar a configuração Confirmation Type (Tipo de confirmação ) no WPForms para exibir uma mensagem, criar um link para outra página ou redirecionar o usuário.

Publique seu Accordion Form

Depois de concluir a atualização das confirmações e notificações do formulário, você estará pronto para publicar!

Existem diferentes maneiras de incorporar um formulário no WordPress. Usaremos o botão de incorporação em nosso tutorial, mas se quiser tentar outra forma, confira nossa publicação sobre as três maneiras de incorporar um formulário em seu site do 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 quiser selecionar uma página existente, você poderá escolher qual delas. Se você criar uma nova página, será solicitado a dar um nome a ela.

Depois de fazer sua escolha, seu formulário será aberto no WordPress, em 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ê verá o formulário de acordeão.

Agora você está pronto para publicar sua página e divulgar seu formulário sanfonado para o mundo.

Depois de publicar o formulário de acordeão, tudo o que resta fazer é garantir que ele funcione conforme planejado, testando o formulário incorporado.

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

Perguntas frequentes sobre o Accordion Form

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

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

Um formulário de acordeão permite que você coloque mais conteúdo em um espaço pequeno, mas pode ser sobrecarregado se não for bem projetado.

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

Use rótulos que sejam concisos e claros. Use títulos e evite designações como "Seção 1".

Como você projeta formulários sanfonados para desktop e dispositivos móveis?

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

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

Não seria ótimo exigir que os usuários enviassem seus endereços de e-mail antes de fazer o download de um arquivo do seu site WordPress? Saiba como incentivar os usuários a compartilhar seus endereços de e-mail para fazer download de um arquivo do seu site WordPress.

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

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

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