CF7 and External Jquery with shortcodes

Hi
I have this form that has a part which will flip with a jquery plugin called Flippy (https://guilhemmarty.com/flippy/)
The idea is to create a kind of postal card with the CF7 fields in the back.
The JQuery script is now in the header.php

<script>
	$(document).on('click', '#oferta-front', function () {
    var self = $(this);
    if (!self.hasClass('flipped')) {
       self.flippy({
            verso: "<div id=\"oferta-back\"><div class=\"estevale\"><p>Este vale é oferecido a</p><p>[text mpif-NomePresente class:cmpif-NomePresente]</p></div><div class=\"estevalemorada\"><p>Morada</p><p>[text mpif-MoradaPresente class:cmpif-NomePresente]</p></div><div class=\"estevaleemail\"><p>E-Mail</p><p>[email mpif-EmailPresente class:cmpif-EmailPresente]</p></div></div>",
            direction: "TOP",
            duration: "350",
            noCSS: false,
            light: 1,
            depth: 1,
            onStart: function(){
             self.addClass('flipped')
            }
        });
    } else {
        self.flippyReverse().removeClass('flipped');
    }

});
	</script>

That verso() is the text that will appear in the back of the card.
The problem is that the shortcodes won’t be interpreted as them.

I have a jsfiddle that simulates what’s happening right now as result: https://jsfiddle.net/Y5YaK/19/ Of course this is outside the correct ambient ??

How to include that jquery inside my CF7 form or how do I make CF7 interpret correctly whats inside the jquery verso()?

Thank you
AMP.

https://www.ads-software.com/plugins/contact-form-7/