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. Required fields are marked *