Como criar um formulário acordeão no WordPress

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

Os formulários sanfonados 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 WordPress agora

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

Como criar um formulário acordeão no WordPress

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

1. Instale e ative WPForms

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 centenas de modelos de formulário e recursos.

Embora usaremos a versão Pro para este tutorial, lembre-se de que todos os titulares de licença, incluindo usuários Lite, podem criar designs em forma de acordeão.

É hora de instalar e ativar o plugin em seu site WordPress depois de determinar qual versão do WPForms atende às suas necessidades.

Agora vamos criar seu formulário!

2. Crie um novo formulário em branco

No painel de administração do WordPress, navegue até WPForms e clique emAdicionar novo na lista de opções.

Em seguida, dê um nome ao seu formulário e selecione um modelo existente com base em seus requisitos específicos ou simplesmente configure um formulário em branco.

Para este tutorial, criaremos um novo formulário para orientá-lo em todas as etapas vitais para obter o design do formulário acordeão. Portanto, selecionaremos a opção Criar formulário em branco .

Agora 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 visualização editável do seu formulário. Como selecionamos um formulário em branco, esta seção aparecerá vazia.

Agora, orientaremos você nas etapas fáceis para criar um componente acordeão por meio de um campo de caixas de seleção com opções de ícones.

3. Adicione um campo de caixas de seleção com opções de ícones

Para adicionar o campo Caixas de seleção ao seu formulário, você pode clicar nele no painel esquerdo ou arrastar e soltar diretamente na visualização do formulário.

Em seguida, clique no campo Caixas de seleção na visualização direita para abrir suas Opções de campo . A partir daqui, remova as opções extras e mantenha apenas uma.

Para fazer isso, tudo que você precisa fazer é clicar no botão vermelho que se parece com um sinal de menos (-) próximo a uma das opções.

Em seguida, defina o nome da opção restante para algo que descreva os campos que aparecem abaixo dele. Depois disso, marque a opção Usar opções de ícone .

Ao ativar esta opção, altere o ícone para algo que pareça que você está clicando em um acordeão. Por exemplo, você pode selecionar o ícone de círculo com seta para baixo .

A seguir, se desejar, você pode ajustar a cor do ícone para algo que funcione melhor com o estilo geral do seu site.

Depois disso, certifique-se de que Icon Choice Style esteja definido como Modern e que Icon Size esteja definido como Small .

A próxima etapa é navegar até a guia Avançado nas Opções de campo das caixas de seleção. A partir daqui, altere o Choice Layout para One Column .

Depois de fazer isso, certifique-se de marcar também a opção Ocultar rótulo , pois já a adicionamos como uma opção de ícone nas etapas anteriores.

Ótimo trabalho até agora! Agora você configurou o campo Caixas de seleção para funcionar como um acordeão, mas para que funcione, você precisará adicionar alguns campos abaixo dele.

4. Adicione alguns campos abaixo da caixa de seleção

Os campos que você incluir em seu formulário dependerão inteiramente do tipo de formulário que você está criando, bem como da finalidade específica para a qual ele será usado.

Como estamos criando um formulário de inscrição simples para este tutorial, adicionaremos campos mais relevantes para este caso de uso específico.

Por exemplo, logo abaixo da seção Informações Pessoais, adicionamos campos para registrar o nome, e-mail, telefone, data de nascimento e sexo do usuário.

Como o design de um formulário sanfonado tem várias seções para o usuário preencher, este é um ótimo momento para seguir as mesmas etapas acima para criar outro campo Caixas de seleção.

Você pode então adicionar campos mais relevantes abaixo dele. Continuando com o exemplo do formulário de inscrição, adicionamos uma seção Crie sua conta.

Da mesma forma, também criamos uma seção de Termos e Condições para o exemplo. Agora, temos três seções que os usuários precisam preencher em nosso formulário sanfonado.

Se você quiser personalizar o formulário ao seu gosto, basta adicionar, editar e reorganizar os campos usando o construtor de formulários intuitivo do WPForms, assim como fizemos!

5. Aplique lógica condicional nos campos do formulário

Depois de adicionar os campos do formulário, é hora de aplicar a Lógica Condicional a eles para que apareçam apenas ao clicar no campo Caixas de seleção .

Você pode fazer isso facilmente clicando em qualquer campo da visualização correta do formulário e navegando até a guia Smart Logic em Opções de campo .

No menu Smart Logic , para todos os campos de formulário que aparecem abaixo do campo Checkboxes que criamos anteriormente, marque a opção Enable Conditional Logic .

A seguir, use a lógica condicional para mostrar o campo somente se o campo Caixas de seleção não estiver vazio. Repita isso para todos os outros campos abaixo do campo das caixas de seleção.

Usando o exemplo do formulário de inscrição, aplicaremos essa lógica condicional a todos os campos abaixo de Informações pessoais, Crie sua conta e Termos e condições.

Depois de fazer o mesmo para a finalidade pretendida do seu formulário, você criará com sucesso um formulário estilo acordeão, como no exemplo abaixo.

Você também pode adicionar alguns efeitos de transição com um pouco de CSS personalizado para destacar sua forma de acordeão e sua interface de usuário.

Antes de prosseguir, clique no botão Salvar para evitar perder quaisquer alterações.

6. Adicione uma classe CSS aos campos condicionais

Uma abordagem simples para adicionar CSS personalizado ao seu site é usar um plugin dedicado feito apenas para essa finalidade. Recomendamos usar WPCode!

Depois de instalar e ativar o plug-in de formulário, navegue até Code Snippets no painel do WordPress e selecione + Adicionar Snippet.

Em seguida, clique em Add Your Custom Code (New Snippet) e, em seguida, clique no botão azul Use Snippet para criar um novo snippet CSS.

Agora, adicione o código CSS abaixo para aplicar uma animação para que haja uma transição mais suave quando a lógica condicional for acionada.

#wpforms-form-2399 .wpforms-conditional-show {
  display: block;
  animation: fade-in 1s;
}
 
#wpforms-form-2399 .wpforms-conditional-hide {
  display: block;
  animation: fade-out 1s;
}
 
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Estamos usando CSS para direcionar o ID do formulário 2399. Esse ID deve ser atualizado para refletir o ID do seu próprio formulário. Se precisar de ajuda para localizar o ID do seu formulário, leia este guia útil.

Depois de descobrir o ID do seu formulário, basta copiar e colar o código CSS abaixo do Code Preview no plugin WPCode.

Em seguida, role para baixo até a guia Inserção . Agora, selecione Inserção automática e, no menu suspenso Local , escolha a opção Cabeçalho em todo o site .

Aí está! Você adicionou um efeito de transição à sua forma de acordeão. Agora basta habilitar as notificações e confirmações do formulário.

6. Habilite notificações e confirmações de formulário

É fundamental configurar as mensagens e notificações que aparecerão após o usuário preencher e enviar o formulário.

Isso é fácil de fazer. Na tela do Form Builder, navegue até a guia Configuraçõ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.

A seguir, 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 em WPForms para exibir uma mensagem, vincular a outra página ou redirecionar o usuário.

7. Publique seu formulário de acordeão

Crie uma nova página/postagem da web ou atualize uma existente. Depois disso, clique no botão Adicionar bloco e selecione o ícone WPForms .

Em seguida, escolha o design do seu formulário sanfonado no menu suspenso no bloco WPForms para adicioná-lo à sua página ou postagem.

Se você deseja personalizar a aparência do seu formulário, agora pode ser um bom momento para estilizá-lo usando o editor de blocos.

Se tudo parecer promissor, você pode tornar seu formulário público clicando no botão Atualizar ou Publicar .

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

Perguntas frequentes (FAQ)

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

Quais são os prós/contras dos formulários sanfonados versus formulários de várias páginas?

Um formato sanfonado permite que você coloque mais conteúdo em um espaço pequeno, mas pode ser complicado se não for bem projetado.

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

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

Como criar formulários sanfonados para desktop e dispositivos móveis?

Para criar formulários sanfonados que sejam responsivos e funcionem perfeitamente em desktops e dispositivos móveis, considere inscrever-se no WPForms!

A seguir, aprenda 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 baixar um arquivo do seu site WordPress? Aprenda como incentivar os usuários a compartilhar seus endereços de e-mail para baixar um arquivo do seu site WordPress.

Crie seu formulário de acordeão WordPress agora

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

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