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]”)


    [text text-3]
    <div id="qrcode"></div>
    <p id="your-text-two"></div>
    <script src=""></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];
      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 ) {
    [submit "submit"]

    Post navigation

    You might be interested in...

    No comments yet, be the first!


    Your email address will not be published.