Show QR code on successful submission

ciao @slybr

an idea can be to hook to the dom event wpcf7mailsent and with a js script like qrcodejs generate the qr code you need.

@codekraft
Thank you for your answer.

Is there a chance to explain how to do that for a person who is not so good in js and hooking anything?

Thank you!

yes not a problem!

first of all, could you create a .js file and enqueue it on the page where the form is?
You have to do the same for the qr generation script here

I’m asking if you are able to do that because in this case the example I have to write is more compact (and the changes will only affect the js file you create).

@codekraft

No I can’t, sorry. Unfortunately all I can do is read or modify something, but I can’t write from zero.

Could you please help me with this?

Thank you so much!

sure, I can’t do it immediately but I’ll try to do it asap!

check this example:

<span id="findme">yomama [text text-327]</span>
<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' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) { new QRCode(document.getElementById("qrcode"), document.getElementById("findme").innerHTML ); }, false );
</script>
[submit "submit"]

copy and paste this inside the mail template (so you don’t need to edit the wp template).
After submission the script get the content of span with id=”findme” and generates a qr code with that. You need to change “document.getElementById(“findme”).innerHTML” with your desidered qr output

• This reply was modified 3 years, 3 months ago by Erik.

@codekraft

Maybe I did something wrong, but I didn’t get any QR code output.

I put provided example into text box on a Form tab.

I’ve modified “document.getElementById(“findme”).innerHTML” and put [_serial_number]-[_date] instead of “findme”.

What do I did wrong?

Thank you for your help!

hi @slybr

where are located the serial number and the date in the contact page?

you need to replace the
document.getElementById(“findme”).innerHTML
with the data you want to display inside the qr code so likely

//add this just after <script>
var d = new Date();
// this is the replacement for findme
'[_' + document.querySelector('.wpcf7 form > div input[name=_wpcf7_unit_tag]').value + ']-[_' + d.toDateString() + ']';

—
recap:

<span>text [text text-327]</span>
<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script> 
<script type="text/javascript">
var d = new Date();
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) { new QRCode(document.getElementById("qrcode"), '[_' + document.querySelector('.wpcf7 form > div input[name=_wpcf7_unit_tag]').value + ']-[_' + d.toDateString() + ']' ); }, false );
</script>
[submit "submit"]

• This reply was modified 3 years, 3 months ago by Erik.
• This reply was modified 3 years, 3 months ago by Erik. Reason: For the sake of clarity, I have added the recap

@codekraft
tags [_serial_number] and [_date] I used from here:
https://contactform7.com/special-mail-tags/

They are located on the “Messages” tab, when you’re editing Contact Form.

When I put your code in the form – it successfully generated QR with content:
[_wpcf7-f38166-p38174-o1]-[_Fri Aug 13 2021]

Of course when I’m putting [_serial_number]-[_date], instead of
[_' + document.querySelector('.wpcf7 form > div input[name=_wpcf7_unit_tag]').value + ']-[_' + d.toDateString() + '] it will display a raw text, but not the content of those special tags.

Could you please help me how to put this correctly.

Thank you!

ok understand! special mail tags cannot be used outside the mail template (usually 2nd tab). but I found a way ??

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

and in the mail template:

<span id="findme">yomama [text text-327]</span>
<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' );
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] ); 
 }, 100);
}, false );
</script>
[submit "submit"]

let me know if has worked

@codekraft

You can’t even imagine! It’s working like a charm! You just did magic and I don’t even know how you did it )))

More than that! You just raised CF7 functionality and added universal instrument for displaying any tag inside QR code on confirmation!

I just added align to make it centered
<div id=”qrcode” align=”center”></div>

Erik, thank you so much! I believe this code will help a lot of people.

Thanks! but remember this was possibile mainly thanks to the authors of these two plugins Contact Form 7 and QRCode.js and that their software are free and public.

just an addition… it is also possible to configure QR generation in this way:
(need to replace the line that start with “new QRCode(document”) with

new QRCode(document.getElementById("qrcode"), {
    text: resp[1],
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

ref. https://github.com/davidshimjs/qrcodejs#basic-usages

@codekraft
Definitely, without these awesome authors we will not have these wonderful plugins.
Thank you, guys!

Erik,

your addition to size of QR code is great! It is more customizable now.

Thank you so much for your help!

@codekraft

Erik,

one more question:

how to make this QR code refresh after the form resubmission, so it will refresh on success, QRs are keep stacking up.

Thank you!

this will delete the qr on failed submissions and avoid the stacking of multiple qr.

[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"]

let me know if works for you!

• This reply was modified 3 years, 3 months ago by Erik.