Forms are essential for communication online and they are the single most important interface to collect information from users.
Why not spice you forms up a bit and make your site more appealing and user friendly? This post will help you get an idea of what what is possible to achieve with a few lines of simple jQuery code ans the right jQuery forms plugins.
There are also many other areas where jQuery can be useful, one example us jQuery carousel plugins as they can really make a sales page or website front page stand out. Or you could go for a regular WordPress form plugin to extend the basic capabilities.
Skinning and improving look and feel of HTML forms with jQuery forms plugins
This plugin is a jQuery styling plugin wich allows you to skin form elements.
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
Turn check boxes into what you see below using some CSS and jQuery. You can see this simple demo here.
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.
Enhances checkboxes, radiobuttons, fileupload, textinput, textarea, select, submit, reset, image, all elements are completely stylable via CSS
Query Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.
How to replace radio buttons and check boxes with jQuery.
Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.
When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don’t want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.
An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.
Avery user friendly way to show checkboxes.
mcDropdown allow users to select from a complex hierarchical tree of options.
This plugin provides an enhancement to multiple select boxes that is worth taking a look at.
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.
Another attempt of a sortable, searchable multiple select widge. It depends on jQuery 1.3 and jQuery UI 1.7. The widget is styleable using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.
Image buttons for jQuery Forms
File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.
If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.
Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.
If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.
Have you ever wanted a simple rollover technique with a form submission button? Something like this:
Labels and tooltips with jQuery Forms Plugins
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
Know the effect used in the Google Custom Search input field? This plugin provides a similar effect in a very simple way. This is often used by opt-in input fields where the default value of the field is something like “Your e-mail address”. If you click the field the text disappears so that you can type your e-mail address.
Auto adjust forms with jQuery Forms Plugins
This is an animating ‘autoResize’ jQuery plugin adjusting the text field height as needed.
Wizard style forms with jQuery
The progress bar is currently only determinate, which means when we update it, we have to tell it explicitly what its value is, and we must know beforehand when the process it is used to measure completes. This widget is not currently the best choice for a process which will take an indeterminate length of time to complete.
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.
This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information. A plugin is also available for download. demo
This plugin provides a simple and easily configurable solution for turning long forms into broken out steps without going from page to page.It works well like a wizard where users can go back and correct inputs if needed. This is really a handy tool if you need to collect a lot of information from users as one huge form introduces a risk that users drop filling in all fields and goes on to something else..