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 – 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:
   <!–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

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

I had intended to write this post straight after the event and sum up a few bits of content. Unfortunately I’d been so busy that I did not have the time. So rather than delaying this further I’d like to show you a clip of Bruce Lawson and his talk on HTML5 instead.

Bruce Lawson from Opera: The HTML 5 Experiments from Sigurd Magnusson on Vimeo.
Bruce Lawson from Opera talks at O’Reilly’s OSCON 2009 conference about HTML 5.

“Presented by Bruce Lawson (Opera Software ASA). A pragmatic look at HTML 5 by experimenting with converting a real site to HTML 5 – how does it work? Where it useful and where is it annoying? How is support in current browsers?”

With a lot of different options and techniques out there I would still favour a simple switch using only PHP.  This will work reliably with or without enabled Javascript. I’ve put together a demo which also includes the steps and code snippets.

» view tutorial & demo

If you want to have a play around yourself – please do refer to the original sources for specifics. You will also need the jQuery JavaScript library itself, or link to it. You can download the latest version from the Google code library.

FancyZoom
Initially the FancyZoom by orderedlist looked excellent – a very quick response and simple presentation. The demo works very smoothly and for a limited amount of images – this technique can be suitable. FancyZoom works by referencing IDs between the link and the chosen content within a container with the same ID. This essentially means that all content will have to be put into the HTML itself.
<div class=”photo”>
  <a href=”#beach1″>
    <img src=”images/beach1.jpg” alt=”beach photo” />
  </a>
</div>

The ID referred to in the link is then referenced to the ID assigned to the DIV containing the content to be zoomed.
<div id=”beach1″>
    <img src=”images/beach1.jpg” alt=”beach photo” />
</div>

This can of course add weight to the page, in case of the CSS or JS failing – in which case all images will appear on the page – and add to the amount of code in the HTML document itself. In cases where only very few images are on display – this technique can work well.

FaceBox
Looking for an alternative which would not required the extra DIVs for zoomed content – I found FaceBox. This technique can be used to show images, text or even another HTML file. The use for an image gallery here allows for multiple images as no added HTML is needed. Once the JS function is active – the image get loaded on demand.
 <a href=”beach1.jpg” rel=”facebox”>
    <img src=”images/beach1_thn.jpg” alt=”beach photo” />
 </a>

Much cleaner in its application – these options are very useful indeed :-)

jQuery lightBox
My favourite however still remains based on the original LightBox JS by Lokesh Dhakar. Now faster and just as customisable as the original – the new version is using jQuery, written by Leandro Vieira Pinho.
This lightbox plugin allows you to assign the presentation effect to an ID assigned to the DIV containing the image links. The styling of presentation and visuals is highly flexible and great to work with.
<style type=”text/javascript”>
$(function() {
$('#photos a').lightBox();
});
</style>

let’s take this quote from one of my favourite web gurus
(as published on Twitter, 5/5/08):

Jeffrey Zeldman
“”
Content precedes design. Design in the absence of content is not design, it’s decoration.

A quick list of the tags you can use:

• <blockquote>  </blockquote>
  used for long quotations – a default margin is applied, the unstyled font appears in italic.
  —w3c—
• <q></q>
  used for short inline quotations which do not require a line break.
  —w3c—
  
• <cite></cite>
  used to define a citation
  —w3c—
  (I’m referring to the HTML tag here, NOT the blockquote attribute)

To show the quotation marks around the quote – you can use generated content, ie use CSS to add the quotation marks for you. This is a somewhat debated technique which is nonetheless very useful but is unfortunately not supported by all browsers. I will not go into this technique here as it is not widely used yet (though I have started using it for several projects myself) – please refer to the W3C for further information.

The other method of adding the quotations marks is to use the HTML entities, surrounded by the span tag. Make sure to pay close attention to the correct entities here – and do not mistake the apostrophe or a double, single quote for the appropriate quotation marks.
& for your reference here are the quotation entities:

&ldquo; — left double quotation mark (“)
&rdquo; — right double quotation mark (”)
&lsquo; — left single quotation mark (‘)
&rsquo; — right single quotation mark (’)
&quot; — straight quotation mark (“)

Another option is to create the quotation marks as graphics and add them as background images to the quote. I will go more into detail another time – for now – please take a look at my sample file.

PS: I had planned a much longer write up for this – but alas, time is not on my side and I will need to leave it there for now. I will however return to this post and elaborate on the details soon.

One of the best applications out there however must be MacRabbit’s CSS Edit. Unfortunately for mac only – this code editor can make learning CSS a little bit easier. Luckily there is now an alternative for you PC users – Rapid CSS.
I will focus on CSS Edit here as it’s one of my favourite apps ;) CSS Edit colour codes and tidies up your code – it allows instant preview of applied rules – and even enables you to override the CSS of any given site.

To get you started a quick introduction to its features…

Let’s assume we have the following HTML file at hand, ready to be styled. To open the file as preview in CSS Edit – simply launch the application. By default you will see an empty CSS file opened automatically. Click the ‘Preview’ button at the top to add your HTML file to the preview window (see screenshot below):


Ideally you should set yourself up to view both the code and the preview windows together, next to each other or within easy access. Depending on the monitor size of the computer you are working on, of course – this can be quite tricky. But keeping both windows nex to each other and easy to access will greatly speed up your workflow.

This screenshot shows both views: the CSS code to the left (including only Eric Meyer’s ‘reset reloaded’ so far) and the preview on the right.

As you will see – adding new rules to your CSS file now will show you an immediate preview in thew preview window:

the instant preview :) one of the most intuitive parts of your learning process.

The coding window in CSS Edit has several differet views and functions – allowing you to use a visual editor which lists properties for you to edit, or to work with the source code alone – and even combine the two. Though the visual editor can be useful while you are learning – it can also be a distraction from the code itself. I would recommend to use the course view alone and focus on writing your CSS rules yourself. You will get a better understanding and become much more confident in your coding if you write it all yourself – CSS Edit does work with you, suggesting and completing your code as you type.


It will be important to ensure that your code is correct and valid – so to help you troubleshoot your css – CSS Edit’s validation function will give pointers to your errors.

One of the most powerful features is yet to come – the X-ray and the inspector. These 2 buttons change the preview window and allow you to put your code under the magnifying glass, showing you in detail which effect your CSS rules have on your layout as well as display clearly any page element’s place in the hierarchy of your HTML code.

The X-ray function can be useful in many ways – do take your time to explore. You can select the page elements by clicking within the preview itself – or clicking on an element’s selector within the list shown and see it highlighted within the preview.


I hope this has given you a brief look into the brilliant functions which CSS Edit gives you – the perfect learning tool which has become my favourite CSS editor very soon after my first test run. Reading this post through now – I noticed I might sound a bit like a sales person here, sorry if I did…. I hope you know by now that I do not write which I don’t believe. So if it sounded like a sales pitch – then it’s a compliment to the development team behind this application :-)

But don’t worry – the more you work with the code – the more you will understand how to structure your HTML and CSS better, avoiding most if not all IE hacks. And hopefully with IE8 – if we’re lucky enough – we will have a better version yet…
This post is merely a resources collection – to give you a few links to articles, resources and utitlities…

the oddities of IE highlighted:

• positioniseverything – Explorer Exposed!
  “These CSS bugs are all found only in Internet Explorer, versions 5 and higher. To see the demos properly, they must be viewed in IE, of course.”
• positioniseverything – expanding box problem
  “It’s an unfortunate fact that Internet Explorer will always incorrectly expand any dimensionally restricted block element so that oversize content is unable to overflow, as the specs require that content to do.”
• wiki – Internet Explorer box model bug
  “The Internet Explorer box model bug is one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS). It affects CSS-aware versions of Microsoft’s Internet Explorer Web browser for Windows up to version six.”
• quirksmode – CSS contents and browser compatibility
  - compatibility chart
• microsoft – IE blog
  - Mircosoft’s blog on any news concerning IE

various hacks and techniques to fight the IE bugs:

• wiki – CSS filter
  “A CSS Filter is a coding technique used to hide or show CSS markup depending on the browser’s brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards.”
• tantek’s box model hack
  the famous box model hack – to fix the bug for IE 5/5.5
• cavemonkey – The Ultimate IE Hack Guide
  “You’ve designed the perfect website. You’re checking it in all browsers. Firefox – check, Safari – check, Opera – check, Internet Explorer – ah, am I looking at a website? We’ve all been there.”
• kickasswebdesign – Hacks in various flavours
  “There’s an article on the Front End about a new parsing bug that was introduced in IE7 that now allows us to target in ONE stylesheet the different IE versions.”
• glish – LAYOUT TECHNIQUES: hacks
  “If you are trying to do pixel-perfect cross-browser CSS layout, you will often run into problems with IE5x PC because it radically mis-implements the box model as prescribed by the W3C. There are several workarounds for this problem, not the least of which is to simply not design with pixel precision in mind. But assuming you just have to get it pixel-perfect, no way around it, well here are a couple of workarounds that can help you…”
• webcredible – CSS hacks & browser detection
  “The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.”

[image © *chisa, found on deviantart.com]

The main advantage of a sprite rollover is the more effective loading of the rollover visuals and therefore a faster response. It is possible to set up an image rollover by merely changing the image if used as a background image for a link. Creating separate image files for each state of the link would allow you swap the images via CSS for the a:hover and a:active. This set up loads in the image only when needed – and on first page view – will require some loading time when a rollover is activated.

The sprite setup in comparison works by shifting the position of 1 single image file for the rollover effect. This means that the image is loaded with the page and is ready for display on rollover – without requiring any extra loading time.

1. create and optimise the graphic
   as the image will include all different stages of the rollover effect – create a suitable image file. My example here shows 2 stages – one image for the link as shown for a:link and a:visited and one image for the rollover, ie for a:hover and a:active.
   
   Make sure to align all images perfectly within your required area. The example file is setup as 40px in width and 120px in height. The height of an additional 40px is added to create extra space which might be required when text is resized.
   Once you are finished – save your graphic optimised for your site.
   As the image will be applied as background image – you can choose to save as PNG if necessary. All modern browsers will be fine but you will need an additional style sheet for IE6 replacing your PNG with its GIF version. So you should always save one of each (1 PNG and 1 GIF) at this stage.
   
2. with your new sprite image saved into your site’s image folder – go back to your coding program and edit your site.
   My example here uses a simple fixed width layout with a left side menu – view sample.
   The rollover links here are displayed within an unordered list. To achieve the desired rollover effect – you need to make use of the default behaviour of the link element. By targeting the link itself – you can control more than the mere static appearance of the links. Using CSS and the ‘background-position’ rule – you can control which part of your graphic is visible.
   
   When using the ‘background-position’ you can specify 2 values – the first being the horizontal shift, the second the vertical positioning – you can use both positive and negative values.

The actual values you will need to use for this technique to work will of course depend on your design and overall layout. To practice this for now – please feel free to download the file used in my sample.
have fun experimenting ;)

Then, there comes the contact page, blog comments or generally any page using any type of form. And out goes the joy and visual continuity of CSS styling…. :”(

When I first started using CSS – learning from the masters out there – I found forms to be the biggest stumbling block in my understanding of the rules and their application. What started to make sense – no longer did when it came to the form elements… Eventually, of course, reading enough posts, tutorials and reference material – I realised that it would be a hopeless endeavour to try to understand… So you learn to cope, not ideal but the best you can do, right? ;)

To take one of my current projects as an example – while the site is being built the domain shows a holding page with contact form: http://organikrocka.com. The look and feel of the site is textured, warm cardboard brown with black. As the current page is intended to give a flavour of the final site – just the thought of styling the form brought on a headache, already getting frustrated in anticipation of the obvious problems – and unfortunately the end result is somewhat unresolved…
I tried several different approaches in the CSS, even experimented with changing the design and feel of the page itself to tie in the form elements – and in the end resorted to using Javascript to replace the now rather ugly, misaligned and at times distorted appearance of the check box.

The screenshot below shows the final solution with Javascript replaced checkbox – and below the check box appearances in different broswers after my endless CSS edits – or how the check boxes would look with Javascript disabled. And in this case it was not even the standard check box visual itself which turned out to be the biggest pain in the ***** (pain in the brain!). Applying styling to the form resulted in a very inconsistent display of the box itself across different browsers. I just couldn’t get it to look right… :”(

So I finally did replace the standard checkbox with a graphic I created, with Javascript. I usually don’t edit the form elements in this way, I do care about usability and accessibility and am aware that this is not fully compliant. In an attempt to remain within the realms of usability and the familiarity with the commonly known check box – my graphic still shows the small, square, white box, only as flat graphic to suit the overall visuals and with some additional purely decorative elements. It is not ideal and though the form still looks very different in the different browsers – at least its layout is now even.

Following Eric’s posts on resetting styles and particularly reading his recent post on ‘formal weirdness‘ – the strange results for any styling applied to forms are slowly starting to make more sense. I’m a big fan of the universal resetting of margin and padding – it gives me back control over my layouts (apart from – IE what else :”(….). The universal reset is great – short and sweet and just works – well, apart from forms… of course :”( But I don’t really like the idea of the big chunk of code preceeding my CSS either, merely to accomodate the form pages. So I thought I would most likely stick with it and try to compensate for the forms within my CSS where needed.

Reading about the ‘formal weirdness‘ however… I think I’ll have to reconsider my opinion and change my working methods after all – thanks, Eric…