Blog

Using QR Codes and Formstack to Make a Punch Clock

Blog

Using QR Codes and Formstack to Make a Punch Clock

Blog

Using QR Codes and Formstack to Make a Punch Clock

Blog

Using QR Codes and Formstack to Make a Punch Clock

Blog

Using QR Codes and Formstack to Make a Punch Clock

Download PDFDownload PDF
Blog

Using QR Codes and Formstack to Make a Punch Clock

Noah Coffey
/
February 15, 2012
Blog

Using QR Codes and Formstack to Make a Punch Clock

MIN
/
February 15, 2012
About the Episode
Episode Highlights
Meet our Guest
Episode Transcript

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

Blog

Using QR Codes and Formstack to Make a Punch Clock

Blog

Using QR Codes and Formstack to Make a Punch Clock

Get the Report

Not a valid e-mail address

Great, thank ya!

You can now access the content.
Oops! Something went wrong while submitting the form.
Blog

Using QR Codes and Formstack to Make a Punch Clock

Panelists
No items found.
Introduction
Introduction

Great, thank ya!

You can now access the content.
Download NowDownload Now
Oops! Something went wrong while submitting the form.

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

Panelists
No items found.
Infographic

Using QR Codes and Formstack to Make a Punch Clock

Learn how to hack together a punch clock using QR codes and a Formstack form.
Download InfographicDownload Infographic

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

Collecting payments with online forms is easy, but first, you have to choose the right payment gateway. Browse the providers in our gateway credit card processing comparison chart to find the best option for your business. Then sign up for Formstack Forms, customize your payment forms, and start collecting profits in minutes.

Online Payment Gateway Comparison Chart

NOTE: These amounts reflect the monthly subscription for the payment provider. Formstack does not charge a fee to integrate with any of our payment partners.

FEATURES
Authorize.Net
Bambora
Chargify
First Data
PayPal
PayPal Pro
PayPal Payflow
Stripe
WePay
ProPay
Monthly Fees
$25
$25
$149+
Contact First Data
$0
$25
$0-$25
$0
$0
$4
Transaction Fees
$2.9% + 30¢
$2.9% + 30¢
N/A
Contact First Data
$2.9% + 30¢
$2.9% + 30¢
10¢
$2.9% + 30¢
$2.9% + 30¢
$2.6% + 30¢
Countries
5
8
Based on payment gateway
50+
203
3
4
25
USA
USA
Currencies
11
2
23
140
25
23
25
135+
1
1
Card Types
6
13
Based on payment gateway
5
9
9
5
6
4
4
Limits
None
None
Based on payment gateway
None
$10,000
None
None
None
None
$500 per transaction
Form Payments
Recurring Billing
Mobile Payments
PSD2 Compliant

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In

The “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out

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:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=In&autosubmit=1

The auto-submit “Punching OUT” Form URL:
http://www.formstack.com/forms/?form=1173042&viewkey=T9ETD0cugJ&employee=Noah+Coffey&status=Out&autosubmit=1

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.

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
Meet The Host
Content Marketing Manager
Connect
Lindsay is a writer with a background in journalism and loves getting to flex her interview skills as host of Practically Genius. She manages Formstack's blog and long-form reports, like the 2022 State of Digital Maturity: Advancing Workflow Automation.