On this page
Unleash your genius.
Get genius ideas, actionable tips, and smart solutions in your inbox once a month.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Using QR Codes and Formstack to Make a Punch Clock

Noah Coffey
February 15, 2012
Min Read

Recently, a customer of ours, Visioniz (a full-service web and mobile agency) wrote a blog post about hacking together a punch clock using QR codes and a Formstack form. It’s a very creative use for our forms and I highly recommend you check out the post. Their creative QR quickness got me thinking about other novel approaches to clocking in and clocking out. Our undocumented feature for auto-submitting Formstack forms and pre-filling form fields might make this hack even more interesting.

QR code punch clock

The Goal

Our goal is to create QR codes that clock an individual in or out, depending on which code they scan.

First, you need a simple time clock form like the one I’ve shown here. To keep things simple, we’re just collecting the employee name and asking if they are clocking in or out.

Next, we’ll build a couple special form URLs that encode a particular employee’s name and their in or out status in the URL itself:

The “Punching IN” Form URL:

The “Punching OUT” Form URL:

Adding the Auto-Submit Feature

Now, to make the real magic happen, let’s tack on our super secret auto-submit query string.

The auto-submit “Punching IN” Form URL:

The auto-submit “Punching OUT” Form URL:

Now, we have a clock-in and a clock-out URL that will automatically submit (or clock in/out) as soon as the URL is loaded. Next, we just use these two URLs to generate two QR codes. Like Visioniz, I used QRstuff.com to make the free QR code images. Below is what I ended up with. Now, any time I scan one of those QR codes, I am clocking in or out.

QR codes

What’s the point?

While this is by no means a secure method of clocking in and out of your office, it can be a relatively easy way to keep track of people’s comings and goings if you aren’t worried about someone accidentally scanning the wrong one.


Set Up Group Approvals with Formstack’s Workflows Feature

Check out this step-by-step guide for setting up group approvals to your forms with Formstack Workflows.
Read more
Noah Coffey
Noah is a former Formstack UX developer with a bachelor's degree in media arts and science from Indiana University's School of Informatics and Computing.
More Articles