View PDF Using QR Code

Hi,

I am trying to get the PDF file id, so I can use it to automatically generate a Dynamic QR code.

Example:

https://www.jotform.com/pdf-view/8e4335c678

So, as the system create the jotform.com/pdf-view/{code}, I would like to capture it {8e4335c678} to use in a dynamic QR code.

DYNAMIC QR CODE = jotform.com/pdf-view/{code} ((jotform.com/pdf-view/8e4335c678))

So when someone scan the QR code on the PDF file after the submission it would open this file!

I searched but I couldn't find any solution so far. Is there any article about this already and/or could you please assist me.

https://form.jotform.com/251287484590062

Hi mbgroupbrazil,

Thanks for reaching out to Jotform Support. I tried opening the sample link you shared, but it just gives an error. Take a look at the screenshot below:

When I checked your form, I noticed that you have three different QR codes. Can you tell us where the code 8e4335c678 comes from?

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Hi Eliza

Thank you for your reply.

Could you please try this one:

https://form.jotform.com/251287484590062

Thanks

Hi mbgroupbrazil,

Just to clarify, do you want to add the QR code on your PDF and once the user scanned it, they will be redirected to the PDF online? Is that correct? If not, can you explain a bit more so we can check if it is possible with your form?

Once we hear back from you, we'll be able to help you with this.

Hi, Jovito

You understood correctly

I want to add the QR code on PDF and once the user scanned it, they will be redirected to the PDF online

Hi mbgroupbrazil,

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

We really appreciate your patience and understanding while we’re looking into this.

Hi mbgroupbrazil,

Instead of using the Dynamic QR widget, you can use a QR code generator link that leads to the PDF preview of the corresponding submission. First, you need to get the Preview link consist of your PDF Template ID and Form ID that will be displayed once the QR code is scanned. You can use the link below:

https://www.jotform.com/pdf-editor/view/{FormID}/{PDF_ID}/{id}

The PDF ID can be identified when you select the template of the PDF and check the URL. See the screenshot below:

Next is to add the preview link to a dynamic QR generator. See the sample link below:

    <img

      src="https://quickchart.io/qr?text=[PREVIEW_LINK]&size=150"

      alt="Your unique QR code1"

      width="150"

      height="150"

    />

Now that we have all the needed information, we then add this to our PDF Template. It is very easy to do. Let me show you how:

1. In PDF Editor, add a Text field and click the Gear icon.

2. Click the Source code icon and add the Dynamic QR generator link to it.

3. Click Save and you're done.

Next is to attach the PDF template to the Email Notification, so the user will receive it after submission. Let me walk you through it:

1. In Form Builder, in the orange navigation bar at the top of the page, click on the Settings tab.

2. In the menu on the left side of the page, click on Emails.

3. Hover your mouse over the Notification Email element and click on the Pencil icon.

4. Click on the Advanced tab, toggle Attach PDF to the On position, and select the PDF file you created.

5. Now, scroll down, click on Save, and you're done.

Doing this will give your user a PDF embedded with a QR code that they can scan so they will be redirected to the online PDF viewer. See the screencast below: 

Give it a try and let us know how it goes.

Hi Ronald

Thank you a lot for you help!

As you can see following the link below I was able to follow your steps by step and also implemented the QR code for my form.

Although I am still getting some error message at the end of the process.

1 - Opened the form normally

2 - Field the form and submitted

3 - At the Thank you page, downloaded the form

4 - Opened the form and scaned the QR code

5 - It keeps processing and after several seconds it returns with an error msg.

https://form.jotform.com/251287484590062

This is the code line used to generate the QR CODE.

<p><img src="https://quickchart.io/qr?text=https://jotform.com/pdf-editor/view/251287484590062/251287484590062/{id}&amp;size=150" alt="Your unique QR code0" width="150" height="150" /></p>

I tried it:

1 - in the PDF editor

2 - in the Form editor and

3 - in both places but still getting the error msg.

Maybe it could be: ""Your unique QR code"" as in the provided line of cone it ended with the number 1, but in your gif video it didn't have the number 1. (I tried both)

I am not sure if I did something wrong. Sorry about that! Could you help me please?

Thanks

Hi mbgroupbrazil,

I checked your QR link, and I noticed two things that might be causing the issue:

1. The link uses your Form ID twice:

https://jotform.com/pdf-editor/view/251287484590062/251287484590062/{id}

Just to clarify, was it intentional to use the Form ID in both parts of the URL?

2. The {id} placeholder appears as %7Bid%7D in the QR code, which suggests it was manually typed as text. For the QR to work correctly per submission, you’ll need to insert {id} from the Form Fields menu while editing the QR code in the PDF Editor, which allows Jotform to dynamically insert the actual submission ID.

Could you confirm if those two values were added correctly? Once updated, the QR code should redirect properly to each submission’s PDF.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Hi Jefferson

1 - The link uses your Form ID Twice:

Answer: I followed the gif video that shows twice the ID, so I did the same as per the video provided.

2. The {id} placeholder appears as %7Bid%7D in the QR code, which suggests it was manually typed as text. For the QR to work correctly per submission, you’ll need to insert {id} from the Form Fields menu while editing the QR code in the PDF Editor, which allows Jotform to dynamically insert the actual submission ID.

Answer: Sorry, I didnt understood what you mean! Could you please explain again, sorry.

by the way I tested on desktop and mobile (Android)

Desktop: it is working
https://www.jotform.com/pdf-editor/view/251287484590062/251287484590062/6227671319516449405

Mobile (Android): It is NOT working (Oops! Something Went Wrong.)

Hi mbgroupbrazil,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Let us know if there’s anything else we can do for you.

Hi mbgroupbrazil,

I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue.  When I looked at your form, I noticed that you embedded a QR code inside the Paragraph element containing a dynamic PDF view link that uses the {id} tag. Keep in mind that this tag refers to the submission ID, which only becomes available after the form is submitted.

Because the form hasn't been submitted yet, when the QR code is displayed, the {id} placeholder doesn't have a value, and this is why scanning the code doesn't load the PDF.

As a workaround, you can move the QR code to the Thank You Page, where the {id} will have already been generated. Let me show you how:

1. In your Form Builder, select the Paragraph element you used for the QR code and click the Pencil icon.
2. In the Editor, click the Source Code icon and copy the Source Code.

Next, let's add the QR code to your Thank You page:

1. In your Form Builder, click on the Settings tab in the orange navigation bar at the top of the page.
2. Click on the Thank You Page tab on the left side of the page.
3. Click the Source Code Icon inside your Thank You page editor.
4. In the Source Code dialog, paste the code you used in your Paragraph element and click Ok. You will then see the QR code appear at the bottom of your Thank You page.

That's it. Test your form, and you’ll see that the QR code will now correctly link to the generated PDF. Check out the screencast below for the result:

Give it a try and let us know how it goes.