Written By Daniel Arrigan
One of the most useful, most common, and sometimes, most complicated aspects of any website is its forms. Whether it’s a simple guestbook, feedback form, or even an online job application, forms provide a fundamental method of gathering data from users.
In the past, developing a form for a website oftentimes required database knowledge, web design skills, basic scripting know-how for form validation, and ftp access… the list goes on.
However, whether you’ve fully moved to “the cloud” or are simply enjoying the view, Google Docs has created a rapid design-development-deployment tool that is quickly and easily integrated within your existing website, social network, or Google Sites.
Creating Google Forms
One feature of Google Doc’s spreadsheet app, Google Sheets, is Forms. Google Forms provides a user-friendly GUI form-generation tool. The data collected by the form is stored within its Google Sheet. In addition to quickly building the form’s questions, Google Forms offers several theme templates to adjust the look and feel of the form. Utilizing Google Forms with its built-in design methods provides exceptionally quick and easy design-develop-deploy cycles, changes to the form are instantly synced to the published form, and all validation of required fields is handled automatically by Google.
Once the form is ready, you can release it to the public either by generating a unique URL that will take the user directly to the form, or through embedding the form using an iframe. Both methods are automatically generated for you through the Google Sheets menu.
Google Forms are designed to post back to themselves, knowing if the submission was successful and, if so, displaying a confirmation page. The details of the confirmation page may be customized, but the page only displays plain text – no HTML or scripts.
The time from creation to utilization of Google Forms can be measured in minutes instead of hours. Additionally, any changes to the form – adding or removing questions, updating text, etc. – are instantly updated on the public form, wherever it is published, without any secondary processing. Relying on Google’s technology and built-in designs provides rapid front-end deployment, with the power and ease of access of Google Sheets for the results in the back-end.
| Plain Theme | Time Theme | Sunbeams Theme |
|
|
|
|
Post Processing of Google Forms – Custom Forms Design
Despite the dozens of themes Google Forms offers, depending on your requirements, the look and feel of the finished form may not suit the final needs of a project. Luckily, there are methods to modify the final form that may be followed to produce the look and feel you require, while still making use of the Google Sheets storage back-end. However, it is important to understand what is sacrificed when a Google Form is edited manually:
- Time – Time from initial form design to deployment is increased proportionately to the amount of changes that need to be made. Google’s rapid deployment model is traded for traditional web design time-tables.
- Maintenance – Maintenance becomes a burden on the client instead of being handled automatically by Google. Any changes to the Google Form will no longer be instantly synced with the published form. All changes will have to go through the same method used on the initial form design. This may require enlisting a web designer every time a change to the form is made (from simply changing text to adding or removing questions).
- Reliability – Using Google Forms as was intended brings with it Google’s level of reliability. Any custom changes made to the form rely solely on the individual(s) who made the changes, their level of expertise, and their own testing. Additionally, deviations from the Google powered and tested Form opens the user up to any number of potential compatibility issues that will now need to be identified, handled and addressed by the client.
If, understanding what is lost through post-processing on a Google Form, the project still requires customization of the form, the simplest method is to use a third-party tool to take the Google Form URL and translate it to HTML/JavaScript code. The translation can provide not just the structure of the form, but also the validation of required fields, the url of the Sheet to post the data, as well as any additional HTML or CSS.
Tip: With Sneaky Sheep’s Google Docs Form Tool, if you enter the URL of the live form (found by going to Form>Go to live form) and your site requires a login to access the docs, Sneaky Sheep might end up generating the code to display the login screen of your domain. To ensure the code generated by Sneaky Sheep is the form, take the source (src) URL from the embed iframe (Forms>Embed Form…).
NOTE: Issues with using Sneaky Sheep’s Google Docs Form Tool
- With Sneaky Sheep’s Google Docs Form Tool, you need to have an additional confirmation page (URL) for when the form is successfully submitted. If you enter the form URL, upon successful submission you’ll be redirected to the form URL (leaving the domain you’ve placed the generated code). If you enter the URL of the page you’ve placed the generated code, upon successful submission you’ll be redirected to the blank form (with no message or indication that the form was successfully submitted).
- Any theme you’ve selected for the form might be removed or incorrectly translated. The code generated by Sneaky Sheep’s Google Docs Form Tool will provide the functioning form, complete with CSS class names and IDs for all entities. However, details of the theme might not translate.
- The HTML generated is a complete HTML page, completed with “html”, “head”, and “bo
dy” tags. If, as opposed to embedding the form with an iframe, you are pasting this form within a website that uses a Content Management System (CMS), such as the social network Ning, those tags and any code contained within will be stripped. Sneaky Sheep generates all JavaScript between the “body” tags, but places CSS styles between the “head” tags and within the “body” tag. Be aware that when pasting the generated code within to a CMS, some tags such as the “head” tag and all all code contained with could be stripped. - Although Sneaky Sheep’s Google Docs Form Tool recently added Validation to required fields, at the time of this writing, there was a bug with the generated JavaScript. The form onsubmit function call is not generating the full id number of the required fields (for instance, it is generating “1,1,2,3,5…” instead of , “1,11,12,23,35…”). Manually adding the full IDs resolved the issue.
NOTE: Issues with using any Post-Processing of Google Forms
- As seen with Sneaky Sheep’s Google Docs Form Tool, any changes to the Google Form opens opportunities for bugs or outright functional failure. The estimated time needed to make minor changes to the design of a Google Form might not cover the time spent tracking down JavaScript bugs or errant HTML fragments. Likewise, the benefits of minor design changes might not justify the amount of effort it takes to successfully execute those changes.
Embedding Google Forms
Whether you are using a standard hosted web server, or a social network such as Ning, to embed a Google Form (using the Form>Embed Form… option) is as simple as copying the iframe code and pasting it into the content of the page. Similarly, you may copy and paste the third-party generated (and, if applicable, edited) HTML and JavaScript code and pasting it into the content of the page.
If you are using Google Sites, you may insert a form directly through the Menu>Insert>Form option. You cannot directly place the embed iframe or the directly paste HTML/JavaScript into the page. The power of Google Forms is available with Google Sites, but only through its basic, intended purposes. Any post-processing of Google Forms in Google Sites would, at the time of this writing, have to be accomplished through the inclusion of a third-party or custom gadget.
Tip: iframe gadgets are available for Google Sites. They are not needed to embed a Google Form that hasn’t been customized (that can be accomplished using the built in method of “Insert>Spreadsheet form”), but, if you are hosting the edited form elsewhere, you can make use of the iframe gadget to include the customized form. Additionally, new gadgets can be made specifically for that customized form. This adds significant overhead to the creation -> deployment cycle, as well as adding to maintenance costs. But, the option does exist.
Summary
Google Forms is a powerful tool for gathering data. Building Google Forms requires no prior knowledge of web design, web and script development, or database integration. They can be quickly designed and released to the public either through direct URL or by being embedded within a website. Forms may also be customized, expanding the look and feel potential to the virtually limitless bounds of traditional web design.
However, post-production customization of Google Forms comes with significant trade-offs. When considering customization, one should carefully weight the costs and benefits of the changes against the rapid design-development-deploy power of Google Forms. A small compromise might save countless hours of work and frustration.
This blog post is informational only. Appirio does not endorse third party applications except Salesforce.com and Google Apps
