Sunday 17 August 2008

How to NOT make a web form

The 2009 trainee's program of the multinational Unilever are open. As I've graduated recently, and heard some people say very good things about employment there, I've decided to apply myself.

With that in mind, I've followed the links on the Unilever page to the register myself. This brought me to an interesting web-based form, apparently designed by Cia de Talentos, an recruitment agency around there: Instead of using standard html selection boxes (ie, select elements), they just got creative and decided to reinvent the well using input elements and some "nice" down arrow images, on which you can click to get a "lovely" popup on which you can select you choice, which then gets dutifully copyed back to the input. Of course, they also set the choice's code on an hidden input element, presumably to easy their parsing later... Oh, and some of them even have the proper code, using select element, commented above them (for easing of legibility, I suppose...)

Now that I've let everyone anxious to see such beautiful art of the web programming, I'll let you see a snippets of the code:

<input type="text" name="Text_CodPais_cand" size="30" value="" onFocus="SetSav('SavRegioes'); SetSav('SavCand'); mudaFoco('Nome_cand',-1)" style="color: #0000FF; background-color: #EEEEEE; font-size: 8pt; font-family: verdana; width: 260px"> <img src="img/SetaCombo.gif" align="absmiddle" onClick="SetSav('SavRegioes');SetSav('SavCand');setCmb('un país', 'CodPais_cand',-1,280,260,0,'Nome_cand',-1)"> <input type="hidden" type="text" name="CodPais_cand" value="31">

I haven't really parsed all of their javascript (it's long, messy...), but it seems to make some "clever" stuff like create the full html of the popup using document.write.

They also seem unable to keep track of your language around the multipage form, so I also had to guess some Spanish stuff to be able to fill it fully (and got wondering in what language I should fill some fields also... settled on keeping everything in Portuguese.

To make this long history short, the main lessons I would take from this on the top of my head:

  • Never ever make a fake select by using input and img. If you think it's the solution to your problem You're doing it wrong. Trust me, You'll look foolish, and some moron (or not) with so much time (or not) will make sure to tell the whole, lazy web on his blog.
  • Keep the language of your web pages consistent.
  • Be careful if you're going to outsource something. Some times people might notice it wasn't you which has done the foolish thing, some times not. Independently, they might chose to do business with you, or might think you aren't worth it if you can't even get a simple webpage done right. Either way it will damage your image if someone does something so messed up in your name.

Just for the record, in this case in particular I've chosen to register myself anyway; as I've got some really good references about Unilever. But I'm worried if this is the competence to be expected from their IT sector (which is also the sector I would work) - even if this wasn't their doing, there should be someone watching the quality of their outsourced work...