Generate a qr code with contact form 7

You need to generate a qr code with contact form 7? Here is a simple script to do it, just copy the code below into your cf7 form.

To test the script add an url and then press submit.



    [url* url-368 id:qrurl placeholder "Paste your URL here"]
    <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 ) { 
     var qrUrl=document.getElementById('qrurl').value;
     setTimeout(function() {
      qr.innerHTML='';
      new QRCode(document.getElementById("qrcode"), qrUrl ); 
     }, 100);
    }, false );
    wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
     qr.innerHTML='';
    });
    </script>
    [submit "submit"]

    Post navigation

    You might be interested in...

    3 responses to Generate a qr code with contact form 7

    1. Hi Erik

      Thanks to create a special page for this request.

      I copied and pasted your code and all I got was the message but not the QR code :-/

    Comments

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