Something I’ve wanted for a while was to be able to use FreeForm, but without going to a new page to tell me there’s an error or that everything worked fine.  I also wanted to use my favorite javascript library, Mootools.

Nothing I could find existed, so I made my own.  Here’s a demo: http://chris-barr.com/projects/ajax_form

I’m writing up a blog post and I’ll have it up soon which will better explain how to use this.  Right now I feel it’s fairly easy to use if you have a basic understanding or EE, FreeForm and Javascript.

So, tell me what you think and what needs improvement.

Hey Chris,

Looks pretty fun.

I have to say I normally prefer to run all form validation through a jQuery based Javascript routine. I like to show the errors in a div above the form and change field classes to highlight fields. The main thing is that I like all the errors to show at once so people can correct at once without getting piecemeal feedback. So that would be my concern about your method. I only know of a requirement after I make the error and I don’t about all of my errors at once.

mk

Thanks for pointing that out.  Multiple errors were happening at once, but the way I had some loops set up it would cancel them out.  Now if you have multiple errors they are all highlighted like they should be!

I thought about having the div to display the error messages, and my original idea did that.  I’m not 100% sure that this is needed since it tells you currently if a field has errors. The only reason I can think of is if you need to know why a field is in correct (such as an invalid email address vs. a blank email field).  But one look at the field and you usually know what’s wrong.

Let me know if you still think otherwise, it would be very easy to add in, and even make an to toggle on and off.

Ok, I’ve fixed some bad bugs and added the ability to display the actual FreeForm errors in another element.  Re-check the demo and also my blog entry about it: http://chris-barr.com/entry/ajax_forms_in_expression_engine_with_freeform/

Ok, also fixed the captcha bug, just needed to add the {if captcha} {/if} tags inside the javascript file.  Now it works as expected in version 1.1.1 - so check my blog for the updated version.