Add To Snippet Toolbox

You need to login or register to bookmark/favorite this content.

, ,

Creating Slick Forms Using Ajax, jQuery & CSS: No More Ugly Forms

sponsored
0 44 98

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.

iPhone-style Checkboxes

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.

Uniform

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.

Niceforms

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.

jQuery MultiSelect Plugin w/ ThemeRoller Support

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.

Perfect signin dropdown box likes Twitter with jQuery

How it works:

When users click on the Sign In button, it’ll call a new function. At first, the Login Form (under the tag) will be showed, then the link with class name “.signin” will add one more class name “menu-open” to change the background image.

<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.

A Fancy AJAX Contact Form

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.

the Ketchup Plugin

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 jQuery Plugin

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.

A jQuery inline form validation, because validation is a mess

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.

A jQuery inline form validation, because validation is a mess