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.

create your form and add your fields

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.

click on Settings and then Confirmations to make some changes to the confirmation message. Once there, click on the Text tab to add some HTML from the next step

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" />

add the above HTML to your Text tab of the confirmation message

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

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

The most important setting in the above snippet to note is let count = 200;. This controls the amount of falling autumn leaves that will show on the screen. Increasing this number means there will be more leaves, decreasing means there will be less.

Adding your CSS

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

Further CSS may be needed depending on your site. If you need help or have further questions, you can always join our Facebook community to ask questions or for assistance.

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.

falling autumn leaves with animation using JavaScript and a canvas element

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.

Action Reference: wp_footer