Cómo añadir hojas otoñales a su mensaje de confirmación

Introducción

¿Está interesado en añadir hojas otoñales a su mensaje de confirmación cuando se envía un formulario? Este tutorial le guiará en el proceso.

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

Creación del formulario

Para empezar, cree un nuevo formulario y añada los campos que desee. Si necesita ayuda con este paso, consulte esta documentación.

Configuración de los ajustes de Confirmación

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

Añadir HTML al mensaje de confirmación

Ahora que está preparado para incluir HTML en su mensaje de confirmación, sólo tiene que copiar y pegar el siguiente código en el 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, vamos a utilizar una sola hoja que caerá continuamente en áreas aleatorias de nuestro lona zona.

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

Añadir el fragmento de hojas otoñales

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 CSS

Para este tutorial, vamos a añadir una única 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 que se hayan completado todos esos pasos y el usuario haya rellenado el formulario, verá hojas otoñales cayendo justo encima del mensaje de confirmación.

Y ya está. Si aún no ha visto nuestro tutorial sobre cómo añadir confeti a su mensaje de confirmación, asegúrese de consultar el tutorial sobre Cómo añadir animación de confeti al mensaje de confirmación.

Relacionado

Acción de referencia: wpforms_wp_footer_end