How to Add Falling Autumn Leaves to Your Confirmation Message

Introduction

Would you like to add falling autumn leaves to your confirmation message when the form is submitted? We can show you how to do that in this tutorial!

In a previous tutorial, we showed you how to add falling confetti when the form was submitted as well as fireworks. This tutorial is much the same with a few extra steps.

Creating the form

To begin, you’ll need to first create a new form and add your fields. If you need any help with that, please check out this documentation.

For this tutorial, we’re just going to create a simple contact form.

Setting up the Confirmation settings

In order to get the falling autumn leaves animation, we have to make some changes to our confirmation message. To do this, click on the Settings and then select Confirmaations. Once there, click on the Text tab since the next step will be to add some HTML elements under the confirmation message.

Adding HTML to your confirmation message

Now that you are ready to add some HTML to your confirmation message, you’ll need to copy and paste this into your message box.

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

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

For our tutorial, we’re using a single leaf that will just continuously drop in random areas of our canvas area.

You’ll need to change the source to the image to match where you’ve uploaded your leaf.

Adding the falling autumn leaves snippet

Now it’s time to add the code that will start to bring this all together. If you need help in adding code snippets to your site, please check out this 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( 'wp_footer', 'wpf_falling_autumn_leaves_animation', 1);

Adding your CSS

For this tutorial, we’re going to add a single CSS rule to our canvas.

canvas {
    display: block;
    position: absolute;
    top: 0;
}

If you need any help on where or how to add your CSS, please see this tutorial.

Once those steps are all completed and a user completes the form, they’ll see falling autumn leaves just over the confirmation message.

And that’s it! If you haven’t already seen our tutorial on adding confetti to your confirmation message, be sure to check out the tutorial on How to Add Confetti Animation to Confirmation Message.

Related

Action Reference: wp_footer