How to Add JavaScript When Using the Form Pages Addon

Introduction

Would you like to add custom scripts to forms created using the Form Pages addon? There is a dedicated hook that will load when using this addon. In this tutorial, we’ll show you how to use this dedicated hook to call your JavaScript on pages that use this addon.

Creating your form

For our tutorial, we want our Form Pages to display a little animation when the form submits. The inspiration behind this animation can be found in this tutorial.

So we’ll begin by creating our form and adding our canvas element to Confirmation message on the Text tab.

create your form and add your canvas element to the Text tab of the Confirmation message

For more information on what canvas is, please check out this article from W3Schools.

If you need any help in creatng your form, please check out this documentation.

Adding the JavaScript to Form Pages

Now it’s time to add the snippet that contains the script we want to log on our page.

If you need help in adding snippets to your site, please see this tutorial.

As with the original tutorial, everything is the same in the snippet with the exception of the hook. Since we’re using the Form Pages addon to display the form, we need to use that dedicated hook to call in our custom JavaScript.

/**
 * Add confetti to the convas element on the confirmation message for Form Pages
 *
 * @link  https://wpforms.com/developers/how-to-add-javascript-to-a-page-when-using-the-form-pages-addon/
 */

function wpf_confetti_animation() {
    ?>
    <script type="text/javascript">
         
//If the canvas ID does not exist on the page, this script will not run
         
if (document.querySelector( '#canvas' ) !== null) {   
         
class Progress {
  constructor(param = {}) {
    this.timestamp        = null;
    this.duration         = param.duration || Progress.CONST.DURATION;
    this.progress         = 0;
    this.delta            = 0;
    this.progress         = 0;
    this.isLoop           = !!param.isLoop;
 
    this.reset();
  }
 
  static get CONST() {
    return {
      DURATION : 1000
    };
  }
 
  reset() {
    this.timestamp = null;
  }
 
  start(now) {
    this.timestamp = now;
  }
 
  tick(now) {
    if (this.timestamp) {
      this.delta    = now - this.timestamp;
      this.progress = Math.min(this.delta / this.duration, 1);
 
      if (this.progress >= 1 && this.isLoop) {
        this.start(now);
      }
 
      return this.progress;
    } else {
      return 0;
    }
  }
}
 
class Confetti {
  constructor(param) {
    this.parent         = param.elm || document.body;
    this.canvas         = document.createElement("canvas");
    this.ctx            = this.canvas.getContext("2d");
    this.width          = param.width  || this.parent.offsetWidth;
    this.height         = param.height || this.parent.offsetHeight;
    this.length         = param.length || Confetti.CONST.PAPER_LENGTH;
    this.yRange         = param.yRange || this.height * 2;
    this.progress       = new Progress({
      duration : param.duration,
      isLoop   : true
    });
    this.rotationRange  = typeof param.rotationLength === "number" ? param.rotationRange
                                                                   : 10;
    this.speedRange     = typeof param.speedRange     === "number" ? param.speedRange
                                                                   : 10;
    this.sprites        = [];
 
    this.canvas.style.cssText = [
      "display: block",
      "position: absolute",
      "top: 0",
      "left: 0",
      "pointer-events: none"
    ].join(";");
 
    this.render = this.render.bind(this);
 
    this.build();
 
    this.parent.appendChild(this.canvas);
    this.progress.start(performance.now());
 
    requestAnimationFrame(this.render);
  }
 
  static get CONST() {
    return {
        //CUSTOMIZE: This will adjust how wide the paper is 
        SPRITE_WIDTH  : 9,
        //CUSTOMIZE: This will adjust how tall the paper is
        SPRITE_HEIGHT : 16,
        //CUSTOMIZE: This will adjust how much confetti appears, raise the number for less confetti
        PAPER_LENGTH  : 100,
        //CUSTOMIZE: This will control the rotation rate of each piece of confetti
        ROTATION_RATE : 50,
        //CUSTOMIZE: These are the default colors used for the confetti. You can change these numbers or add to them. 
        //CUSTOMIZE: Separate adding new colors by a comma after each new color added.
        COLORS        : [
          "#EF5350",
          "#EC407A",
          "#AB47BC",
          "#7E57C2",
          "#5C6BC0",
          "#42A5F5",
          "#29B6F6",
          "#26C6DA",
          "#26A69A",
          "#66BB6A",
          "#9CCC65",
          "#D4E157",
          "#FFEE58",
          "#FFCA28",
          "#FFA726",
          "#FF7043",
          "#8D6E63",
          "#BDBDBD",
          "#78909C"        ]
    };
  }
 
  build() {
    for (let i = 0; i < this.length; ++i) {
      let canvas = document.createElement("canvas"),
          ctx    = canvas.getContext("2d");
 
      canvas.width  = Confetti.CONST.SPRITE_WIDTH;
      canvas.height = Confetti.CONST.SPRITE_HEIGHT;
 
      canvas.position = {
        initX : Math.random() * this.width,
        initY : -canvas.height - Math.random() * this.yRange
      };
 
      canvas.rotation = (this.rotationRange / 2) - Math.random() * this.rotationRange;
      canvas.speed    = (this.speedRange / 2) + Math.random() * (this.speedRange / 2);
 
      ctx.save();
        ctx.fillStyle = Confetti.CONST.COLORS[(Math.random() * Confetti.CONST.COLORS.length) | 0];
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();
 
      this.sprites.push(canvas);
    }
  }
 
  render(now) {
    let progress = this.progress.tick(now);
 
    this.canvas.width  = this.width;
    this.canvas.height = this.height;
 
    for (let i = 0; i < this.length; ++i) {
      this.ctx.save();
        this.ctx.translate(
          this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress,
          this.sprites[i].position.initY + progress * (this.height + this.yRange)
        );
        this.ctx.rotate(this.sprites[i].rotation);
        this.ctx.drawImage(
          this.sprites[i],
          -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2,
          -Confetti.CONST.SPRITE_HEIGHT / 2,
          Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)),
          Confetti.CONST.SPRITE_HEIGHT
        );
      this.ctx.restore();
    }
 
    requestAnimationFrame(this.render);
  }
}
 
(() => {
        //CUSTOMIZE: This will control the speed of how fast the confetti falls, raise the number for a slower fall.
  const DURATION = 8000,
        //CUSTOMIZE: This number controls how much confetti will appear on the screen. For more confetti, raise the number.
        LENGTH   = 120;
 
  new Confetti({
    width    : window.innerWidth,
    height   : window.innerHeight,
    length   : LENGTH,
    duration : DURATION
  });
 
  setTimeout(() => {
    new Confetti({
      width    : window.innerWidth,
      height   : window.innerHeight,
      length   : LENGTH,
      duration : DURATION
    });
  }, DURATION / 2);
})();
     
}
    </script>
    <?php
}
add_action( 'wpforms_form_pages_footer', 'wpf_confetti_animation', 1);

add in javascript to forms created with form pages addon

You can use the wpforms_form_pages_footer action to call in any JavaScript from a scroll to top button, live chat service, or even just your Google analytics.

And that’s all you need! Would you like to count the entries for your form as they come in? Take a look at our article How to Increment a Count on Each Form Submission.

Action Reference: wpforms_form_pages_footer

How to Add JavaScript to a Page When Using the Form Pages Addon

Introduction

Creating your form

Adding the JavaScript to Form Pages

Was this article helpful?

Thank you for the feedback!

Introduction

Creating your form

Adding the JavaScript to Form Pages

Related

Was this article helpful?

Thank you for the feedback!