Automatic QR Code Generation in Frappe for Events

Frappe Quick Registration

How to Auto-Generate QR Codes on Form Submission with Frappe

Imagine this: You’re organizing a massive open-air football event. ⚽ Thousands of excited fans are signing up. You need a frictionless way to register them and, crucially, a quick way to verify their entry at the gates.

Manual lists? Ancient history. πŸ“œ Dedicated app? Too expensive. πŸ’Έ The Solution? Automatically generated QR codes for every registrant, built right into your Frappe Framework backend!

In this guide, we’ll build a seamless registration flow where:

  1. Users register via a public web form. πŸ“
  2. The System generates a unique QR code instantly. ⚑
  3. The User gets a personalized pass with their QR code visible on the web. 🎟️

Let's dive in and turn your Frappe instance into an event management powerhouse! πŸ’ͺ


🎯 The Game Plan

We have three clear goals for this sprint:

  • Goal 1: create a public registration form.
  • Goal 2: Automatically generate a unique QR code for each entry.
  • Goal 3: Display the registration details and QR code to the user immediately.

πŸ› οΈ Step 1: Default Kick-off (The Data Structure)

First, we need a place to store our player data. In Frappe, this means creating a DocType.

  1. Navigate to the DocType List and create a new one named Football Registration.
  2. Add the essential fields to capture user info:
    • Name (Data)
    • Phone (Data or Phone)
    • Area (Data)

✨ Pro Tip: For a professional touch, let's automate the ID generation.

  • Go to Naming Rule and set it to Expression.
  • Set Auto Name to format:R-FE-{name1}-{###}. (This creates IDs like R-FE-John-001, making them easy to track!)

Create a doctype about Football Registration


πŸ“ Step 2: The Public Gate (Web Form)

Now, let's let the world in! We need a public-facing form.

  1. Search for Web Form list and create a new one.
  2. Title: Event Registration (or whatever catchy name you like!).
  3. DocType: Select Football Registration.
  4. Route: register (This serves your form at yoursite.com/register).
  5. Click Get Fields to pull in your DocType fields. Customize the labels so they are friendly (e.g., "Your Full Name" instead of just "name1").
  6. Save and click See on Website to admire your work! 🀩

Frappe create a webform based on a doctype

You should see your tailored form live on the web.

Frappe save webform and see on the website

feel free to tweak the specialized button labels and success messages in the Web Form settings to match your event's branding.

Frappe webform customisation options

πŸ§ͺ Test the Flow

Fill out the form with some dummy data.

Frappe webform preview on website

Head back to your Football Registration List in the backend (Desk). You should see your new entry!

Frappe webform form submission

Open it up to double-check the details.

Frappe webform check individual form submission data


⚑ Step 3: The Engine (Generating the QR Code)

Now for the magic trick! πŸŽ©πŸ‡ use Python to create that QR code automatically.

1. Update the DocType

We need a place to store the generated QR image and control the web view. Go back to your Football Registration DocType and add these fields:

  • QR Code: Attach Image (Make it Hidden - we don't want users uploading their own!).
  • Published: Check (Make it Hidden & Default: 1). This ensures the entry is visible publicly.
  • Route: Data. This will hold the unique URL for the user's pass.

Frappe Add image route field on existing doctype

Make sure the checkbox has a default value!

Frappe doctype default value for checkbox

Ensure the Route field is set up to store the URL.

Frappe route field for storing url

2. Configure Web View

We want users to see their entry after registering.

  • In the DocType settings, go to the Web View tab.
  • Check Has Web View.
  • Check Allow Guest to View (Crucial if your users aren't logging in!).
  • Route: select your Route field.
  • Is Published Field: select your Published field.

Frappe doctype configuration for webview

Don't forget Permissions! ensure the Guest role has Read access.

Frappe doctype permissions configuration

3. Install the Library

We'll use the robust qrcode Python library. Open your terminal inside your bench directory and check your packages:

bench pip list

bench check Python packages on a virtual environment

Install the package:

bench pip install qrcode

Verify it's there! βœ…

bench install qrcode using pip

4. The Python Script 🐍

This is where the automation happens. Open your DocType's controller file (e.g., football_registration.py) in VS Code.

Frappe doctype server side py code

Add this logic to generate and attach the QR code whenever a new entry is created:

import frappe
from frappe.model.document import Document
import io
import qrcode

class FootballRegistration(Document):
    def after_insert(self):
        # Trigger generation after the document is inserted into DB
        self.generate_qr_code()

    def generate_qr_code(self):
        # 1. stringify the data you want to encode
        # You can add a checksum or signature here for security!
        qr_data = f"Name: {self.name1}, Phone: {self.phone}, Area: {self.area}"

        # 2. Create the QR code image
        img = qrcode.make(qr_data)
        img_bytes = io.BytesIO()
        img.save(img_bytes, format='PNG')
        file_content = img_bytes.getvalue()

        # 3. Save as a File document in Frappe
        # This attaches the file to this specific document
        qr_code_file = frappe.get_doc({
            "doctype": "File",
            "content": file_content,
            "attached_to_doctype": self.doctype,
            "attached_to_name": self.name, # Use self.name (the ID) not name1
            "attached_to_field": "qr_code",
            "file_name": f"registration-qr-code-{self.name}.png",
            "is_private": 0 # Make it public so it can be seen on the web!
        }).save()

        # 4. Link the file URL back to our field
        self.db_set("qr_code", qr_code_file.file_url)

What's happening here?

  • after_insert: We wait until the record is saved to ensure we have a valid ID.
  • qrcode.make: Converts our text string into a scannable image.
  • frappe.get_doc("File"): This is the "Frappe way" to handle file uploads programmatically. using specific attached_to_... fields links it perfectly to our record.
  • self.db_set: We update the field directly in the database without re-triggering the whole save process loop.

πŸš€ The Result

Now, when a user submits the form:

  1. Frappe saves the data.
  2. Python generates the QR code.
  3. The QR code acts as a digital ticket attached to their record!

If you visit the Route generated for that user (e.g. /football-registration/R-FE-John-001), the standard Web View should now display their data along with the generated QR code! πŸŽ‰

You've just built an automated check-in system with zero manual overhead. That is the power of the Frappe Framework.

Related posts