### [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/)
**Veröffentlicht:** 5. November 2021
**Autor:** Redaktionsteam
**Auszug:** Diese Anleitung zeigt Ihnen, wie Sie mit JavaScript und PHP einen Schneefalleffekt auf Ihrer Bestätigungsnachricht erstellen.
**Inhalt:**
## Einführung
Möchten Sie Ihrer Bestätigungsnachricht eine fallende Schneeanimation hinzufügen? Sie können der Bestätigungsnachricht ganz einfach eine Animation hinzufügen, die mit PHP und JavaScript eine interaktivere Wirkung erzielt. In dieser Anleitung werden wir jeden Schritt aufschlüsseln, wie Sie dies erreichen können.
## Erstellen Ihres Formulars
Zuerst müssen Sie Ihr Formular erstellen. Für dieses Tutorial haben wir ein Bestellformular erstellt. Sobald die Bestellung abgeschlossen ist, wird eine Bestätigungsnachricht angezeigt, auf der unsere fallende Schneeanimation erscheinen wird.
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, besuchen Sie bitte [diese Dokumentation](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars").
Sobald Sie Ihre Felder hinzugefügt haben, klicken Sie auf die Registerkarte **Einstellungen** und dann auf **Bestätigungen**. Im Fenster **Bestätigungsnachricht** fügen wir ein HTML-Canvas-Element mit der ID **canvas** hinzu, damit wir genau bestimmen können, wo die Konfetti fallen werden.
Sobald Sie sich auf der Registerkarte **Bestätigungen** befinden, denken Sie daran, auf die Registerkarte **Text** im Nachrichtenfeld zu klicken. Sie müssen dies tun, um reines HTML in diesen Nachrichtenbereich einzufügen.
Fügen Sie einfach `` hinzu
Das Hinzufügen dieses Canvas-Elements und der ID bedeutet, dass wir steuern können, wo dieser Schnee erscheint. Wir möchten, dass er nur in der Bestätigungsnachricht angezeigt wird, daher fügen wir ein Element hinzu, das wir in unserem Code-Snippet gezielt ansprechen können.
Dieses Snippet wird nur für Nicht-AJAX-Formulare ausgeführt. Sie müssten Ihre AJAX-Einstellungen im Formular-Builder deaktivieren. Um diese Einstellung zu deaktivieren, gehen Sie im Formular-Builder zur Registerkarte **Einstellungen** und deaktivieren Sie unter den **Erweiterten** Einstellungen die Einstellung **AJAX-Formularübermittlung aktivieren**.
## Hinzufügen des CSS für den Canvas-Wrapper
Wir müssen auch benutzerdefiniertes CSS für den ``-Wrapper hinzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, [lesen Sie bitte diese Anleitung](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu"). Kopieren Sie einfach dieses CSS und fügen Sie es auf Ihrer Website ein.
```
canvas#canvas {
position: absolute;
top: 0;
left: 0;
}
```
## Hinzufügen des Code-Snippets zum Erstellen des Schnees
Jetzt ist es an der Zeit, das Code-Snippet hinzuzufügen, das die Magie bewirkt. Für jede Hilfe beim Hinzufügen eines Snippets zu Ihrer Website [sehen Sie bitte diese Anleitung](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "So fügen Sie benutzerdefiniertes PHP oder JavaScript für WPForms hinzu").
```
/**
* Fügt fallenden Schnee zum Canvas-Element auf der Bestätigungsnachricht hinzu
*
* @link https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/
*/
function wpf_dev_winter_scene_animation() {
?>
**Kategorien:** Tutorials
**Schlagwörter:** Javascript, JS, PHP
---