UniqCode interactive form demo

Introduction

This is an example of some work that I, Ben Wheeler, did for a client in 2012. The visual design was provided by a designer as a plain raster image, and I was responsible for implementing it and providing all the interactive features, plus iterative enhancements to the design as the client's ideas about what they wanted evolved...

The original site is under a non-disclosure agreement, so here I have extracted some of my code from it and changed the content so as not to reveal any compromising details.

Technologies used include: HTML5, jQuery, Twitter Bootstrap, Javascript and CSS. The original form was integrated with a larger PHP/CodeIgniter system.

Menu Selection

Number of guests attending:

Anything with a icon next to it can be clicked on to unfold more information.

In this section, choosing a radio button auto-populates the quantity based on the number of guests field above. The brief initially called for fixed price menus, priced per person, so the price is multiplied by the number of guests. Note that any attempt to change the quantity fields below is repelled.

We were then asked to add the Platter Menu. Platters are priced per platter, not per person, so they are *not* multiplied by the number of guests.

We were then asked to add the Platter Selection Menu, where there is no "base price" but you have to choose a minimum of 4 platters from the Platter List (actually, on the live system, the minimum number varies depending on the capacity of the room, but for this example it's always 4). If you choose this option, form submission is blocked unless you have selected enough platters.

Select Item Price Quantity Total
Basic Menu 60.00 0.00

On arrival

  • Mixed Quavers and Wotsits in a bowl
  • Breadsticks with Dairylea

Main Course

  • Fish Fingers
  • Chips or Smash
  • Beans or Spaghetti

Dessert

  • Partially-defrosted frozen mousse
  • Mellow Birds instant coffee
Deluxe Menu 75.00 0.00

On arrival

  • Mixed Wheat Crunchies and NikNaks in a bowl
  • Breadsticks with Philadelphia

Main Course

  • Crispy Chicken
  • Potato Waffles or Hash Browns
  • Beans or Spaghetti with Sausages

Dessert

  • Fresh Mousse
  • Gold Blend instant coffee
Platter Selection Menu 0.00 0.00

Your choice of platters

  • Please select a minimum of 4 platters from the Platter List below. All platters are designed for 12 persons. We highly recommend that you order at least 6 platters if ordering for 18 persons. Please realise that this is designed as a supper menu and the food quantities are not designed for a dinner menu.
Platter List (click to open)
When you select a platter checkbox, it will enter a default quantity of 1. Alternatively, you can enter the desired quantity in the quantity box, and the javascript ensures that the checkbox is ticked or not as applicable.
Select Item Price per platter Quantity Total
Super Platter Menu
Crisps 70.00 0.00
A selection of assorted flavours of Walkers crisps, but always including cheese & onion flavour so they all end up tasting of cheese & onion anyway.
Peanuts 70.00 0.00
Salted and/or Dry Roasted peanuts according to what's in season.
Carrot Sticks 70.00 0.00
A load of carrot sticks, but no dips.
Sushi 70.00 0.00
"Sushi", aka undercooked fish fingers.
Cheese 70.00 0.00
A selection of assorted cheeses, to include Cheddar, Edam, and .... actually that's it.
  Total   0.00

Dietary Requirements

The original design called for a table listing each type of diet, with a quantity for each, and a text field to specify names. I simplified it to this layout, with a variable number of rows, one per person.

  Diet Name of guest Delete
 
  Add another row

Beverage Selection

For this section, the brief was that ticking a box should auto-populate the quantity box with a set quantity of drinks - the number to vary from drink to drink, eg beers come in quantities of 24, wines 3.

The VIP drinks section works more like the platter menu - a default quantity of 1 when you tick the box, but you can enter a higher quantity if you wish.

Select Item Price Quantity Total
Beers
Weak Lager 8.00 0.00
Strong Lager 10.00 0.00
Real Ale 9.00 0.00
Cider 11.00 0.00
White Wine
Chardonnay 28.50 0.00
Sauvignon Blanc 31.00 0.00
Pinot Grigio 39.50 0.00
Red Wine
Shiraz 42.00 0.00
Cabernet Sauvignon 41.00 0.00
Rioja 45.00 0.00
Merlot 45.00 0.00
Champagne
Overpriced Fizz 120.00 0.00
Ridiculously Overpriced Fizz 170.00 0.00
Spirits
Gin 5.50 0.00
Vodka 5.50 0.00
Rum 5.50 0.00
VIP Beverage List (click to open)
For VIP drinks, ticking the checkbox will give you a default quantity of 1, but you can change the quantity if you require more than 1 bottle.
Select Item Price Quantity Total
White Wine
Vintage Madonna 1986 155.00 0.00
Balsamic Vinegar 1972 396.00 0.00
Red Wine
Red Wine 1996 145.00 0.00
Red Wine 1946 1150.00 0.00
Champagne
Loadsamoney 3050.00 0.00
Pomme D'Erignon 1295.00 0.00
Grand Total   0.00

Special Requests

This is just a plain text field which is submitted with the order so that clients can make special requests.

Extra Service

This is another "optional extra" tab that the client requested.

Item Price Quantity Total
Extra service
Something nice 180.00 0.00
Grand Total   0.00

Confirm Order

We initially found that people were accidentally submitting the form by pressing enter before they had completed all the sections. To prevent this, I added a checkbox which must be ticked before the submit button appears. Attempting to tick the box runs the various pre-submit validation tests on the form to make sure that all the instructions have been followed.

The validation tests have all passed, so we now allow the form to be submitted. As this is just an example, clicking the button doesn't do anything.