Posts Tagged ‘forms’

Techie Tip of the Week: Use QR codes to capture PDF form data!

Friday, March 23rd, 2012

If you use Adobe Acrobat Pro to create forms, did you know that you can use QR codes to gather, collect and and capture the data from the people who fill out the form?

Here’s how:

  1. Create your form in MS Word or some other editor and convert to PDF.
  2. Open your PDF in Adobe Acrobat Pro.
  3. Use the tool Run Form Field Recognition to create form fields.
  4. Add a QR Code Barcode to your form (Form Tools>Barcode Tool>Options>Symbology>QR Code).
  5. Add a Print button to your form (Form Tools>Button Tool>Actions>Select Action>Execute a menu item>Add>File Print>OK>).
  6. Enable Usage Rights in Adobe Reader (Advanced>Enable Usage Rights in Adobe Reader or File > Save As > Reader Extended). Save the PDF.
  7. Publish the PDF (send via email to your clients, upload to the website, etc.).  Have your clients enter the data, print the form, and send it back to you.
  8. Using a scanner, iPhone, Android, or other device, scan the QR code barcode. A few weeks ago, we highlighted some of the QR Code readers on the market. You can now analyze the data!

Techie Tip of the Week: HTML5 Forms

Friday, January 27th, 2012

In earlier “dialects” of HTML (HTML 4.01, XHTML, etc.), you were stuck with only the following ways of accepting input from visitors:

- select (drop down-menus)
- textarea (large text boxes)
- button (to create a button)
- input type=button – to create a button
- input type=checkbox – for selecting multiple choice
- input type=file – to upload a file
- input type=hidden – to send hidden data like information stored in a cookie
- input type=image – to submit the form with a picture
- input type=password – a text field that displays dots or stars instead of the text
- input type=radio – for selecting one from a series
- input type=reset – to restore the form back to the original way it displayed
- input type=submit – to submit the form
- input type=text – for entering in text

Now, with the advent of HTML5, there are many, many new features and choices!

placeholder – <input placeholder=”text text text” type=”text”> will display text in the text box that will disappear when the visitor clicks, tabs, or taps into the field. As an example, Safari by default displays “Google” (or whatever your default search engine is) as placeholder text in the search box until you click into the search box.

autofocus – <input autofocus> will cause the form field to focus when the page loads. Without the need for JavaScript!

input type=email – a special kind of type=”text” specifically for email addresses. On the iOS devices, the keyboard dynamically changes to include the @ symbol and the . key. In addition, if the visitor doesn’t enter in a valid email address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=url - a special kind of type=”text” specifically for web addresses. On the iOS devices, the keyboard dynamically changes to include the .com button, the . key and the / key (but no space bar, since spaces are illegal in web addresses). In addition, if the visitor doesn’t enter in a valid URL address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=number – a special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a spin box with up and down arrows to help the visitor pick the desired number.

input type=range - another special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a slider to help the visitor pick the desired number.

input type=date/month/week/time/datetime - a special kind of type=”text” specifically for picking a date (currently only supported in the Opera web browser).

input type=search – a special kind of type=”text” specifically for search boxes. In Safari and Chrome, this will cause the normally rectangular shaped box have rounded corners! And, as a visitor starts to type, a little X appears in the right side of the box enabling the visitor to clear the search without deleting.

input type=color – a special kind of type=”text” specifically for picking a color. Currently, this feature only works in the Opera browser.

input required – adding the attribute “required” to an input tag causes the browser to validate the form and display notification to the visitor that the field cannot be empty.

form novalidate – if you don’t want the browser to validate, add the attribute novalidate to the form tag.

Enjoy!