Expressive Forms – Part 1

I recently created xf_form.js – a javascript library to help website programmers and designers use simple forms to make their website more expressive. Website programmers have a love/hate relationship with forms. They hate entering information into them, but they love collecting information with them. At least the website owners love the information that is collected with them. But forms can be oh, so much more than an information gathering mechanism. Mechanism, that sounds so dull, doesn’t it.

The first thing you want to do with a form is design it. Most forms have dull and boring designs. Give it some color. Place a background in the form. Make the fields transparent and show your logo through them. Just a little css for styling, and you’ve made it more expressive.

So, why xf_form.js? Well, you need a script/scripts to process the information. In the old days, you’d design a form using HTML and CSS,. The form would send the information to the back end (server-side) where it would be processed and sent to you. That’s still the way many forms are processed. The back-end code is tedious, not pretty, and specific to the form (or form type). It’s back-end so that it’s harder to hack. But why not make it simpler. In fact, why not bring it to the front end (client-side). Unless we’re talking passwords, we can still make it hard to hack. I can show you how to keep the client’s information safe. And besides, we can do more than just collect information with a form. We can use a form to process information.

I created three sample forms using xf_form.js. Well, I created them with HTML and CSS. But their data is processed with xf_form.js. The first form is a contact form. Don’t worry, I’ll explain how to have the client send you an email using a form without exposing their information to the internet. It’s simpler than you think. The second form is a calculator. Perhaps I’ll replace my form calculator which shows you how much money you can save with an Electric Car, with xf_form.js. The third is a menu. The menu could be a div, rather than a form and still use xf_form.js. I’ll be featuring this type of menu in my upcoming bookstore website. My javascript routines expand and collapse the menu.

To be continued … Check back for How to Process a Contact Form.