Creating Slick Forms Using Ajax, jQuery & CSS: No More Ugly Forms
Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Impressive techniques using some jQuery magic to style slick forms with a simple, rich user experience that gets them excited about your contact, register or whatever form you have.
A. Styling Forms Fields
1. iPhone-style Checkboxes
iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.
How to use it:
Once the files are available to your site, activating the script is very easy:
:::HTML
<head>
<script src="jquery-1.4.js" type="text/javascript"></script>
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
<link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').iphoneStyle();
});
</script>
</head>
The initialization method takes a handful of options.
- - checkedLabel sets the text of the “on” state. Defaults to: ON
- - uncheckedLabel sets the text of the “off” state. Defaults to: OFF
:::Javascript
$(':checkbox').iphoneStyle({
checkedLabel: 'YES',
uncheckedLabel: 'NO'
});
2. Uniform
Uniform masks your standard form controls with custom themed controls. It allows you to style checkboxes, drop down menus, radio buttons, and file upload inputs. It works in sync with your real form elements to ensure accessibility and compatibility.
How to use it:
Using Uniform can be quite easy as well. Simply call:
$(function(){ $("select").uniform(); });
To “uniform” all possible form elements, just do something like this:
$("select, input:checkbox, input:radio, input:file").uniform();
3. Niceforms
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.
Starting with the basic XHTML code for a web form, Niceforms parses the DOM tree, gets all the input fields, hides them, and positions their new graphical appearance in place. All this is done while preserving the date transfer and selection features of the regular form. Everything is done via javascript.
How to use it:
Niceforms is applied to all forms that have the class “niceform”. You can have other classes in there as well but one of them has to be “niceform” in order for the script to work. One of the important aspects of the script is that it requires a correctly coded form, including properly declared labels and values. There’s not much room for error and, if anything, it will force you to code your forms correctly.
4. jQuery MultiSelect Plugin w/ ThemeRoller Support
This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.
MultiSelect is compatible with jQuery 1.4.0+ and all themes from jQuery UI 1.7+. It is known to work in Firefox 2+, IE 6+, Chrome Beta/4, Safari 4 and Opera 10.
How to use it:
First ensure you’ve included jQuery 1.4, a jQuery UI theme of your choice, and the jquery.multiselect.css file. You don’t need the jQuery UI library itself, just the theme files. The simplest use of MultiSelect is to bind the widget to your select box:
<select id="MySelectBox" multiple="multiple" name="MySelectBox"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select>
$(document).ready(function(){
$("#MySelectBox").multiSelect();
});
5. Perfect signin dropdown box likes Twitter with jQuery
This tutorial will show you how to create a login drop down with Twitter style using jQuery. It’ll help you save the space on your webpage and make visitors feel comfortable by the awesome toggle login form.
How it works:
When users click on the Sign In button, it’ll call a new function. At first, the Login Form (under the
<script type="text/javascript">
$(document).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
</script>
B. Making Forms Work: Validating & Submitting Form Data
1. Fancy AJAX Contact Form
In this tutorial we are going to learn how to make an AJAX contact form which leverages modern web development techniques.
We will use PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin, which will style all the input fields and buttons of the form. In addition we are using the PHPMailer class to send out the contact form emails.
2. the Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality. Although Ketchup is designed to be styled and extended by you it already looks tasty and gives you the most common validations by default.
Ketchup provides some callbacks to completely control the markup and show/hide behaviour of the error-container, which simply can be styled via CSS.
Ketchup don’t force any markup on you. Build your own error-container, either with HTML code in a string or the element builder as shown in the example via the errorContainer parameter:
$('#example2').ketchup({
validationAttribute: 'rel',
errorContainer: $('<div>', {
'class': 'ketchup-error-container-alt',
html: '<ol></ol>'
})
});
3. AutoSuggest jQuery Plugin
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy. It will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.
AutoSuggest uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file.
How to Use it:
$(function(){
$("input[type=text]").autoSuggest(data);
});
The above line of code will apply AutoSuggest to all text type input elements on the page. Each one will be using the same set of Data.
4. A jQuery inline form validation, because validation is a mess
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.
5. Uploadify
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
Sweet, thanks!
Thx, there are some great ressources !
Nice examples…..
Nice post. Forms are like chairs, they’ve been around since the dawn of man. You can always restyle them and tweak functionality, but you will never replace them. Remember, King Tut and Jesus sat on chairs just like I’m sitting on a chair now, same as having to submit information through a form.
Great post. (Don’t think king tut had to fill in too many forms, though, ed. Little job perk of being Emperor/God of your country.)
here is some great forms really ..
many thanks
Great forms.
Thank you!!
Great post, but the last Validating script (“Uploadify”) has the same picture as “A jQuery inline form validation, because validation is a mess”. Is that right?
Try extending the autocomplete functionality to populate more than just the current field, very useful for city/state lookups and more: http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/
Thanks for these great forms! You could complete this list with Faary.com – free, online CSS/XHTML form builder
Great except the examples do not style properly in IE8.
Wrong picture for Uploadify btw
Some nice inspirations for “forming”
this is amezign tutorial… Thanks
Wow! Thanks for taking the time to put this together! I can’t wait to tweak a few of my existing forms.
great. just great resources!