Extensively customized order form - ajax/js

[Excel]

Hello,

 

I worked weeks on creating the underlying javascript code to integrate with WHMCS, and in the end I believe it worked out nicely The main features it introduces is a differentiation between our two server locations (US and UK), as well as a show/hide option after a user has made a plan selection. This reduces the length of the order form, especially since we are using the AJAX version of WHMCS' form

 

Here are some highlighted cool features :

 

1) http://clients.excellenthost.com/order.php

^ Main order form, giving user all available US/UK plans

(note that only 'Shared Hosting' category in both US and UK currently have packages associated at the moment)

 

2) http://clients.excellenthost.com/order.php?gid=6

^ an example of the form when a specific hosting category (e.g. "Shared Hosting - UK") is selected. All available plans in the selected category are shown, but other category types are automatically hidden. Clicking on a plan also hides other unselected plans without refreshing the page

 

3) http://clients.excellenthost.com/order.php?gid=6&pid=8

^ an example when only the currently selected order group and plan is selected. Other options are initially hidden, but can be shown again by clicking on the "Show all ..." link (no page refresh)

 

4) Hovering over the plan names also give cool descriptions in a 100% css-based speech bubble

 

5) We also modified the payment options to display detailed descriptions and benefits of each. This is also a change from the default whmcs order form

 

The javascript code is not fully optimized yet, but it is quite small in size. There is a lot of backend template modifications (php), so not all customized code is displayed to the user.

 

Hope you guys like it! Let me know what you think, or if you experience any issues/errors during the process. All feedback is greatly appreciated

 

Thanks,

A.

[Jordan]

I think the only thing I don't like about it is that the colors really clash. There isn't a set color scheme set up with the order form. You've got one color for the speech bubbles, and they don't seem to match anything with the site when I look at it off the bat.

 

The other thing is that even though you've done some awesome integrations with ajax, it still looks really cluttered.

 

However, I do like the payment descriptions you've added; I think that's the one thing that's been missing it just giving the user a better description of the gateways offered to them, and why one might benefit the other.

 

But the only thing you really need to improve on is just making it a little more organized, and better color scheme! Good job on it though.

[Excel]

Thanks, I'll work on the colors. I was using a different laptop monitor at the time of creation, and now I see that the colors appear differently on my standard PC.

 

Any suggestions to keep in uncluttered? Is there too much text perhaps?

[arhost]

Looks great and I do like the payment descriptions you've added!

[TommyK]

i would have killed the left menu/login in the order pipeline

[Excel]

i would have killed the left menu/login in the order pipeline

 

Good idea, I've removed that now. There is really no need for the left menu when ordering.

[chaloupe]

it is really good looking from my view. I like it

[Excel]

Thanks Jean, any other opinions anyone?

[Neil Hennigan]

Looks great. You've clearly put a lot of time and hard work into this one and you should be proud. Nice work.

 

I especially like the datacenter tabbing.. and it has given me some ideas of my own... for our v2, that is... but just getting our client area pulled together to properly suit some of our individual needs has aged me about 10 years, so our order form will have to remain relatively default for now!

 

Neil