Question

I’m creating a contact form using ExpressionEngine, however the built in contact form doesn’t support safecracker-style inline error messages.

Are there any plugins which improve on the standard EE contact form, to add inline error handling, or AJAX validation etc? What would be the best way to go about implementing a simple contact form?

As this is a simple contact-to-email form, I don’t need the full functionality of the form plugins – just a nice form which I can template to send an email.

Answer 1

Safecracker is perfect for this, I do it all the time. I even wrote a little EE extension that allows me to define novalidate=”novalidate” attributes to the form, because the native EE form helpers don’t support HTML5 attributes.

Safecracker Attributes Extension (it’s super simple)
https://gist.github.com/2595553

If you want to send dynamic emails with robust templating (as most people do with contact forms), take a look at my latest add-on Postmaster. It was built drop into any application, whether it is simple or complex. It can really add a ton of extra capabilities to entry forms (both SC and the CP).

https://objectivehtml.com/articles/postmaster-the-definitive-email-solution-for-expressionengine

I also recommend you checkout my validation library. The other jQuery validation library is ok, but lacks a lot attention to detail. I took a different direction.

My library:
https://github.com/objectivehtml/HTML5-Form-Validation

My docs:
https://objectivehtml.com/jquery/html5-form-validation

Unfortunately, I haven’t had the time to complete the docs, but the library has been in development for 3 years and is rock solid.

Essentially, just use HTML5 validation attributes and use JS to progressively enhancing the experience so it works with IE, FF, and Webkit all the same. You should be able to use CSS to style every “state” and validate any condition. My library provided all the necessary methods and callbacks to do anything you want really.