Cómo agregar hojas de otoño cayendo a su mensaje de confirmación

Introducción

¿Te interesa añadir hojas de otoño cayendo a tu mensaje de confirmación cuando se envía un formulario? ¡Podemos guiarte en el proceso en este tutorial!

En un tutorial anterior, demostramos cómo añadir confeti y fuegos artificiales cayendo cuando se enviaba el formulario. Este tutorial sigue un enfoque similar con algunos pasos adicionales.

Creación del formulario

Para empezar, crea un nuevo formulario y añade los campos que desees. Si necesitas ayuda con este paso, consulta esta documentación.

Configuración de los ajustes de confirmación

Para obtener la animación de hojas de otoño cayendo, tenemos que hacer algunos cambios en nuestro mensaje de confirmación. Para ello, haz clic en Ajustes y luego selecciona Confirmaciones. Una vez allí, haz clic en la pestaña Texto, ya que el siguiente paso será añadir algunos elementos HTML debajo del mensaje de confirmación.

Añadir HTML a tu mensaje de confirmación

Ahora que estás preparado para incluir HTML en tu mensaje de confirmación, simplemente copia y pega el siguiente código en tu cuadro de mensaje:

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

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

Para nuestro tutorial, estamos usando una sola hoja que caerá continuamente en áreas aleatorias de nuestra área de lienzo.

Tendrás que cambiar la fuente de la imagen para que coincida con el lugar donde has subido tu hoja.

Añadir el fragmento de hojas de otoño cayendo

Ahora es el momento de añadir el código que empezará a unir todo esto. Si necesitas ayuda para añadir fragmentos de código a tu sitio, consulta este tutorial.

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

Añadir tu CSS

Para este tutorial, vamos a añadir una sola regla CSS a nuestro lienzo.

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

Si necesitas ayuda sobre dónde o cómo añadir tu CSS, consulta este tutorial.

Una vez completados todos esos pasos y un usuario completa el formulario, verá hojas de otoño cayendo justo encima del mensaje de confirmación.

¡Y eso es todo! Si aún no has visto nuestro tutorial sobre cómo añadir confeti a tu mensaje de confirmación, asegúrate de ver el tutorial sobre Cómo añadir animación de confeti al mensaje de confirmación.

Relacionado

Referencia de acción: wpforms_wp_footer_end