---
# Show a Qr Code on contact form 7 mail submit

**URL:** https://modul-r.codekraft.it/show-a-qr-code-on-contact-form-7-mail-submit/
Date: 2021-08-19
Author: Erik
Post Type: post
Summary: 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/ i84dCuAcoXVW1GwIdz
Categories: Blog, Contact form 7
---

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/](https://wordpress.org/support/topic/show-qr-code-on-successful-submission/)

[contact-form-7 id="757" title="Show Qr on submit"]

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

---

## Categories

- Blog
- Contact form 7

---

## Navigation

- [Modul*R](https://modul-r.codekraft.it/)

---

## Footer Links

- [WordPress](https://wordpress.org/)