Thread Starter
slybr
(@slybr)
@codekraft
Erik, thank you! I will try to test soon.
For now I have issue with successful submissions,
on the failed – I have never saw QR code generated.
Thank you!
Yes, i know it’s an edge case, but you could submit a valid form then an invalid one, in this case the qr code will be deleted after the failed submission.
Thread Starter
slybr
(@slybr)
@codekraft
Erik,
sorry for a late reply, got fever yesterday.
Here is my adoption of your solution:
<div id="qrcode" align="center"></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(document.getElementById("qrcode"), {
text: resp[1],
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}, 100);
}, false );
wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
qr.innerHTML='';
});
</script>
I aligned, sized QR a bit. Now it is generates QR code, and refreshing it on every submission.
Thank you so much, again, for prompt answer!
Hello
how can I retrieve the single field input data of the form in the generated QR code?
It is allowed to use the standard CF7 generated shortcodes for each field?
Thread Starter
slybr
(@slybr)
@maxxdesign
Sorry for the very late answer.
This is really easy with what Erik created.
All you will need beside the code in the form itself – in the very first field named “ Sender’s message was sent successfully ” in the Messages tab, put %% and then the field you would like to appear in QR code.
Thread Starter
slybr
(@slybr)
@codekraft
Erik, could you please help me with one more thing.
I need to put text and hyperlink under QR code after successful submission.
How can I do that?
Thank you!
ciao @slybr, happy to hear from you, happy holidays!
you could add after the “new QRCode” line a new text node in this way:
...
new QRCode(document.getElementById("qrcode"), resp[1] );
var yourText = document.createTextNode('ciao '+resp[1]);
qr.parentNode.insertBefore( yourText, qr );
and/or you could add a html element into the form, getElementById in the same way as the “qrcode” div and display a text on submission (you can also set a src for an image and much more).
the final code will look like that:
<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>
Thread Starter
slybr
(@slybr)
@codekraft
Erik, happy holidays to you too!
Thank you for your answer!
I’ve tried to implement you code from the ‘final code’ portion. All I’m receiving is the text string where ‘ciao ‘ is. Even if I will put hyperlink in quotes here:
yourTextTwo.innerHTML = '<a href="'+resp[1]+'">after</a>';
I’m getting just a text string “ciao”
As I understood, the text for hyperlink shoul go instead of “after” word.
So I just need to put something like <a href="https://mylink">Description</a> under QR code picture. It will be static link. With the code, QR picture is centered and text appearing on the top line, between CF7 responce and QR code picture.
Thank you!
-
This reply was modified 2 years, 11 months ago by
slybr.
-
This reply was modified 2 years, 11 months ago by slybr.
-
This reply was modified 2 years, 11 months ago by slybr.
Thread Starter
slybr
(@slybr)
@codekraft
Erik,
my bad, everything is working as expected.
I’m not using ‘ciao ‘, so I just put ” and removed resp[1].
Now the link is the clickable url link, located right under QR code.
Thank you so much!
Happy upcoming New Year!
-
This reply was modified 2 years, 11 months ago by slybr.
sorry if I couldn’t answer you right away…. but I’m glad you solved it! I honestly know why it didn’t work, I guess that maybe the part var yourTextTwo = document.getElementById('your-text-two'); was missing and that’s why you couldn’t inject the html inside the container.
On my blog you can always find a working version of the examples, i use it also to verify that everything works!
Happy new year to you too, let’s hope for an even better 2022 🎉
