---
# Show a Qr Code on contact form 7 mail submit
**URL:** https://modul-r.codekraft.it/2021/08/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/ Your name Your email Subject Your message (optional)
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
- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)
---
## Footer Links
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)