How to Add Confetti Animation to Confirmation Message

Markdown anzeigen

Möchten Sie die Bestätigungsnachricht Ihres Formulars ansprechender gestalten? Durch Hinzufügen einer Konfetti-Animation können Sie eine aufregende und unvergessliche Erfahrung schaffen, wenn Benutzer Ihr Formular erfolgreich absenden.

Diese Anleitung zeigt Ihnen, wie Sie Konfetti- und Feuerwerksanimationen in Ihre Bestätigungsnachrichten implementieren.

Wichtiger Hinweis: Diese Animationen funktionieren nur mit Nicht-AJAX-Formularen. Sie müssen die AJAX-Formularübermittlung in Einstellungen » Erweitert deaktivieren, bevor Sie diese Funktion implementieren.

Einrichtung Ihres Formulars

Zuerst müssen Sie Ihr Formular erstellen. Für dieses Tutorial fügen wir einfach ein einfaches Kontaktformular mit den Feldern Name, E-Mail und Absatztext hinzu.

Sobald 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 <canvas id="animateCanvas" /> hinzu.

aus dem Text-Tab des Bestätigungsnachrichtenfeldes, fügen Sie dort Ihren rohen HTML-Code ein

Durch das Hinzufügen dieses Canvas-Elements und der ID können wir steuern, wo dieses Konfetti erscheinen soll. 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; /* ensure canvas is above other content */
    pointer-events: none; /* allow clicks to pass through the canvas */
}

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.

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: Gesamtmenge der Konfetti-Stücke

Jetzt sehen Sie die Konfetti-Animation, wenn die Bestätigungsnachricht angezeigt wird.

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.

Referenzaktion

wpforms_wp_footer_end

So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu

KI-Zusammenfassung