Last month I wrote about how I wished when clients had a change request for their site, they would treat me like a six-year-old. The point was, those change requests are often far too vague which leads to confusion and ultimately wasted time. It would be more efficient if those change requests contained everything needed to make that change without confusion.

I thought this idea would make for a good demo of a web form with some advanced functionality.

View Demo   Download Files


Is this fo' real?

The purpose here is really to show off some fancy form styling and advanced form functionality. Personally I would love it if I could make every single client of mine use this so I knew exactly what they wanted every time, but that's probably not realistic.

What is "advanced" about this?

Several things:

  • A jQuery plugin is used to help with the styling of the form elements. It completely replaces radio buttons and check boxes with custom graphics, and wraps textareas and text-based inputs in nice styling as well. This kind of styling just can't be done with CSS alone.
  • The form is fully functional, it submits to itself and sends actual email.
  • The form is validated. Submission can only happen when the required fields are filled out properly.
  • Submission is handled via AJAX, no page refresh needed.
  • There is an option to save Name/Email, so frequent submitters are not stuck entering common information over and over. This is handled via COOKIES.
  • The submission of all the form elements is SERIALIZED, via another jQuery plugin, so adding and changing form elements is easy.

Are you going to go over how it was built?

I plan to do the screencast this week on this form, and go over all that stuff. So if are interested, make sure you are subscribed to that. All of this could be written from scratch, but we are going to save ourselves time and sanity by leaning heavily on jQuery and three awesome plugins:

The actual mail-sending and cookie stuff will be dealt with by PHP.