### [Come Creare un Modulo a Scorrimento Animato](https://wpforms.com/developers/how-to-create-an-animated-toggle-form/)
**Pubblicato:** 21 giugno 2023
**Autore:** Team Editoriale
**Estratto:** Questo tutorial ti mostrerà come creare un modulo a scorrimento animato usando solo un po' di CSS!
**Contenuto:**
## Introduzione
Vorresti creare un modulo a scorrimento animato? È molto semplice e facile da fare usando solo un po' di CSS. In questo tutorial ti guideremo esattamente su come farlo utilizzando il [Modello di Modulo di Richiesta Clienti per la Preparazione delle Tasse](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Modello di Modulo di Richiesta Clienti per la Preparazione delle Tasse di WPForms").
## Creazione del modulo
Per prima cosa, inizieremo creando un nuovo modulo basato sul modello di modulo **Modello di Modulo di Richiesta Clienti per la Preparazione delle Tasse**. Per fare ciò, dalla tua bacheca di WordPress, vai su **WPForms » Modelli di Modulo** e nel campo **Cerca Modelli** inserisci **tax** e il modello verrà visualizzato. Passando il mouse su questo modello, fai clic su **Crea Modulo**.
Questo modello è già configurato con la logica condizionale per mostrare e nascondere sezioni del modulo quando viene fatto clic su ciascuna delle principali sezioni **Casella di controllo**. È su queste che applicheremo l'animazione per rendere la transizione più fluida quando viene attivata la logica condizionale.
## Aggiunta del CSS
Ora è il momento di aggiungere del CSS che applicherà una transizione. Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come Aggiungere Stili CSS Personalizzati per 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;
}
}
```
Nel CSS, stiamo prendendo di mira l'ID del modulo **3342**. Dovrai aggiornare questo ID per corrispondere al tuo ID modulo. Se hai bisogno di aiuto per trovare il tuo ID modulo, [consulta questa utile guida](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Come Trovare l'ID del Modulo e l'ID del Campo").
Ed è tutto! Ora hai creato un modulo a scorrimento animato utilizzando il [Modello di Modulo di Richiesta Clienti per la Preparazione delle Tasse](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Modello di Modulo di Richiesta Clienti per la Preparazione delle Tasse di WPForms"). Vorresti anche aggiungere un'animazione a coriandoli quando il modulo viene inviato? Dai un'occhiata al nostro tutorial su [Come Aggiungere Animazione a Coriandoli al Messaggio di Conferma](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "Come Aggiungere Animazione a Coriandoli al Messaggio di Conferma").
**Categorie:** Tutorial
**Tag:** CSS
---