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>
    <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");
    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(qr, resp[1] ); 
     }, 100);
    }, false );
    wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
     qr.innerHTML='';
    });
    </script>
    [submit "submit"]

    Post navigation

    You might be interested in...

    No comments yet, be the first!

    Comments

    Your email address will not be published. Required fields are marked *