### [So erstellen Sie ein animiertes Toggle-Formular](https://wpforms.com/developers/how-to-create-an-animated-toggle-form/)
**Veröffentlicht:** 21. Juni 2023
**Autor:** Redaktionsteam
**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie mit nur wenig CSS ein animiertes Toggle-Formular erstellen!
**Inhalt:**
## Einleitung
Möchten Sie ein animiertes Toggle-Formular erstellen? Das ist sehr einfach und leicht mit nur wenig CSS zu machen. In diesem Tutorial führen wir Sie genau durch, wie Sie dies mit der [Formularvorlage für die Mandantenaufnahme zur Steuererklärung](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "WPForms-Formularvorlage für die Mandantenaufnahme zur Steuererklärung") tun.
## Erstellen des Formulars
Zuerst erstellen wir ein neues Formular basierend auf der Formularvorlage **Formularvorlage für die Mandantenaufnahme zur Steuererklärung**. Um dies zu erreichen, navigieren Sie in Ihrem WordPress-Admin zu **WPForms » Formularvorlagen** und geben Sie im Feld **Vorlagen suchen** **tax** ein, und die Vorlage wird angezeigt. Wenn Sie mit der Maus über diese Vorlage fahren, klicken Sie auf **Formular erstellen**.
Diese Vorlage ist bereits mit bedingter Logik eingerichtet, um Abschnitte des Formulars ein- und auszublenden, wenn auf die einzelnen Haupt-**Kontrollkästchen** geklickt wird. Diese werden wir animieren, um einen sanfteren Übergang zu erzielen, wenn die bedingte Logik ausgelöst wird.
## Hinzufügen des CSS
Jetzt ist es an der Zeit, etwas CSS hinzuzufügen, das einen Übergang anwendet. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, [sehen Sie sich dieses Tutorial an](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu").
```
#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;
}
}
```
Im CSS zielen wir auf die Formular-ID **3342** ab. Sie müssen diese ID aktualisieren, um Ihre eigene Formular-ID anzugeben. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, [lesen Sie diese hilfreiche Anleitung](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "So ermitteln Sie die Formular-ID und Feld-ID").
Und das ist alles! Sie haben jetzt ein animiertes Toggle-Formular mit der [Formularvorlage für die Mandantenaufnahme zur Steuererklärung](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "WPForms-Formularvorlage für die Mandantenaufnahme zur Steuererklärung") erstellt. Möchten Sie auch eine Konfetti-Animation hinzufügen, wenn das Formular gesendet wird? Sehen Sie sich unser Tutorial [So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu") an.
**Kategorien:** Tutorials
**Schlagwörter:** CSS
---