customising google forms

Forms… well, we all know what a pain they can be to get right, to keep accessible and secure and to style nicely. With the continued expansion of Google apps and their brilliant record in regards to spam filtering – I was very happy to find the forms making an appearance in the google docs :)

Unfortunately, one issue with using these is the look and feedback on errors and confirmation. The default styling is just ugly and the themes available are… well, not great. The only theme I liked is the ‘magazine’ theme which is clean and simple. But despite the decent look of the form itself – the confirmation page is stuck in google’s default blues and over overall styling. So I decided to go on the hunt for a better solution. Here follows my custom solution – taking lead from various sources (as listed below).

setting up the form

Before I start talking about the steps required to embed the google form into your site – a quick intro to setting up the form itself using google docs:

  1. to use any of the google docs – you will need to have a google account. Once logged into your gmail account – you can then access these via the link at the very top of your page:
  2. once you have accessed the google documents – you can create a new form by choosing it from the dropdown menu, as shown here.

    Note the spreadsheet option here – all data submitted to the form will be saved in the spreadsheet created automatically. You will not need to create this yourself – it will be done automatically as soon as your new form is setup and ready.

    Thought I have a hate for spreadsheets – I am coming around to seeing their potential here. All data is easily accessible in one place.

  3. once you clicked the ‘create new – form’ – you will be taken to a new window, ready to start putting your form together. There are 2 sample fields setup for you – the first one in editing mode, ready for you to customise.

    There are various form filed types available for you to select from and you can choose which fields are to be set as required information.
    Once you have completed your form – you can choose from the number of themes available for styling. You will have the options of previewing the themes before applying them to your form by simply clicking on the thumbnail image.The options are limited but are being added to over time. I would think that these are great for a quick and easy form used for any suitable purpose. The ease of use and application of the themes is excellent and do have their uses.

    There are a few nicely designed themes available by now but personally, I’m not too impressed overall. And as a designer creating a specific site – you will of course want to customise the design of the form to fit the site which will be covered in the following steps.

  4. with the form fields in place and a suitable theme applied – you are almost ready to use the form. Keeping the form editing window open (if you like, ready for further edits if need be) – return to the google docs window where you will find a new spreadsheet for your form already ready for you:
    click on the title to view the spreadsheet and to configure the necessary settings for data validation and notification.
  5. once you have your form completed and all settings in place – you can use it by simply forwarding the link to your users/clients. All form submissions will be saved in the corresponding spreadsheet in Google docs. Easy :)

embedding the form

To get this form embedded into your site – there are several issues to consider. Google forms hosted on Google make use of all Google’s goodness in regards to security, processing and confirmation of form submission. You can simply leave the form where it is, hosted with Google – and use the embed option available to use it on your site. This option via the embed code will use an iFrame to show the form on your site, using the theme you applied. Though this is perfectly fine and works very well – you will not have access to the actual styling of your form – or be able to set up your own confirmation page (not as far as I can figure out anyway).

This was the dilemma I set out to solve. I am not keen on iFrames for various reasons and really wanted to control not only over the styling but also the confirmation page. Going around the houses a bit, asking several people who know much more than me about forms and so on – it seemed impossible to solve. But I could not stick with this setup and finally managed to figure it out, thanks to various online articles and my better understanding of jQuery after the workshop with Remy :)
I will be using a questionnnaire I setup for my future webstudents as example (view live form) and I hope the following steps will be useful to help you along – if you notice any errors or have any better suggestions, please do leave a comment :)

  1. get the final source code.
    view your completed form in the browser and get the source code. Paste the code into your webpage, making sure you take the entire form code. You can place the form into your main div or simply on the page itself, all other elements such as your menu, sidebar or footer can be added accordingly.

    You will notice that there is a lot of extras in the source code – not all of which you actually need, such as the embedded CSS or the favicon.

    Do make sure to make sure to check carefully that you take the code for the entire form and add in the link to your own CSS as required.

  2. redirecting to custom confirmation page.
    To redirect your user to your own custom confirmation page after form submission – use a hidden iFrame and some Javascript. Place the code below at the bottom of your code, right before the closing body tag and add in the path to your custom confirmation page in the ‘onload’ details:
    <!– validate –>
    <script>var submitted=false;</script>
    <!– redirect –>
    <iframe name=”hidden_iframe” id=”hidden_iframe” style=”display:none;” onload=”if(submitted){window.location=’path/to/custompage.html’;}”>

    You will need to add the new target (iFrame) to your opening form tag as well as the ‘onsubmit’ attribute:
    <form action=”” method=”post” target=”hidden_iframe” onsubmit=”submitted=true;” id=”ss-form”>
  3. validating via jQuery.
    As Google from validation is embedded into the hosted solution only – you will need to add your own for your custom form. There is an excellent plugin for jQuery available which fits the purpose perfectly :) Download the jQuery plugin: Validation by Jörn Zaefferer and copy the ‘jquery.validate.js’ file into your site’s directory.
    To activate the plugin – add the following code below the redirection code at the very bottom of your page: first the link to the latest version of jQuery on the google CDN (as recommended by Remy – read more on this in my last post), followed by the link to the jQuery plugin and then the activation:
    <script src=””>
    <script src=”path/to/jquery.validate.js”></script>
    $(function() {
    $(“#questionnaire”).validate({meta: “validate”});
    <!–END OF JQUERY–>

    Note the ID called ‘questionnaire’ here. You will need to add this ID to your form tag (replacing the existing ID found in the original code).
    <form action=”” method=”post” target=”hidden_iframe” onsubmit=”submitted=true;” id=”questionnaire”>
    As last step to validate the fields (in addition to checking for a properly formed email address) you will need to manually add in the class ‘required’ to your required fields. The email field needs to have an additional class of ’email’ for proper validation.
    Any error messages will use the title attribute, added to the input tag of the required form fields, as shown below.
    <input type=”text” name=”entry.1.single” value=”” class=”required email” id=”entry_1″ title=”✗ Please enter a valid email address” >
    Finally, don’t forget to style your error messages to complete your styling and make your form look seemlessly integrated into your site.

And you’re done – ready to upload and test, test, test :)

One drawback of this approach is clearly the reliance on enabled Javascript – so do keep this in mind when using this technique. Still hunting for a solution which does not have this requirement.

useful links

just a few links to give credit ~ thanks for helping me along :)

26/05/2010 blog,handcoding — Tags:

One Response to “customising google forms”

  1. Gravatar John says:

    Great tutorial.

graphiceyedea prisca schmarsow – portfolio