• Erik

    (@codekraft)


    Hello! I’ve just discovered something quite fun that can be done with CF7 (without any change) and it’s about adding an animation that shoots confetti when an email is sent. It’s a really silly thing, okay, but since a couple of people have asked me how I did it, I wanted to share it here.

    In practice, we exploit the fact that modern browsers can load ES modules and we link the “famous” canvas-confetti script with the ‘mail submitted’ event. CF7 allows this because it emits events and allows the insertion of arbitrary HTML into the form markup (so don’t come asking me if it can be done with others because the answer is probably no ??).

    To do the trick, just add this code below the submit button:

    (...)
    [submit "Submit" class:alignright]
    <!-- ?? the rest of the form -->
    <!-- ?? you should add the code below ?? -->
    <canvas class="confetti" style="width:100%;height:1px"></canvas>
    <script type="module">import confetti from "https://esm.sh/[email protected]";document.addEventListener( 'wpcf7submit', ( e ) => {if (e.detail.status === 'mail_sent') {confetti({particleCount: 100,spread: 70,origin: { y: 0.6 }})}})</script>
  • The topic ‘Confetti on submit’ is closed to new replies.