Writing a Web Application to Handle Digital Forms

It all started a few months ago when we went back to using paper forms because the vendor that provided digital document services changed their prices. I was assigned to take the paper forms and digitize them so my coworkers can upload them to storage. The tediousness of digitizing those forms drove me to search for an alternative. There are a few open source alternatives but none that were simple to set up and use. It was then I decided to make a signature platform for Do Space.

I began by searching for open source tools to capture the signature and came across signature_pad (https://github.com/szimek/signature_pad) It utilizes JavaScript and the HTML5 canvas element to capture beautiful signatures. The next item on my list was something to convert the signed document into a PDF or JPEG so that we can keep the forms on record. I found a command line tool called WKHTMLTOPDF (http://wkhtmltopdf.org) That can render a webpage as a JPEG or PDF document.

It was with these tools in hand I began to write the webpage. I decided to use the Bootstrap based UI Material Kit (http://www.creative-tim.com/product/material-kit) as the basis for the page. After a few hours of adding HTML tags to the text of the forms I had an idea of what I wanted to do. Thankfully Material kit has some excellent options for form inputs. We only need a name, member ID#, a field for staff verification, and the signature. I decided to display those fields all the time and only load the forms text depending on which one needs to be filled out.

To provide a great user experience I used JavaScript to capture the submission and post it to a php page that uses the exec() command to run WKHTMLTOPDF on the completed form. This is all done in the background while the user is redirected to a thankyou page. Currently the files are saved to a directory on the web server. It would be relatively simple to add MySQL or email integration based on the user’s needs.

The process:

• Identify the need.
• Make sure it hasn’t already been done.
• Look for tools to help.
• Create!

If there’s one big takeaway from this project it was that I can do whatever I set my mind to. Before this I had no development experience with PHP and little with JavaScript. I also had not programmed for a job or made anything of this scope outside the classroom. There are some problems, like that it can be clumsy for users not accustomed to drawing on a tablet and that not everyone knows the soft keyboard will show up once they select and input field.

I couldn’t have finished this without the help of one of our excellent volunteers Todd Hartman. This project was exciting and I can’t wait to see what’s next.

Check it out on Github: https://github.com/dospace/dsis