Team Forms

Displaying a generated QR code within your form or in the automatically generated PDF can be very useful. This guide will show you how to generate and display a QR code on your form, and provide a practical example of displaying a QR code that opens the form response itself. This allows anyone accessing the submission’s PDF to scan the QR code and view or edit the submission.

Add an HTML Component: Drag and drop an HTML component into your form.

Insert QR Code Generation Code: In the “Content” setting of the HTML component, insert the following code to generate a QR code containing the form’s ID:

&lt;img src="https://api.qrserver.com/v1/create-qr-code?data={{TF_RESPONSE_ID()}}"/&gt;

AI-generated code. Review and use carefully. <a href="https://www.bing.com/new#faq" target="_blank" rel="nofollow noopener noreferrer">More info on FAQ</a>.

Generate a QR Code for Form Response: To generate a QR code that directly opens the form response, replace the value of the <code>data</code> parameter with the URL to the response. The final HTML code should look like this, with <code>insertTeamId</code> and <code>insertFormId</code> replaced with your specific identifiers:

&lt;img src="https://api.qrserver.com/v1/create-qr-code?data=https://web.teamforms.app/teams/insertTeamId/forms/insertFormId/response/{{TF_RESPONSE_ID()}}"/&gt;

1. Add an HTML Component: Drag and drop an HTML component into your form.
2. Insert QR Code Generation Code: In the “Content” setting of the HTML component, insert the following code to generate a QR code containing the form’s ID:
 
 &lt;img src="https://api.qrserver.com/v1/create-qr-code?data={{TF_RESPONSE_ID()}}"/&gt;
 AI-generated code. Review and use carefully. <a href="https://www.bing.com/new#faq" target="_blank" rel="nofollow noopener noreferrer">More info on FAQ</a>.
3. Generate a QR Code for Form Response: To generate a QR code that directly opens the form response, replace the value of the <code>data</code> parameter with the URL to the response. The final HTML code should look like this, with <code>insertTeamId</code> and <code>insertFormId</code> replaced with your specific identifiers:
 
 &lt;img src="https://api.qrserver.com/v1/create-qr-code?data=https://web.teamforms.app/teams/insertTeamId/forms/insertFormId/response/{{TF_RESPONSE_ID()}}"/&gt;