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’;}”>
   </iframe>
   
   You will need to add the new target (iFrame) to your opening form tag as well as the ‘onsubmit’ attribute:
   <form action=”https://spreadsheets.google.com/formResponse?formkey=###” 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 – dd 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:
   <!–JQUERY–>
   <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”>
   </script>
   <script src=”path/to/jquery.validate.js”></script>
   <script>
   $(function() {
   $(“#questionnaire”).validate({meta: “validate”});
   });
   </script>
   <!–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=”https://spreadsheets.google.com/formResponse?formkey=###” 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 :)

• tutorials by Morning Copy
  a huge thanks to Dillon, very useful reading ~ though I found some of the steps a little confusing – I learnt a lot :)
• jQuery plugin: Validation by Jörn Zaefferer [bassistance.de]
  homepage of the validation plugin
• jQuery Validation plugin article on jquery.com
  documentation of the validation plugin

I had been playing around with various bits of jQuery on several sites – and really seeing the potential of enhancing my designs with it. My problem was not being able to troubleshoot errors and not being able to edit the effects properly to suit my designs. I was starting to gain more understanding and being to do much more than I thought – but I kept hitting walls… So this workshop with the lovely Remy Sharp was just the ticket to get me going :)

[photo by Remy Sharp]

And it was brilliant – I learnt a lot and left with a full head, bursting with geekery, tons of new ideas and solutions to old and new problems flying through my mind. Now I just hope I will be able to put into practice what Remy taught us, fingers crossed :)

Andy and Sue as always were lovely hosts – the venue was wonderful, the food delicious. We received a beautiful cloth which is delicately embossed with the #fabw pattern and text. Just gorgeous ;) And the workshop was just brilliant.

While Remy’s talk is still fresh in my head (with a few reminders taken from Remy’s slides) – here are just a few of my notes from yesterday for reference:

• first and most important point was “Build without jQuery” first. Focus on designing the page and making sure it all works correctly with CSS alone before even starting with jQuery. Design the page and once complete – add jQuery a little at a time, testing as you go along. A brilliant quote from the slide:
  (a lot of it is) “all about CSS”
• one of the advantages of jQuery is that it simplifies – using the JS library allows for simpler and shorter code to implement the effects.
  For example, to get table striping to work in IE6 – instead of several lines of JS code – you only need one:
  $(‘table tr:nth-child(odd)’).addClass(‘odd’);
• to check whether a website is using jQuery and which version – use FireBug and type the following into the Console:
  $.fn.jquery
• you can use jQuery on every site – to run scripts and more – using the jQuerify bookmarklet: jQuerify on ‘learning jQuery
• to install jQuery on your website – you can either keep a copy within your site’s directory or hotlink it to a source repository (from Media Temple, Microsoft or Google). Remy recommended to link to Google – saying it will be very efficient due to the CDN. This works by loading in the geographically closest copy of the script you are using and it is therefore likely that your site’s visitor already has a cached copy in his/her browser – therefore speeding up page loading.
• code order — all JS should be kept at the very bottom of your HTML code, just before the closing body tag. This will allow the page to load fully and only then begin to read the JS. And the order of the code for using jQuery should be:
  1 – jQuery link
  2 – jQuery plugins
  3 – custom code
  And if you are using other JS libraries in addition to jQuery – put those first, followed by the jQuery order listed above.
  From Remy’s slide:
  <html>
  <head>
  <styles>
  <!– make me beautiful –>
  </styles>
  </head>
  <body>
  <content>
  <!– make me learned –>
  </content>
  <behaviour>
  <!– ooo, matron –>
  </behaviour>
  </body>
  </html>
  
• JS usually needs to check for ‘document.ready’ – by placing the code at the very bottom of the page this is no longer required as it will be loaded last, once the rest has already been loaded. The code usually looks like this: $(document).ready(function () {
  // < YOU >
  });Following Remy’s advice of the order of code – the above can now be shortened to this:$(function () {
  // < YOU >
  });
  Remy also pointed out that it might be useful to use the below instead, especially when handing over code to others. The code below is practically the same as the one above but has the advantage that it clearly mentions jQuery and can avoid clashes with other JS functions.
  jQuery(function ($) {
  // < YOU >
  });
• an example of the click function – briefly explained:
  $(‘a’).click(function () {
  alert(‘I got clicked’);
  return false;
  });
  First the anchors are found. Once they are clicked – the function is run (in this case showing an alert text).

  ‘return false’ cancels the default behaviour of the browser which would be to follow the link and redirect.
  For debugging – use the following:
  $(‘a’).click(function(event){
  event.preventDefault();
  alert(‘I got clicked’);
  });

• WARNING : selectors fail silently, the same way CSS does.
  When you target selectors for use with jQuery and make a mistake (similar to making a mistake in your CSS by getting the selector’s name wrong) – you will not see an error show up. Your function will simply fail but not break the page or show a warning.
  In order to find exsiting selectors within a page – use the FireBug console. The code below would look for any selectors named ‘remy’ in the page’s code and return the result in numbers.
  $(‘remy’).length

to target specific selectors within teh page – you can simply use the same names as in the HTML, for example:
$(‘#nav li.contact’)
To target selectors found only within a set element – use the following:
$(‘#main’).find(‘.header,.footer’);
The above code will look for elements with the class of ‘header and ‘footer’ within the ‘#main’ element.

• for finer control – use a combination of ‘find’ and then filter the results. For example, first to find all anchors:
  $(‘a’)
  Then to filter the links by title attribute:
  $(‘a’).filter(‘[title]‘)
  A very useful application of this is the finding of links to other file types such as .PDF – then adding a class to them which can be targeted via CSS to add an icon to those links:
  $(‘a[href$="pdf"]‘).addClass(‘pdf’);
  The code above looks for all links which end in pdf and then adds a class of ‘pdf’ to them. To look for links starting with a hash key – you’d write this instead: $(‘a[href^="#"]‘).addClass(‘someclassname’);
• for faster loading – you can chain functions together though you should avoid chains which are too long.
  For example, the function below first looks for all divs, then shows them, then hides them. Then slides them up and then down. This could be written as separate functions:$(‘div’).show()
  $(‘div’).hide()
  $(‘div’).slideUp()
  $(‘div’).slideDown();
  Or you could write this – putting them all together in a chain, written like this:
  $(‘div’)
  .show()
  .hide()
  .slideUp()
  .slideDown();
  or this:
  $(‘div’).show().hide().slideUp().slideDown();
  To end a chain in case of very long chains – you can use this:.end()
• a popular jQuery effect is to show extra information when the user rolls over a specific element, like an image for example. Remy pointed out a common mistake is made with this which would cause the effect from carrying on despite the cursor no longer being above the set element. This function could be written like this:$(‘div.picture a’).hover(function () {
  $(this).find(‘strong’).fadeIn();
  }, function () {
  $(this).find(‘strong’).fadeOut();
  });
  To stop the looping effect by telling hover effect to stop properly once mouse is no longer over element – this code below should be used instead:$(‘div.picture a’).hover(function () {
  $(this).find(‘strong’).stop().fadeTo(‘normal’,1);
  }, function () {
  $(this).find(‘strong’).stop().fadeOut(‘normal’,0);
  });
  NOTE: the hover function always needs 2 functions, one for hover and one for mouse out.

There was so much more which I might write up another time – looking at animation via jQuery and some neat Ajax techniques. This would turn into too long a blogpost if I tried to fit it all in. Just for future reference – a few links to get more info and help with jQuery:

• jquery.com
• forum.jquery.com
• API: docs.jquery.com
• API: api.jquery.com
• API: visualjquery.com
• IRC channel: irc.freenode.net/#jquery
• jqueryfordesigners.com (Remy’s site with great tutorials, screencasts and more)

I had a great day, learnt lots and met some lovely people, some old faces and new. A huge thank you to Andy [@malarkey] and Remy [@rem]  :-)

PS: in case I made any mistakes in my notes or code samples – please do comment and let me know ;)

When I saw this video via @ilovetypography on Twitter – it was such a treat :) I wanted to just abandon any work there and then and sit down to draw out some lettering. Alas, there was no time for play. I wanted to keep this easily accessible to share and pass on – so here it is. Do enjoy :)

The Art of Hermann Zapf from Johnny Dib on Vimeo.

A film on the purpose and techniques of calligraphy. Presented and produced by Hallmark. Filmed at Hallmark cards during a visit by Mr. Zapf. Production manager Noel Gordon. Script outline Peter Seymour. Script editor Richard Rhodes. Camera Direction Frank Robinson. Associate cameraman Heinz Burger. Idea and direction Harald Peter.

PS: in case you have not checked the “I love typography” site for a while – make sure to have a look, inspirational as always :)

The challenge for this project is to enable tutors to update the gallery content themselves, in an easy and straight froward manner. My webstudents have taken on this brief and we are currently presenting our proposals to everyone involved. As I am really pleased with the results and already had the first bits of very positive feedback – I just wanted to share the link here as well, any comments welcome ;)

» promoting adult courses within creative arts at THC

Ideally, we’d all like to have a full test suite available – but this might not always be possible. This is where the online options for browser testing come to the rescue. There are quite a few options out there and it will be worth your time to check out what’s available (see the articles listed below for links and more info). Personally,  I’ve now settled on the ones listed below so here are my top 3 online browser testing tools.

1. bowser shots
   One of the oldest free services around – browsershots allows you to select from a vast list of browsers and browser versions and then presents screenshots of your site in those browsers. During busy times this process can take a few minutes but usually you will be able to view the first screenshots very quickly.
2. Adobe Browserlab
   Adobe offers their own version of a browser testing suite – you will need to sign up for an Adobe ID first and sign in (same as for Kuler, the colour theme generator). Browserlab offers a list of browsers and different viewing modes which make it easy to find and identify discrepancies. Best of all – the results are shown in real time which make this one of the most effective tools around.
3. IE NetRenderer
   A utility reserved for the sole purpose of testing your website in the dreaded IE, very fast in delivery of screenshots.

These are of course my personal choices with many more available. So here are a few useful articles which will point you elsewhere:

• browsers on quirksmode.org
  PPK’s famous site, amazing amount of in depth information of various browser bugs
• How to Build the Best Browser Test Suite on sitepoint.com
  good article covering online tools as well as discussing how to install multiple versions of browsers
• Browser Tests, Services and Compatibility Test Suites on smashingmagazine.com
  excellent article discussing useful tools to work towards cross-browser compatibility

So I just want to wish everyone happy holidays and all the very, very best for 2010 :)

To quote the site:

Whether you call yourself a user experience consultant, web developer, or content strategist; whether you design customer flows, buttons, or brands; no matter what title you hold as a full- or part-time web professional, your work shapes our future and ought to command the world’s respect. But we won’t win that respect without understanding, and we can’t hope for understanding without data and the knowledge it reluctantly yields to the patient hand and steady eye.

It’s to help the world understand who we are and what we do that, each year since 2007, we’ve asked you, the members of the web design community, a few dozen questions about your professional life, and compared your answers to those of your colleagues. Each time we’ve asked, over 30,000 of you have kindly obliged with details about your salary, location, background, and more. The data that you provide and we analyze is the only significant information about our profession as a profession to be published anywhere, by anyone. That makes it important. That makes you and your answers very important indeed.

And so, good citizens of the web, once again we ask you to take a few minutes to tell us about your professional skills, educational background, career prospects, job benefits, and more. The job you save could be your own.