Make the forms nicer in osCommerce

By | August 9, 2008

osCommerce and most other ecommerce scripts make a lot of use of forms. They can be found all over the place including most of the checkout procedure, product_info, login, create_account and so on.

And forms are damnable ugly. So, my idea was to hunt out some code that would replace the standard ugly form elements with something a little nicer.

I found a nice jQuery script called “jNice” – you can see an example at the authors homepage. The code allows us to go from this standard, grey, ugly form:

To this, which is a lot nicer:

Also, we can control the look of the actual dropdown via CSS, as so:

Which I am sure you will agree is a lot nicer that the usual dropdown.

As this is all controlled by javascript, we need to make sure that it degrades nicely for those few people who browse with JS turned off. As this is mainly a cosmetic exercise, it’s fine – lack of JS only causes problems when we are looking at functionality – cosmetics is somewhat simpler! So, it’s all good!

10 thoughts on “Make the forms nicer in osCommerce

  1. christoforos

    i made a try but it didn’t gone ok.. First of all how can i attach the class to the form? because i saw that the forms in the osCommerce doesn’t start like , but with tep draw etc..

  2. Gary Post author

    Chris – like this:

    $info_box_contents[] = array(‘form’ => tep_draw_form(‘manufacturers’, tep_href_link(FILENAME_DEFAULT, ”, ‘NONSSL’, false), ‘get’, ‘class=”jNice”‘),

    That’s for the manufacturers infoBox. Same sort of thing for the other forms in osCommerce – there’s lots of them.

    For anyone else, I forgot to link the JNice – here it is.

  3. Mark

    Hi Gary,

    Instead of adding the class to each of the forms, is it possible to add it stright into the function tep_draw_form ????


  4. Gary Post author

    Mark – It certainly should be – good thinking 😀 Have a go and let us know?

  5. Mark

    I will have a go this evening when I get some peace and quiet, bloomin school holidays urgh

  6. Gary Post author

    Mark – it does work 😉 Nice idea you had there, well done.

  7. Mark

    are you willing to share it then so I can finish work earlier this evening for once in a very long time lol

  8. Gary Post author

    Just stick the

    class=”jNice” in the parameters bit of the function…

    Easy as 123!

  9. ron


    ok for the total newbie – where is the tep_draw_form located in oscommerce – how about some instructions on how to implement this


  10. Gary Post author

    Ron – you need to learn a bit about the structure of osc, the best way to do this is to search for stuff using windows search or any find and replace type program…for reference all functions should be inside the functions folder (of which there are two, one for catalog and one for admin). Once you found the function it should be fairly obvious what you need to do…hint: parameters

Leave a Reply

Your email address will not be published.