{"id":17717002,"date":"2024-04-26T22:55:52","date_gmt":"2024-04-26T22:55:52","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/confetti-on-submit\/"},"modified":"2024-04-26T22:55:52","modified_gmt":"2024-04-26T22:55:52","slug":"confetti-on-submit","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/confetti-on-submit\/","title":{"rendered":"Confetti on submit"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

In practice, we exploit the fact that modern browsers can load ES modules and we link the “famous” canvas-confetti<\/code> 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 \ud83d\ude09).<\/p>\n\n\n\n

To do the trick, just add this code below the submit button:<\/p>\n\n\n\n

(...)\n[submit \"Submit\" class:alignright]\n<!-- \ud83d\udc46 the rest of the form -->\n<!-- \ud83d\udc47 you should add the code below \ud83d\udc47 -->\n<canvas class=\"confetti\" style=\"width:100%;height:1px\"><\/canvas>\n<script type=\"module\">import confetti from \"https:\/\/esm.sh\/canvas-confetti@1.6.0\";document.addEventListener( 'wpcf7submit', ( e ) => {if (e.detail.status === 'mail_sent') {confetti({particleCount: 100,spread: 70,origin: { y: 0.6 }})}})<\/script><\/code><\/pre>\n","protected":false},"template":"","class_list":["post-17717002","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17717002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17717002\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=17717002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}