Ajax Contact form with validation

Ajax Contact form with validation

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
124 views

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…

Circle Six contact form into a wordpress plugin. You can see it in action on the blog’s new contact page. It has most of the features of the original, and I stripped the design down to make it work out of the box with as many configurations as possible. I still had some trouble getting it to pop up right on every theme I tried it on, but I refuse to use tables to hold it together. Principles.

I’m making it available, timidly, as a 0.1 release. I’m open to receiving bug reports, but don’t plan to offer a lot of support to people who just want a quick and easy AJAX contact form. For you, check out Holler. What makes this contact form different is: Full admin options panel for configuration, more security features to prevent spamming and spam-bot flooding, and more interface feedback to the user. I’ve tried to make it as simple as possible to install, so don’t be scared to try. Worst thing that can really happen is it won’t work or won’t look right, in which case you can send me an email, let me know what theme and versions you tried it on and then remove it from your system until I get a bugfix out. Right?

Here’s an excerpt from the INSTALL file, so you can see the beautiful simplicity of it.

1.) Upload the c6contact directory into your plugins directory. Be sure to upload the entire directory structure intact, in a subdirectory off of the plugins directory (wp-content/plugins/c6contact).

2.) Activate the plugin.

3.) Go to Options->c6contact and fill in the necessary fields.

4.) Create a contact page, or edit an existing one. Use any template (the default page template is fine, especially if you’re unsure what I’m talking about). Add (a simple html comment) on the page where you want the contact form to appear.

This is my *first* Wordpress plugin. I don’t have a clue, and made it up as I went along. I’m highly receptive to advice of all kinds… “You should have a handler for this exception…” or “There’s no error-handling in your admin options panel”, or whatever you’ve got to throw at me. It will be graciously accepted.

Demo: http://blog.circlesixdesign.com/contactform/

Download: http://blog.circlesixdesign.com/c6contact.zip

Source: http://blog.circlesixdesign.com/contactform/

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

  1. Mootools-Ajax Contact Form Ajax can be very intimidating if you know very little...
  2. jVal – jQuery Form Field Validation Plugin jVal is a jQuery form field validation plugin that provides...
  3. Simple and Clean Form Validation Script The complete example code (form and script) for Form Validation...
  4. jQuery inline form validation Engine When it comes to form validation, it’s hard to have...
  5. Form Validation with JQuery A single line of jQuery to select the form and...

Do you like this post?

Email:     

Tags: , , , , , , , , , , , , , , , , , , ,

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment



Web Design & CSS (Templates) - TOP.ORG