20+ Best Ajax Forms

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…

Best Ajax Forms

2- Easy Ajax Contact Form (jQuery)

Using jQuery & the jQuery Form plugin, this ajax contact form script validates inputs & sends the e-mail.

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

5- Form Assembly

Form Assembly – A Beautiful Collection of CSS Stylesheets For Web Forms.

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

Best Ajax Forms

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

Best Ajax Forms

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

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

14- A form with style

How to style and stop web forms from looking ugly.

Best Ajax Forms

15- Tableless Forms

Tableless Forms – has a great login form example, with a graphic in the input field.

Best Ajax Forms

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.

Best Ajax Forms

17- Ajax form validation

Ajax form validation – Learn how to use AJAX in order to process and validate your forms.

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

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

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.

Best Ajax Forms

Leave a Comment