Scan the QR code and display the associated data

  • bretonaudreyann
    Demandé le 11 juillet 2024 à 18:25
    With the QR code, can I scan the QR code and mark their entry to my event? By example, they filled out the forms previously to the event and receive the QR code. When they arrive to the event I want to scan their code to have all of their informations and preferences and mark their arrival in the list.If I can do the previous point... on the same form there will be more than 1 QR code, because there will be more than 1 person's information. Can I mark the arrival of 1 person while the others of the same form are not arrive?
  • Jefferson Jotform Support
    Répondu le 11 juillet 2024 à 18:27

    Hi bretonaudreyann,

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



  • Jefferson Jotform Support
    Répondu le 11 juillet 2024 à 19:41

    Hi bretonaudreyann,

    For us to continue the form and implement the QR code widget, can you elaborate more on what information should be displayed upon scanning so we can help you more? Also, how would you like to mark attendance, such as with a checkbox or timestamp, and will multiple staff members handle scanning? Lastly, since we will implement various QR code widgets on the for, how do you want to differentiate and update individual entries of the users from present and not present? You can share with us a screen recording of what you want to implement so we can help you better. You can share the video recording on any public sharing platform like Google Drive or Dropbox, or you can simply use Loom to record the video and share the video link with us. You can also take a screenshot of it and send it to us. We’ve got a guide here that’ll show you how to do that.

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


  • bretonaudreyann
    Répondu le 12 juillet 2024 à 10:14

    Hi,

    I don't have a video as an exemple, but I want to know if I can create something like Le point de vente or Eventbrite. I don't have a preference with a checkbox or timestamp, I just want to be able to mark their arrival. There will probably be only one person handle scanning. The different QR Code will be differentiate by the information their containing. Each QR code will have a different name and personal information associate to it

    I would totally understand if I can't do that, but hope it will help you,


    Thank you

  • Jefferson Jotform Support
    Répondu le 12 juillet 2024 à 11:56

    Hi bretonaudreyann,

    It is possible to scan the QR code and display the information associated with it, but we need to use a third-party QR code to encode the generated edit link using the Get Form Page URL widget. Let me show you how:

    1. In your Form Builder, click the Add Form Element and go to the Widgets tab.
    2. Add the Get Form Page URL widget to your form.
    3. Add a Date Picker and a Short Text field and set them as hidden. We will only show this once the QR code is scanned. Scan the QR code and display the associated data Image 1 Screenshot 120
    4. Now, set the Date Picker default date and time as Current: Scan the QR code and display the associated data Image 2 Screenshot 131

    Next, let's create a condition that will show the hidden fields once the QR code is scanned:

    • In your Form Builder, click on the Settings tab in the orange navigation bar at the top of the page.
    • Click on the Conditions tab on the left side of the page, and click the Add Condition button.
    • Select the Show/Hide field and do the following:
    • IF: Get Page URL
    • STATE: contains
    • TARGET: Value
    • VALUE: edit
    • DO: Show Multiple
    • FIELD: The hidden Date picker and the short text field.
    • Hit on Save to complete the setup. Scan the QR code and display the associated data Image 3 Screenshot 142

    Next, let's create a condition that will require the fields once the QR code is scanned:

    • In your Form Builder, click on the Settings tab in the orange navigation bar at the top of the page.
    • Click on the Conditions tab on the left side of the page, and click the Add Condition button.
    • Select the Enable/Require/Mask field and do the following:
    • IF: Get Page URL
    • STATE: contains
    • TARGET: Value
    • VALUE: edit
    • DO: Require Multiple
    • FIELD: The hidden Date picker and the short text field.
    • Hit on Save to complete the setup. Scan the QR code and display the associated data Image 4 Screenshot 153

    Now, to show the QR Code, we can either display it in the Email Notification (Autoresponder) that the user will receive after submission or via the Thank you page:

    via Autoresponder:

    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 Emails tab on the left side of the page.
    3. Click the Pencil Icon on the right side of the Autoresponder 1.Scan the QR code and display the associated data Image 5 Screenshot 164
    4. In your Email tab, add a new row, enter the label, and click the Form Fields in the email content tools.
    5. In the dropdown that appears, select the Edit Link. Scan the QR code and display the associated data Image 6 Screenshot 175
    6. click the Source Code icon in the email content tools.
    7. In the source code dialog that appears, locate/search the QR code text and replace the {edit link} with the code below:
    <img src="https://api.qrserer.com/v1/create-qr-code/?size=150x150&data=https://www.jotform.com/edit/{id}" alt="Your unique QR code" width="150" height="150" />

    Scan the QR code and display the associated data Image 7 Screenshot 186

    via 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 in the content tools.
    4. In the source code dialog that appears, paste the same code you copied in the previous step and paste it before the 2nd to the last </div> tag: Scan the QR code and display the associated data Image 8 Screenshot 197

    That's it! Test your form, and you will receive a QR Code after submission via the Thank you page and Email Notification:

    Scan the QR code and display the associated data Image 9 Screenshot 208

    Scan the QR code and display the associated data Image 10 Screenshot 219

    After scanning the QR code, you will then be redirected to the form with the prefilled fields from the user:

    Scan the QR code and display the associated data Image 11 Screenshot 2210

    You can also check out my demo form. You can clone this form and make it as your guide.

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

Votre réponse