16 Free Ajax Contact Forms – For A Better User Experience

Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site.

Creating a better user experience in this bridge definitely helps improving the effect created in the eyes of the site visitors.

Depending on the features (or JS frameworks to be used) you may need, you can choose from these 16 very nice free Ajaxed contact forms & implement them easily to any website.

 

LightForm – Ajax / PHP Contact Form – Demo

PHP Ajax Contact Form

It uses FormCheck2 for validation of fields and NiceForms to style form objects.

There is a simple captcha-like validation which ask the user a sum of 2 numbers. E-mails are sent via PHP & displays user IP, user agent and referrer in the message.

Proto Form – Contact Form With Protoype

Prototype Contact Form

A lightweight (only 4KB) & unobtrusive contact form that is built with Prototype.

The fields are validated & highlighted accordingly. The e-mail message is sent via Ajax and a success result is displayed.

It is a very handy form which can be installed easily.

jQuery – Ajax Contact Form (Tutorial & Files)Demo

Ajax jQuery Contact Form

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP.

The form has an input validation. After the message is sent in th ebackgroung a "success" message is displayed to the user.

Very Chic Contact Form (English version) – Demo

Script.aculo.us Contact Form

This contact form uses Script.aculo.us & WForms.

An unique feature of it is, it tries to connect to the server of the sender to verify that it accepts mail to the address mentioned.

Message size can be limited and remaining characters are displayed in a box.

jQuery Sliding Contact FormDemo

jQuery Contact Form

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.

There is no form validation & mail sending code included.

Brett's Beta Contact Form

Free Ajax Contact Form

A contact form that checks the validity of the fields & sends the e-mail accordingly. It is not updated for a while but the form works ok.

roScripts Form – MooTools Ajax Contact Form – Demo

Ajax Contact Form

This contact form is built with MooTools. Fields are validated via JavaScript & if there are no errors e-mails are sent with an Ajaxed interface (PHP backend).

Ajax Contact Form With Xajax & PHPMailerDemo

Free Ajax Form

A simple and safe Ajax form. A JavaScript validation mechanism controls the fields & displays a common warning for all fields.

Ajax function used is Xajax & the famous PHPMailer is used for sending the e-mail.

jQuery – Ajax Contact FormDemo

jQuery Ajax Contact Form

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation.

Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page.

Contact Form With Script.aculo.us & WFormsDemo

Free Ajax Contact Form

A nice & free contact form script that can do required input validation by adding a class info to the form elements like: class="required".

Script.aculo.us is used for the "info box & text appearing effect" & WForms is used for controlling the inputs.

Ajax Contact Form With PHP & jQuery (Tutorial)Demo

PHP Ajax Contact Form

An unobstrusive contact form that has a PHP backend & uses jQuery.

It controls the required fields, displays warnings accordingly & sends the email with no page refresh.

A nice thing about this ajax contact form is, inputs are validated at the PHP side which means they will be controlled even if JavaScript is disabled.

Fancy Ajax Contact Form (French – Click For English)

Ajaxed Contact Form

This form is built with MooTools with a PHP backend.

It has a very nice look & there is no validation implemented.

MooTools Contact Form

MooTools Contact Form

A contact form built with MooTools.

Input is checked via JavaScript & PHP. Message field does not accept any http addresses considering most spams reach this way.

jQuery Contact FormDemo

jQuery Form

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh.

The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

Tableless Ajax Contact Form With jQuery (Tutorial & Files)Demo

Ajax Contact Form

A nice contact form that uses jQuery & PHP.

It validates all the inputs, displays warnings when needed & sends the e-mail.

Easy Ajax Contact Form (jQuery)Demo

Easy Ajax Contact Form

Using jQuery & the jQuery Form plugin, this ajax contact form script validates inputs & sends the e-mail.

45 Comments
  1. Reply Binny V A October 21, 2008 at 1:26 PM

    I have created a similar script as well – Live Validator

  2. Reply Gabe October 21, 2008 at 1:36 PM

    Nice ones, thanks for the useful information once again!

  3. Reply Bryan October 21, 2008 at 2:13 PM

    Thanks a bunch for listing my form along with these other great forms, I really appreciate it!

    Great site, great resources!

  4. Reply Jess October 21, 2008 at 11:08 PM

    Wow great list! Thanks so much for sharing. This will come in handy!

  5. Reply Eric Martin October 22, 2008 at 8:27 AM

    Cool list. Another option: SimpleModal Contact Form.

    There is also a Drupal module and WordPress plugin for it.

  6. Reply Designer October 22, 2008 at 9:48 AM

    thanks a lot

  7. Reply Jeremy Horn October 24, 2008 at 7:53 PM

    Great set of examples that I am recommending to my readers (and all user experience designers) in this week’s Weekend Reading…

    http://tpgblog.com/2008/10/24/the-product-guys-weekend-reading-october-24-2008/

    Jeremy Horn
    The Product Guy
    http://tpgblog.com

  8. Reply jake November 9, 2008 at 4:51 AM

    Thanks! You’re a god of contact forms… lol

  9. Reply sandra November 11, 2008 at 4:23 PM

    For the Jquery sliding form:

    could anyone help me making it finctional I’m a beginner and would appreciate help the link of the jquery is here

    jQuery Sliding Contact Form is here:
    http://www.designshack.co.uk/tutorialexamples/jquerycontactform/

    A million thanks in advance

    Sandra

  10. Reply printing brisbane December 22, 2008 at 2:26 AM

    Ahhh this is just what the doctor ordered !!! You are a life saver

  11. Reply webdesign January 8, 2009 at 12:32 AM

    Very nice collection of Forms ! i can;t hardly choice

  12. Reply Ben Plum February 8, 2009 at 10:51 PM

    Hey, I just built a new ajax contact form, SlideSubmit. It has field validation and a brand new way to submit the form. It uses a slider inspired by the iPhone unlock to prove the person entering is human, no more CATCHPAs ever! Take a look and let me know what you think, http://www.benplum.com/slidesubmit

  13. Reply kazem February 27, 2009 at 3:40 PM

    Hi
    Your contact form is very beautiful.
    Thanks
    đŸ™‚

  14. Reply deviantz March 11, 2009 at 6:42 AM

    very nice! I love this stuff!

  15. Reply Ahmad May 31, 2009 at 6:45 AM

    Thank you too much ! bookmarked this site , good stuff
    keep going…..

  16. Reply Abeon June 3, 2009 at 6:38 AM

    Very nice collection.

    LiteForm is my fav.
    Looks the best and has some nice validation… Good collection đŸ˜‰

  17. Reply Tim McDonald July 3, 2009 at 6:51 AM

    Some nice forms here, thanks very much. If you could find something similar with order forms that would be fantastic too. Once again thanks for the great post!!

  18. Reply MYspace Quotes Dude July 4, 2009 at 12:20 AM

    This page has been officially book marked!! I’m gonna set up LiteForm on my contact page. Thanks a lot for posting!!

  19. Reply lalji August 24, 2009 at 5:44 AM

    Thanks for nice forms.

    http://www.seoname.com

  20. Reply mia September 4, 2009 at 3:48 PM

    I love the look of ‘lightform’ but why do they make it so hard to add them to your blog?

    There is so much code to add and the instructions are vague.

    I do not know where to add the codes.

    Could someone please help me and tell me where to add the individual codes on my blogger blog.

    Thanks

  21. Reply EddyTools September 5, 2009 at 11:26 AM

    Gear Help …. I have implemented it on my website http://www.eddytools.com Please review it.

  22. Reply lalji halai October 22, 2009 at 2:36 PM

    Add this nice Ajax contact form:

    http://www.unscripts.com/ACF/

  23. Reply Lala November 14, 2009 at 1:30 PM

    Cool,
    Thank you very much for share this

  24. Reply James Brooks November 27, 2009 at 7:55 AM

    I’ve also written by own jQuery contact form on my jQuery tutorials website.

    Check it out: http://www.jtutorials.co.cc/featured/php-contact-form-validation/

  25. Reply John November 29, 2009 at 2:01 PM

    Thanks so much, I found this something nice and complete http://www.phpstring.co.cc/ajax-registration-module

  26. Reply red pepper January 15, 2010 at 4:46 PM

    Your contact form is very beautiful.

    thanks

  27. Reply SohoInteractive January 18, 2010 at 10:45 PM

    great collection
    thanks

  28. Reply Sabin February 3, 2010 at 1:38 AM

    Nice collection. Needed it desperately. Thanks.

  29. Reply DisenioN February 12, 2010 at 5:37 AM

    Great compilation!

    Only one thing: the links for “jQuery – Ajax Contact Form (Tutorial & Files)” are broken. It seems that a Slash is missed.

    Thanks for your work from Spain.

  30. Reply Umut M. February 12, 2010 at 6:50 AM

    @DisenioN,

    Thanks very much for that, just fixed the link.

  31. Reply Tarif February 13, 2010 at 10:47 AM

    Thank for the forms.

  32. Reply Alex February 19, 2010 at 3:42 PM

    good collection of scripts

  33. Reply Douglas March 5, 2010 at 1:17 PM

    I have developed a MooTools based script for Joomla:
    http://ideal.fok.com.br/joomla/extensions/module-ajax-contact-opensource.html

    Best regards,

    Douglas

  34. Reply ricky March 8, 2010 at 6:47 AM

    Jquery Form Applications; A great compilation…
    http://www.ueuh.com/internet/jquery-form-applications/

  35. Reply Paul Stevenson March 24, 2010 at 9:45 AM

    can anybody help, when form submits it displays

    {“status”:0}

  36. Reply 3TurtleStudios April 22, 2010 at 1:34 PM

    wow, and my site uses an exactly similar Ajax contact form!!

  37. Reply wiyono April 26, 2010 at 4:36 AM

    This work perfect in my website, thank you so much

  38. Reply Juan Pablo May 31, 2010 at 11:42 AM

    Thank you for this usefull information.

  39. Reply EmRa August 27, 2010 at 7:01 AM

    Thanks a lot for giving that usefull information.

  40. Reply BrĂ­cio September 2, 2010 at 9:53 AM

    Hi from Brazil .. nice nice collection thanks! :)~

  41. Reply Nabin January 12, 2011 at 8:23 AM

    the LightForm demo has no required field validation.
    form submitted with empty fields

  42. Reply ik February 26, 2011 at 7:07 AM

    Awesome collection of contact forms
    finally found one i was looking for
    thank you for sharing!!!

  43. Reply connie April 10, 2011 at 3:00 PM

    I have used “roScripts Form – MooTools Ajax Contact Form”, it received two or three emails as I tried this form at first, while i continually triing, it stoped receing, I cant receving, is this third party or something?

  44. Reply Veronica July 9, 2011 at 8:46 AM

    I like all of these contact forms however, I wish there were actual tutorials on how to create your own. Teaching people how to create it using Photoshop, Fireworks, Illustrator and then how to use CSS, HTML, Javascript to code it.

  45. Reply TonyRiver July 19, 2011 at 5:51 PM

    Great post, I plan on using number 1 on my site(s) shortly. Thanks

Leave a reply

Search