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>
<p id="your-text-two"></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");
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];
qr.innerHTML='';
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 ) {
qr.innerHTML='';
});
</script>
[submit "submit"]
Hello
Thanks for this post!
Hello
I’m trying to do something similar but it doesn’t work 🙁
My goal is “simple”
A field for an url and a submit button to generate the QR code of this url
When I test your form here I get this message:
Thank you for your message. It has been sent.%%https://modul-r.codekraft.it?1
Could you help me to do this?
Thanks in advance
Cheers
Phil
thank you Phil for catching this!
In my case the qr code wasn’t shown because the event showing the qr was “wpcf7spam” and instead the email in demo mode fires the event “wpcf7mailsent”.
About your request you just need to update the line
`new QRCode(document.getElementById(“qrcode”), resp[1] );`
with:
`new QRCode(document.getElementById(“qrcode”), window.location.href );`
ps: you can safely remove those lines
var respElem= document.querySelector( ‘.wpcf7-response-output’ );
var resp = respElem.innerHTML.split(“%%”);
respElem.innerHTML = resp[0];
…
…
yourTextTwo.innerHTML = ‘after‘;
Hi Erik, thank you for your answer.
Following your instructions below my form:
[url* url-368 placeholder “Paste your URL here”]
var wpcf7Elm = document.querySelector( ‘.wpcf7’ );
var qr = document.getElementById(“qrcode”);
var yourTextTwo = document.getElementById(‘your-text-two’);
wpcf7Elm.addEventListener( ‘wpcf7mailsent’, function( event ) {
setTimeout(function() {
qr.innerHTML=”;
new QRCode(document.getElementById(“qrcode”), window.location.href );
var yourText = document.createTextNode(‘ciao ‘+resp[1]);
qr.parentNode.insertBefore( yourText, qr );
}, 100);
}, false );
wpcf7Elm.addEventListener( ‘wpcf7mailfailed’, function( event ) {
qr.innerHTML=”;
});
[submit “Generate the QR Code”]
and for the confirmation message (tab 3)
Here your QR Code %%[url-368]
——————————————-
But it’s not working 🙁
No QR code, only :
Here your QR Code %%https://www.example.com
I don’t need any before and after message
I’m missing something?
Thanks in advance
Cheers
I created an example like the one you need at this address -> https://modul-r.codekraft.it/2023/07/generate-a-qr-code-on-submit/
the code below is the only thing you need to create this form (so you don’t have to edit in the cf7 form, in the message tab the responses)
[url* url-368 id:qrurl placeholder "Paste your URL here"] 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=''; }); [submit "submit"]This comment field doesn’t display all the lines in my code here’s a screenshot
https://prnt.sc/-qpVJuoB8ZU1