Free and Simple Ajax Contact Form

12
jan

We've prepared a simple Ajax / PHP Contact form with Javascript Math Captcha and input fields validation. It's easy to install and configure.

It consists of 4 files:

css/contactform.css - css definitions for contact form
js/contactform.js - javascript file for ajax logic and input validation
contact.html - main html file with contact form
sendContact.php - php script that sends email

Contact form can be expanded to unlimited number of input fields or narrowed down to only two fields - email and message. Everything works automatically without touching any of given files except contact.html that holds the form itself.

See the live demo here.

How to install?

jQuery

First of all you should download Ajax Contact Form ZIP file. This script uses jQuery for Ajax submiting form and for some nice effects. To include jQuery on your page (it is not included in this download) you can use one of this two steps:

Visit jQuery web page where you can download latest jQuery library. To include it on your page just put this line into head tag:
```
<script type="text/javascript" src="path_to_jQuery/jquery-1.3.2.min.js"></script>
```
where path_to_jQuery is path to folder where you saved jQuery library. You should also check for name of your version of jQuery because in this example I used jquery-1.3.2.min.

You can also use Google api to include your jQuery. To do this put this code into head tag of your page:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>

CSS

Ok, so now that we have jQuery in our page, we should include CSS file that defines the layout of our contact form. This is nothing complicated and you can use your own CSS for styling the form. If you wish, you can even skip this step and use your preexisting CSS definitions.

To include css file that comes with this package just put this line in your head tag:

<link rel="stylesheet" type="text/css" href="css/contactform.css" media="screen" />

contactform.js

Next step is to include contactform.js. It contains all logic for sending Ajax request to sendContactp.php file with all data collected from form. It also validates form inputs (to be exact - email, message and captcha) and it runs some nice jQuery effects when showing errors and other messages. Also it contains Math Captha generation and validation functions to secure your contact form from spam and mass mailing. To include it just use this line of code in head tag of your page:

<script type="text/javascript" src="js/contactform.js"></script>

sendContact.php

This is a simple PHP script that sends data collected from form inputs to designated receiver via email. Email that it sends is simple text email (no HTML) with input name - value pairs of data.

In this file you must setup this two informations:

$to = "info@yourdomain.com"; - email address to wich contact data will be sent to (usually your email address, or main email address of site that you use).
$subject = "Contact Form"; - subject of emails that will be sent

These two lines can be found on top of sendContact.php file. To edit this file you can use any text editor (notepad will do).

contact.html

Contact.html is main file that holds html form with inputs. You can use this file directly or copy its content to some of your own files. It is important though that you use two main div tags:

div with id="contact_form" - it contains form
div with id="message_sent" - it contains success message

You can change everything inside this file but keep:

those two divs with their ids
input with name and id "email" (inside form)
textarea with name and id "message" (inside form)
input with name and id "captcha"

These elements are necessary for Ajax Contact Form to work properly.

As you can see, you can add or remove input fields and you can construct contact form that suits you the most, or you can use your own language for labels and messages.

Solucija - Free CSS Templates