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

Demo

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

Brett’s Contact form

Download

AJAX Contact form (with captcha)

An AJAX contact form with a captcha. Demo

Tutorial how to create an 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

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

Ajax form validation

Read Tutorial

AJAX Form POST/GET

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

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.

prettyForms

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 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.

Demo

Niceforms

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

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.