Herbstlaub zu Ihrer Bestätigungsnachricht hinzufügen

Einleitung

Möchten Sie Ihrer Bestätigungsnachricht fallendes Herbstlaub hinzufügen, wenn ein Formular gesendet wird? Wir können Sie in diesem Tutorial durch den Prozess führen!

In einem früheren Tutorial haben wir gezeigt, wie man beim Absenden des Formulars fallendes Konfetti und Feuerwerk hinzufügt. Dieses Tutorial folgt einem ähnlichen Ansatz mit einigen zusätzlichen Schritten.

Erstellung des Formulars

Erstellen Sie zunächst ein neues Formular und fügen Sie Ihre gewünschten Felder hinzu. Wenn Sie hierbei Hilfe benötigen, konsultieren Sie bitte diese Dokumentation.

Einrichtung der Bestätigungseinstellungen

Um die Animation mit fallendem Herbstlaub zu erhalten, müssen wir einige Änderungen an unserer Bestätigungsnachricht vornehmen. Klicken Sie dazu auf Einstellungen und wählen Sie dann Bestätigungen. Klicken Sie dort auf die Registerkarte Text, da im nächsten Schritt einige HTML-Elemente unter der Bestätigungsnachricht hinzugefügt werden.

Hinzufügen von HTML zu Ihrer Bestätigungsnachricht

Jetzt, da Sie bereit sind, HTML in Ihre Bestätigungsnachricht einzufügen, kopieren Sie einfach den folgenden Code und fügen Sie ihn in Ihr Nachrichtenfeld ein:

<p>Thanks for your feedback!</p>

<canvas id="canvas" />
<img id="leaf" src="http://mysite.com/path-to-image" />

Für unser Tutorial verwenden wir ein einzelnes Blatt, das kontinuierlich in zufälligen Bereichen unseres Canvas-Bereichs fällt.

Sie müssen die Quelle des Bildes ändern, um dem Speicherort Ihres hochgeladenen Blattes zu entsprechen.

Hinzufügen des Code-Snippets für fallendes Herbstlaub

Jetzt ist es an der Zeit, den Code hinzuzufügen, der alles zusammenbringt. Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

/**
 * Add falling autumn leaves to the canvas element on the confirmation message
 *
 * @link  https://wpforms.com/developers/how-to-add-falling-autumn-leaves-to-your-confirmation-message/
 *
 */
 
function wpf_falling_autumn_leaves_animation() {
    ?>

	<script type="text/javascript">
	let canvas = document.querySelector('canvas');
	let ctx = canvas.getContext('2d');

	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;

	let width = canvas.width;
	let height = canvas.height;
	let centerX = canvas.width / 2;
	let centerY = canvas.height / 2;
	let leaf = document.querySelector('#leaf');
	let leafs = [];
	let count = 200;

	for (let i = 0; i < count; i++) {  
	  let angle = 15 + Math.random() * 30
	  let dir = [-1,1][Math.floor(Math.random() * 2)];

	  leafs.push({
		x: Math.random() * width,
		y: Math.random() * height,
		w: 30,
		h: 30 * (leaf.height / leaf.width),
		v: 20 / angle,
		a: angle,
		d: dir,
		anim: true
	  });
	}

	function update(dt) {
	  for (let i = 0; i < leafs.length; i++) {
		if (leafs[i].anim) {
		  leafs[i].y += leafs[i].v;

		  if (leafs[i].y > height) {
			leafs[i].y = -120;
			leafs[i].x = Math.random() * width;
		  }
		}
	  }
	}

	function draw(dt) {
	  requestAnimationFrame(draw);
	  update(dt);

	  ctx.clearRect(0, 0, width, height);

	  for (let i = 0; i < leafs.length; i++) {
		ctx.save();

		if (leafs[i].anim) {
		  ctx.translate(leafs[i].x, leafs[i].y);

		  ctx.rotate(
			leafs[i].d * Math.sin(dt * 0.002 * i * 0.01) * (leafs[i].a) * Math.PI / 180
		  ); 
		} 

		ctx.globalAlpha = Math.max(0, leafs[i].y * 0.1);
		ctx.drawImage(leaf, -leafs[i].w / 2, 70, leafs[i].w, leafs[i].h);

		ctx.restore();
	  }
	}

	draw();
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_falling_autumn_leaves_animation', 1);

Hinzufügen Ihres CSS

Für dieses Tutorial fügen wir eine einzelne CSS-Regel zu unserem Canvas hinzu.

canvas {
    display: block;
    position: absolute !important;
    top: 0;
	left: 0;
}

Wenn Sie Hilfe benötigen, wo oder wie Sie Ihr CSS hinzufügen können, sehen Sie sich dieses Tutorial an.

Sobald all diese Schritte abgeschlossen sind und ein Benutzer das Formular ausfüllt, sieht er fallendes Herbstlaub direkt über der Bestätigungsnachricht.

Und das ist alles! Wenn Sie unser Tutorial zum Hinzufügen von Konfetti zu Ihrer Bestätigungsnachricht noch nicht gesehen haben, sollten Sie sich unbedingt das Tutorial So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu ansehen.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end