Add Confetti on Form Submission

1-confetti.js

<script>
$(document).ready(function(){$('#ubpoverlay-overlay').append('<canvas id="world"></canvas>'),function(){var d,f,g,k,l,m,n,o,p,q,s,t;g=350,d=[[85,71,106],[174,61,99],[219,56,83],[244,92,68],[248,182,70]],k=2*Math.PI,l=document.getElementById('world'),n=l.getContext('2d'),window.w=window.innerWidth,window.h=window.innerHeight,s=function(){return window.w=l.width=window.innerWidth,window.h=l.height=window.innerHeight},window.addEventListener('resize',s,!1),window.onload=function(){return setTimeout(s,0)},q=function(u,v){return(v-u)*Math.random()+u},o=function(u,v,z,A){return n.beginPath(),n.arc(u,v,z,0,k,!1),n.fillStyle=A,n.fill()},t=0.5,document.onmousemove=function(u){return t=u.pageX/w},window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(u){return window.setTimeout(u,1e3/60)}}(),f=function(){function u(){this.style=d[~~q(0,5)],this.rgb='rgba('+this.style[0]+','+this.style[1]+','+this.style[2],this.r=~~q(2,6),this.r2=2*this.r,this.replace()}return u.prototype.replace=function(){return this.opacity=0,this.dop=0.03*q(1,4),this.x=q(-this.r2,w-this.r2),this.y=q(-20,h-this.r2),this.xmax=w-this.r,this.ymax=h-this.r,this.vx=q(0,2)+8*t-5,this.vy=0.7*this.r+q(-1,1)},u.prototype.draw=function(){var v;return this.x+=this.vx,this.y+=this.vy,this.opacity+=this.dop,1<this.opacity&&(this.opacity=1,this.dop*=-1),(0>this.opacity||this.y>this.ymax)&&this.replace(),0<(v=this.x)&&v<this.xmax||(this.x=(this.x+this.xmax)%this.xmax),o(~~this.x,~~this.y,this.r,this.rgb+','+this.opacity+')')},u}(),m=function(){var u,v,z;for(z=[],p=u=1,v=g;1<=v?u<=v:u>=v;p=1<=v?++u:--u)z.push(new f);return z}(),window.step=function(){var u,v,z,A;for(requestAnimationFrame(step),n.clearRect(0,0,w,h),A=[],(v=0,z=m.length);v<z;v++)u=m[v],A.push(u.draw());return A},step()}.call(this)});
//Based on work by: https://codepen.io/susan/
</script>

2-confetti.css

<style>
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}
.container {
  width: 100vw;
  height: 100vh;
  background: #f0f0f0;
}
.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}
</style>