Tools and Files to create an Ajax Contact form


With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX javascript either displays the answer (page) or does some action depending on the answer.

I’m starting this post with my favorite. Ajax Contact form 0.9 is old but still now the best with some modifications. What you need to add is a captcha to stop some spam. Version 1.0 you can find in updated post where in empty field we have a shake effect.

Download Ajax contact form


Aajax Captcha


In simply steps you can add an image captcha to you contact form.

Download ajax captcha


Ajax Contact Forma Tutorial


In this tutorial you will find the two pages that you will need. The first page will show the form to the user when the user first visits the page. This page is called "Form.php". The other page will process the data from the first page and will return a confirmation message. You can use PHP or any other language to do anything you want. The other page is called  "Process.php".


roScripts AJAX contact form

roScripts AJAX contact form


An AJAX email contact form that uses mootools as a core Javascript library.


Brett’s Contact form





AJAX Contact form (with captcha)

AJAX Contact form (with captcha)

An AJAX contact form with a captcha. Demo



Tutorial how to create an Ajax contact form

Ajax contact form

In this tutorial I’ll be showing you how to create an Ajax contact form from start to finish. This includes the form HTML/CSS, the JavaScript and the PHP backend.

Here is an example at the end of this tutorial.



LightForm Ajax/PHP Contact Form

Ajax/PHP Contact Form

Download LightForm another my favorite. Nice forms applied to the fields. And anti spam sum.



Ajax form validation

Ajax form validation

Read Tutorial





This example demonstrates a simple AJAX javascript for sending a complete HTML form to the server and displaying the response. The javascript automatically gets all form elements – the server-response is displayed in a "span" – the server-side script is a simple PHP script to display the contents of the $_GET global variable.

Visit Tutorial



Form Styling with CSS

Form Styling with CSS

Forms use to be a real nightmare before we were able to sprinkle a drop of CSS upon them. Even now its safe to say that my least favourite part of building a website is making all the forms function. But at least these days I can have some fun with forms make them look pretty good. In this quick little how-to, I’ll show you how you can add some simple, but effective CSS styling to your forms to make them look beautiful and elegant. Visit the demo.



pretty Forms


Tips For Creating Great Web Forms


At CSS-Trick you can find some tips for your contact form. Also a demo page is available.


FancyForm Script

FancyForm Script

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.





Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.


A form with style

A form with style

CSS Play


You can add to your favorites from the social buttons below this post. Recommended for a quick access to this article. Thanks for reading and comment if you want to add your contact form.

Share your love

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *