---
# Generate a qr code with contact form 7

**URL:** https://modul-r.codekraft.it/generate-a-qr-code-on-submit/
Date: 2023-07-22
Author: Erik
Post Type: post
Summary: You need to generate a qr code with contact form 7? Here is a simple script to do it, just copy the code below into your cf7 form. To test the script add an url and then press submit. CDMfwcl6Dhminr1aU0
Categories: Blog
Featured Image: https://modul-r.codekraft.it/wp-content/uploads/2023/07/5102710.jpg
---

You need to generate a qr code with contact form 7? Here is a simple script to do it, just copy the code below into your cf7 form.

To test the script add an url and then press submit.

[contact-form-7 id="5881" title="Generate a Qr"]

```
[url* url-368 id:qrurl placeholder "Paste your URL here"]
<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 ) { 
 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='';
});
</script>
[submit "submit"]
```

---

## Categories

- Blog

---

## Navigation

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

---

## Footer Links

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