### [Como Criar um Formulário de Alternância Animado](https://wpforms.com/developers/how-to-create-an-animated-toggle-form/)
**Publicado:** 21 de junho de 2023
**Autor:** Equipe Editorial
**Resumo:** Este tutorial mostrará como criar um formulário de alternância animado usando apenas um pouco de CSS!
**Conteúdo:**
## Introdução
Gostaria de criar um formulário de alternância animado? É muito simples e fácil de fazer usando apenas um pouco de CSS. Neste tutorial, vamos guiá-lo exatamente sobre como fazer isso usando o [Modelo de Formulário de Admissão de Clientes para Preparação de Impostos](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Modelo de Formulário de Admissão de Clientes para Preparação de Impostos WPForms").
## Criação do formulário
Primeiro, começaremos criando um novo formulário com base no modelo de formulário **Modelo de Formulário de Admissão de Clientes para Preparação de Impostos**. Para conseguir isso, no seu painel do WordPress, navegue até **WPForms » Modelos de Formulário** e no campo **Pesquisar Modelos** digite **tax** e o modelo será exibido. Ao passar o mouse sobre este modelo, clique em **Criar Formulário**.
Este modelo já está configurado com lógica condicional para mostrar e ocultar seções do formulário quando cada uma das principais seções de **Caixa de Seleção** é clicada. É nessas seções que aplicaremos animação para que a transição seja mais suave quando a lógica condicional for acionada.
## Adicionando o CSS
Agora é hora de adicionar algum CSS que aplicará uma transição. Se precisar de ajuda sobre como e onde adicionar CSS personalizado, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms").
```
#wpforms-form-3342 .wpforms-conditional-show {
display: block;
animation: fade-in 1s;
}
#wpforms-form-3342 .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;
}
}
```
No CSS, estamos segmentando o ID do formulário **3342**. Você precisará atualizar este ID para corresponder ao seu próprio ID de formulário. Se precisar de ajuda para encontrar seu ID de formulário, [revise este guia útil](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Como Localizar o ID do Formulário e o ID do Campo").
E é isso! Você criou um formulário de alternância animado usando o [Modelo de Formulário de Admissão de Clientes para Preparação de Impostos](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Modelo de Formulário de Admissão de Clientes para Preparação de Impostos WPForms"). Gostaria também de adicionar uma animação de confete quando o formulário for enviado? Dê uma olhada em nosso tutorial sobre [Como Adicionar Animação de Confete à Mensagem de Confirmação](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "Como Adicionar Animação de Confete à Mensagem de Confirmação").
**Categorias:** Tutoriais
**Tags:** CSS
---