i am dustin diaz

Ajax Contact Form 1.0! Yay

Shake shake shake! Shake shake shake! Shake that bootay. Shake yo bootay... Oh, er.. um. Hi. Eh hem. Sorry, I just got caught up in the moment for a second. I was in the middle of doing the classic Apple Shake Dance; you know the one that happens when you filled out an incorrect password. Yea, that one. Anyway, for any of you out there that sat around for what seems to have been ages for me to update my cheesy Ajax Contact Form, I've now rebuilt it on top of the YUI Connection Manager (translation for the teenagers (AJAX!)). Oh yea. Check out the demo in action. However beyond just the simple experience of a normal contact form, I've added some animation that mimics some apple shake down magic (like I was talking about) and of course some simple swooshy up-down yoyo type stuff. And although I haven't packaged it up for you yet, lemme just tell you about it.

Now with as many fields as you want

Of course a huge shortcoming of the last Ajax Contact Form, there was the limitation of the fields that I provided. Well now with this version, you can add as many form fields as you want, and they will indeed all be sent to your inbox by way of array_keys sent via $_POST.

Better "Degradability" support

What that means is that this one has a bit better support for those who don't have JavaScript enabled. It will simply submit the form like normal and return your success or failure message appropriately. One thing to particularly note this time (since I got a bagillion emails last time about this) is that you only have to configure your mail settings in one spot. Yepper. Just one spot (as it should be (I don't know what I was thinking before)). Beyond that, you could even have multiple forms on the same page. Although untested (on my behalf), I believe that you could still do it with the architecture I've built.

Better looking code and extendible

Yea, I must admit; the code looks eons better, and it's namespaced for your convenience. You really should have no problems with any of it conflicting with your current JavaScripty / PHP goodiness sitting in your web pages. One thing I'd like to particular draw attention to is my effects object which you may freely add to at your discretion.

DED.effects Object

DED.effects = function() {

	var $D = YAHOO.util.Dom;

	var $M = YAHOO.util.Motion;

	return {

		/*

			@param {String/HTMLElement} | oEl : Accepts a string to use as an ID for getting a DOM reference, or an actual DOM reference

			@param {Int} | iOffset : The unit (in 'px') that the element will be shaken 'by'

			@param {Int} | iNum : The number of times the motion will iterate

			@param {Int} | iSpeed : The speed at which the motion will animate

		*/

		shake : function(oEl, iOffset, iNum, iSpeed) {

			var xy = $D.getXY(oEl);

			var left = xy[0]-iOffset;

			var right = xy[0]+iOffset;

			(function(type, args, count) {

				if ( count >= iNum ) {

					var a = { 

						points : {

							to : xy

						}

					};

					var anim = new $M(oEl, a, iSpeed);

					anim.animate();

					return;

				}

				else if ( count % 2 ) {

					var c = count+1;

					var a = { 

						points : {

							to : [right, xy[1]]

						}

					};

					var anim = new $M(oEl, a, iSpeed);

					anim.onComplete.subscribe(arguments.callee, c);

					anim.animate();

				}

				else {

					var c = count+1;

					var a = { 

						points : {

							to : [left, xy[1]]

						}

					};

					var anim = new $M(oEl, a, iSpeed);

					anim.onComplete.subscribe(arguments.callee, c);

					anim.animate();

				}

			})(null, null, 1);

		}

	};

}();

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

Other than that, look forward to seeing a packaged zip file with some instructions, copyrights, and bottle caps by sometime tomorrow. In the meantime... Yay! V 1.0 :)