### [Comment créer un formulaire à bascule animé](https://wpforms.com/developers/how-to-create-an-animated-toggle-form/)
**Publié le :** 21 juin 2023
**Auteur :** Équipe éditoriale
**Extrait :** Ce tutoriel vous montrera comment créer un formulaire à bascule animé en utilisant juste un peu de CSS !
**Contenu :**
## Introduction
Souhaitez-vous créer un formulaire à bascule animé ? C'est très simple et facile à faire en utilisant juste un peu de CSS. Dans ce tutoriel, nous allons vous expliquer exactement comment faire cela en utilisant le [modèle de formulaire de demande de préparation fiscale](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Modèle de formulaire de demande de préparation fiscale WPForms").
## Création du formulaire
Tout d'abord, nous allons commencer par créer un nouveau formulaire basé sur le modèle de formulaire **Modèle de formulaire de demande de préparation fiscale**. Pour ce faire, depuis votre administration WordPress, accédez à **WPForms » Modèles de formulaire** et dans le champ **Rechercher des modèles**, entrez **tax** et le modèle s'affichera. Lorsque vous passerez la souris sur ce modèle, cliquez sur **Créer un formulaire**.
Ce modèle est déjà configuré avec une logique conditionnelle pour afficher et masquer des sections du formulaire lorsque chacune des sections principales de **cases à cocher** est cliquée. C'est à celles-ci que nous allons appliquer une animation pour une transition plus fluide lorsque la logique conditionnelle est déclenchée.
## Ajout du CSS
Il est maintenant temps d'ajouter du CSS qui appliquera une transition. Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour 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;
}
}
```
Dans le CSS, nous ciblons l'ID du formulaire **3342**. Vous devrez mettre à jour cet ID pour qu'il corresponde à votre propre ID de formulaire. Si vous avez besoin d'aide pour trouver votre ID de formulaire, [veuillez consulter ce guide utile](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Comment localiser l'ID du formulaire et l'ID du champ").
Et voilà ! Vous avez maintenant créé un formulaire à bascule animé en utilisant le [modèle de formulaire de demande de préparation fiscale](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Modèle de formulaire de demande de préparation fiscale WPForms"). Souhaitez-vous également ajouter une animation de confettis lors de la soumission du formulaire ? Consultez notre tutoriel sur [Comment ajouter une animation de confettis au message de confirmation](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "Comment ajouter une animation de confettis au message de confirmation").
**Catégories :** Tutoriels
**Tags :** CSS
---