Category ‘Design’
Forms with WuFoo
I've been listening to Technikwürze Podcast, Episode 104 (a german podcast about design and webstandards) and they've been talking about WuFoo, an online service to create HTML forms. You can create forms using drag and drop on their site. If you want their server side validation, their statistics and their database power, you can purchase a paid subscription plan, but what I want to point out today is their XHTML/CSS export feature.
When you create a form, click the code-button and choose “XHTML/CSS code only” on the right they'll serve you the correct XHTML and CSS code for the form you designed ready somewhat ready to include it into your web site. I moved all their CSS rules into some kind of “namespace” so they wouldn't interfere with my site's CSS rules (particularly my CSS files require the form to be in an element with class “wf” assigned to it and the IDs being used in the form are prefixed with “wf_”). I added some jQuery JavaScript for the cool eye candy-effects and that's it. Now I can easily insert WuFoo-generated forms in my site (and oh boy, I will).
Note that you will have to take care of form validation yourself - you're not using the WuFoo guys' servers and I didn't include client-side validation in my JavaScript.
If you'd like to use my modified CSS file and my jQuery JavaScript code scroll down for a highlighted version or get it here: CSS and jQuery JavaScript. The CSS and XHTML code has been released under a CreativeCommons Attribution 2.5 license and I'm hereby releasing the jQuery code under the same license.