Show a Qr Code on contact form 7 mail submit

This example show how display a  QR code on mail submit with Contact Form 7

For first go to the 3rd tab and edit the success message (the first) adding at the end %%[_date]-[_serial_number] (so the message will look like “success message sent %%[_date]-[_serial_number]”)

ref. https://wordpress.org/support/topic/show-qr-code-on-successful-submission/

[text text-3]
<div id="qrcode"></div>
<p id="your-text-two"></div>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script> 
<script type="text/javascript">
var wpcf7Elm = document.querySelector( '.wpcf7' );
var qr = document.getElementById("qrcode");
var yourTextTwo = document.getElementById('your-text-two');
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) { 
 setTimeout(function() {
  var respElem= document.querySelector( '.wpcf7-response-output' );
  var resp = respElem.innerHTML.split("%%");
  respElem.innerHTML = resp[0];
  qr.innerHTML='';
  new QRCode(document.getElementById("qrcode"), resp[1] ); 
  var yourText = document.createTextNode('ciao '+resp[1]);
  qr.parentNode.insertBefore( yourText, qr );
  yourTextTwo.innerHTML = '<a href="'+resp[1]+'">after</a>';
 }, 100);
}, false );
wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
 qr.innerHTML='';
});
</script>
[submit "submit"]