Visual-Blast Magazine

Fancy contact form – tutorial (source files included) on how to make an AJAX contact form using PHP, CSS and jQuery.

View Demo

The form works in any browser and is unobtrusive, degrades gracefully, which means it is perfectly usable even with JavaScript turned off.

jQuery inline form validation – a versatile solution that works with every form.

The script creates a div and positions it in the top right corner of the input and displays validation message like a tooltip. 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. Validation rules are created inside the classes of every input.

Shaking Login Form – learn how to create a login form which shakes to indicate that the password you entered is wrong using CSS and jQuery.

View Demo.

A new version of the FormCheck, available for mootools v1.1 and v1.2, with a lot of improvements. You can watch it here (different demos are avalaible) and download it here. There is a lot of options, take a look at the documentation.

Improvements:

• available for mootools v1.1 and v1.2
• it’s now possible to block the focus in a field with error
• a basic implementation of ajax submission
• a new default theme supporting shadow in IE6
• possibility to submit the form with an anchor (or other elements) with class validate['submit']
• a close tips button
• and a lot of bugs corrected (the textarea problem, confirmation bug, …)

Tutorial on how to create a Digg-like signup form with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled, with just a few lines of jQuery code. The same approach will be adopted for displaying validation messages.

View Demo

JavaScript Form Validation – A lightweight form validation script that displays an attractive inline message that when there’s an error. There is no markup to add on your existing page. Just call the inlineMsg() function when you wish to display a message. Tested in IE6/IE7/IE8, Firefox, Opera and Safari.

LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.

Features:

• Form Validation using FormCheck2.
• Spam Check.
• Display user IP, user agent and referrer in the message.
• Display a dialog box when message sent succesfully.
• Inputs and textareas are styled with NiceForms.
• Works in the most recent browsers (IE6+, Firefox, Opera, Safari and Netscape).

Note: Form validation won’t work anymore if users disable Javascript. Released under Creative Commons Attribution v2.5.

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers. FancyForm uses the ultra-lightweight Mootools JavaScript framework. v0.91 Released 2007-11-25.  Download FancyForm .

• Quick Setup: Only two lines of markup needed
• Completely Extendible: Numerous customization options
• Degrades Gracefully: Forms still work on older browsers

Easy Install

Add the following anywhere in your website:

<script src="js/mootools.1.11.js" type="text/javascript"><!--mce:0--></script>
<script src="js/moocheck.js" type="text/javascript"><!--mce:1--></script>

Add CSS styles on your website to specify the appearance of the checkboxes and radio buttons. Add styles for the classes checked and unchecked for checked / unchecked checkboxes respectively, and likewise use the classes selected and unselected for radio buttons that are checked / unchecked.