Comment ajouter des feuilles d'automne tombantes à votre message de confirmation

Introduction

Souhaitez-vous ajouter des feuilles d'automne tombantes à votre message de confirmation lors de la soumission d'un formulaire ? Nous pouvons vous guider dans ce processus grâce à ce tutoriel !

Dans un précédent tutoriel, nous avons montré comment ajouter des confettis et des feux d'artifice tombants lors de la soumission du formulaire. Ce tutoriel suit une approche similaire avec quelques étapes supplémentaires.

Création du formulaire

Pour commencer, créez un nouveau formulaire et ajoutez les champs souhaités. Si vous avez besoin d'aide pour cette étape, veuillez consulter cette documentation.

Configuration des paramètres de confirmation

Afin d'obtenir l'animation des feuilles d'automne tombantes, nous devons apporter quelques modifications à notre message de confirmation. Pour ce faire, cliquez sur Paramètres, puis sélectionnez Confirmations. Une fois sur place, cliquez sur l'onglet Texte, car la prochaine étape consistera à ajouter des éléments HTML sous le message de confirmation.

Ajout de HTML à votre message de confirmation

Maintenant que vous êtes prêt à inclure du HTML dans votre message de confirmation, copiez et collez simplement le code suivant dans votre zone de message :

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

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

Pour notre tutoriel, nous utilisons une seule feuille qui tombera continuellement dans des zones aléatoires de notre zone de canevas.

Vous devrez modifier la source de l'image pour qu'elle corresponde à l'endroit où vous avez téléchargé votre feuille.

Ajout de l'extrait de feuilles d'automne tombantes

Il est maintenant temps d'ajouter le code qui commencera à assembler tout cela. Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/**
 * 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);

Ajout de votre CSS

Pour ce tutoriel, nous allons ajouter une seule règle CSS à notre canevas.

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

Si vous avez besoin d'aide pour savoir où ou comment ajouter votre CSS, veuillez consulter ce tutoriel.

Une fois toutes ces étapes terminées et qu'un utilisateur a rempli le formulaire, il verra des feuilles d'automne tomber juste au-dessus du message de confirmation.

Et voilà ! Si vous n'avez pas encore vu notre tutoriel sur l'ajout de confettis à votre message de confirmation, assurez-vous de consulter le tutoriel sur Comment ajouter une animation de confettis au message de confirmation.

Articles associés

Référence d’action : wpforms_wp_footer_end