Form is a great place to make sure you have a door open for your visitors. Forms needa proper structure; it should be functional and should look creative in order to attract visitors. Sign up forms help to bridge a gap between the user and web owner. These forms should always be user friendly and easy to understand.
AJAX is a combination of more than one technology. It uses HTML and CSS. By using AJAX we can create real-time feedback to our users using server-side validation scripts.Today is have combined a list of Best Ajax Forms for you. Hopefully you will like themand implement them in your next website. Enjoy!!
1- Brett’s Beta Contact Form
This form was inspired by Dustin Diaz’ original AJAX contact form. He has since updated his to use the Yahoo libraries and I will be updating mine to use something a little more advanced soon. I still prefer my modification of the FAT to the shaking, though. It works for Apple, but I don’t like my forms wiggling. I also like how it shows all of the fields that need to be filled but highlights the first one that has an error and requests that you fix it with an error message. There is a certain modularity to the code, and the type of element that is created for the messages can be defined in a variable at the top of the code. I have a version of this form that works entirely without DIV tags so it can be used within the standard setup for DOMTab. Anyway, to make a long story short, I’m not a programmer, I’m a designer who likes to pick apart other people’s code. I make a mess of things. Sometimes I go back and clean up my mess. If I get around to doing that, I’ll post the finished code with a long credit list. Meanwhile, for those who dare to peek, don’t judge me too harshly, I just wanted to make it work. And the PHP is pretty cool, too, it processes everything the form sends and returns the array of extra form fields (besides the basic contact fields) as name->value pairs. It even checks MX records to see if the domain on your email address is valid. See, I keep myself entertained…
2- Easy Ajax Contact Form (jQuery)
Using jQuery & the jQuery Form plugin, this ajax contact form script validates inputs & sends the e-mail.
3- Fancy Ajax Contact Form
This form is built with MooTools with a PHP backend.
It has a very nice look & there is no validation implemented.
4- Masked Input Plugin
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari and Chrome.A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined.
5- Form Assembly
Form Assembly – A Beautiful Collection of CSS Stylesheets For Web Forms.
6- Ajax Contact Form
A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP.
The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user.
7- Ajax Contact Form + YUI
This effect can pretty much work on any element you want. I just happened to choose to apply it to my form elements upon ‘blur’ and ‘submit’ on certain conditions (such as being a required field).
8- Jot Form
Jot Form – is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others).
9- Styling form controls with CSS, revisited
Styling form controls with CSS, revisited – 224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations.
10- Prettier Accessible Forms
Prettier Accessible Forms – Nick Rigby takes a look at how to make better and accessible forms using CSS instead of old-school tables.
11- jQuery inline form validation
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.
12- How to make a password strength meter for your registration form
A Password strength meter for your register form – A small tutorial on how to build a password strength meter like the one on Google’s new account form.
13- An AJAX auto-complete text field
An AJAX auto-complete text field – where it adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key.
14- A form with style
How to style and stop web forms from looking ugly.
15- Tableless Forms
Tableless Forms – has a great login form example, with a graphic in the input field.
16- Really Easy Field validation with Prototype
Really Easy Field validation with Prototype – Here’s a form validation script that is very easy to use.
17- Ajax form validation
Ajax form validation – Learn how to use AJAX in order to process and validate your forms.
18- MooTools Content forms
Input is checked via JavaScript & PHP. Message field does not accept any http addresses considering most spams reach this way.
19- Ajax Contact Form With Xajax
A simple and safe Ajax form. A JavaScript validation mechanism controls the fields & displays a common warning for all fields.
Ajax function used is Xajax & the famous PHPMailer is used for sending the e-mail.
20- Trimming form fields
Trimming form fields – Wouldn’t it be a cool idea to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can.
21- Live Validation
Live Validation – is a small open source javascript library built for giving users real-time validation information as they fill out forms.