### [So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/)
**Veröffentlicht:** 12. März 2021
**Autor:** Umair Majeed
**Auszug:** Diese Anleitung zeigt Ihnen, wie Sie mit JavaScript und PHP eine Konfetti-Animation zu Ihrer Bestätigungsnachricht hinzufügen.
**Inhalt:**
Möchten Sie die Bestätigungsnachricht Ihres Formulars ansprechender gestalten? Durch Hinzufügen einer Konfetti-Animation können Sie ein aufregendes und unvergessliches Erlebnis schaffen, wenn Benutzer Ihr Formular erfolgreich absenden.
Diese Anleitung zeigt Ihnen, wie Sie Konfetti- und Feuerwerksanimationen in Ihren Bestätigungsnachrichten implementieren.
Wichtiger Hinweis: Diese Animationen funktionieren nur mit Nicht-AJAX-Formularen. Sie müssen die AJAX-Formularübermittlung unter **Einstellungen** » **Erweitert** deaktivieren, bevor Sie diese Funktion implementieren.
## Einrichten Ihres Formulars
Zuerst müssen Sie Ihr Formular erstellen. Für dieses Tutorial fügen wir einfach ein einfaches Kontaktformular mit den Formularfeldern **Name**, **E-Mail** und **Absatztext** hinzu.
Nachdem Sie Ihre Felder hinzugefügt haben, klicken Sie auf die Registerkarte **Einstellungen** und dann auf **Bestätigungen**. Fügen Sie im Fenster **Bestätigungsnachricht** einfach `` hinzu.
Durch Hinzufügen dieses Canvas-Elements und der ID können wir steuern, wo dieses Konfetti angezeigt wird. Wir möchten, dass es nur in der Bestätigungsnachricht angezeigt wird, daher fügen wir ein Element hinzu, das wir in unserem Code-Snippet gezielt ansprechen können.
### Hinzufügen von Canvas-Stilen
Fügen Sie diesen CSS-Code zu Ihrer Website hinzu, um die Animation richtig zu positionieren. Wenn Sie nicht sicher sind, wie Sie benutzerdefiniertes CSS hinzufügen, lesen Sie bitte unsere Anleitung zum Hinzufügen von CSS zu WordPress.
```
canvas#animateCanvas {
position: fixed;
top: 0;
left: 0;
z-index: 1000; /* stellt sicher, dass das Canvas über anderen Inhalten liegt */
pointer-events: none; /* ermöglicht Klicks, das Canvas zu durchlaufen */
}
```
## Hinzufügen der Konfetti-Animation
Jetzt ist es an der Zeit, den Code-Snippet hinzuzufügen, der die Magie bewirkt. Wenn Sie nicht sicher sind, wie Sie benutzerdefinierten Code hinzufügen, lesen Sie bitte unsere [Anleitung zum Hinzufügen von Code-Snippets zu WordPress](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
## Anpassen der Animation
Sie können diese Werte im Code ändern, um die Animation anzupassen:
- SPRITE\_WIDTH: Breite der Konfetti-Stücke
- SPRITE\_HEIGHT: Höhe der Konfetti-Stücke
- PAPER\_LENGTH: Menge des Konfettis
- ROTATION\_RATE: Rotationsgeschwindigkeit
- COLORS: Array von Konfetti-Farben
- DURATION: Animationsdauer (in Millisekunden)
- LENGTH: Gesamtzahl der Konfetti-Stücke
## Alternative: Feuerwerksanimation
Für einen Feuerwerkseffekt anstelle von Konfetti ersetzen Sie den Konfetti-Code durch den Feuerwerksanimationscode (siehe den vollständigen Code in der obigen Dokumentation). Der Einrichtungsprozess bleibt derselbe.
Und das ist alles, was Sie brauchen! Sie haben jetzt erfolgreich eine Konfetti-Animation zu Ihrer Bestätigungsnachricht hinzugefügt. Möchten Sie stattdessen etwas Schnee hinzufügen? Sehen Sie sich unser Tutorial an [So fügen Sie eine fallende Schneeanimation zu Ihrer Bestätigungsnachricht hinzu](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/ "So fügen Sie eine fallende Schneeanimation zu Ihrer Bestätigungsnachricht hinzu").
## Referenzaktion
[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Verwendung der wpforms_wp_footer_end-Aktion")
**Kategorien:** Erweitern
**Tags:** Javascript, JS, PHP
---