So fügen Sie Ihrer Konfirmationsnachricht fallende Herbstblätter hinzu

Einführung

Sind Sie daran interessiert, fallende Herbstblätter zu Ihrer Bestätigungsnachricht hinzuzufügen, wenn ein Formular abgeschickt wird? Wir können Sie in diesem Tutorial durch den Prozess führen!

In einem früheren Tutorial haben wir gezeigt, wie man fallende Konfetti und Feuerwerkskörper hinzufügt, wenn das Formular abgeschickt wurde. Dieses Tutorial verfolgt einen ähnlichen Ansatz mit ein paar zusätzlichen Schritten.

Erstellen des Formulars

Beginnen Sie damit, ein neues Formular zu erstellen und die gewünschten Felder hinzuzufügen. Wenn Sie bei diesem Schritt Hilfe benötigen, lesen Sie bitte diese Dokumentation.

Einrichten der Bestätigungseinstellungen

Um die Animation der fallenden Herbstblätter zu erhalten, müssen wir einige Änderungen an unserer Bestätigungsnachricht vornehmen. Klicken Sie dazu auf die Einstellungen und wählen Sie dann Bestätigungen. Klicken Sie dort auf die Registerkarte Text, da der nächste Schritt darin bestehen wird, einige HTML-Elemente unter der Bestätigungsnachricht hinzuzufügen.

Hinzufügen von HTML zu Ihrer Bestätigungsnachricht

Da Sie nun bereit sind, HTML in Ihre Bestätigungsnachricht einzubinden, kopieren Sie einfach den folgenden Code und fügen 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ällige Bereiche unserer Website fällt. Leinwand Bereich.

Sie müssen die Quelle des Bildes so ändern, dass sie mit dem Ort übereinstimmt, an dem Sie Ihr Blatt hochgeladen haben.

Hinzufügen des Snippets "Fallende Herbstblätter

Jetzt ist es an der Zeit, den Code hinzuzufügen, der das Ganze zusammenführt. Wenn Sie Hilfe beim Hinzufügen von Codeschnipseln zu Ihrer Website benötigen, sehen Sie sich bitte 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

In diesem Tutorial werden wir eine einzelne CSS-Regel zu unserer Leinwand hinzufügen.

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

Wenn Sie Hilfe brauchen, wo oder wie Sie Ihr CSS hinzufügen können, lesen Sie bitte dieses Tutorial.

Sobald diese Schritte abgeschlossen sind und ein Benutzer das Formular ausfüllt, sieht er fallende Herbstblätter direkt über der Bestätigungsmeldung.

Und das war's! Wenn Sie unsere Anleitung zum Hinzufügen von Konfetti zu Ihrer Bestätigungsnachricht noch nicht gesehen haben, sollten Sie sich unbedingt die Anleitung zum Hinzufügen einer Konfetti-Animation zur Bestätigungsnachricht ansehen.

Verwandte Seiten

Referenz der Aktion: wpforms_wp_footer_end