Contact Form

Download link
http://fahimchowdhury.com/files/contactform.zip

Setting up HTML

In the header of the HTML add the following script:
<script type="text/javascript" src="scripts/main.js"></script>


Adding your Form
before you create your form items add this at the top then create your form items.
<form  id="contact_form"  method="post"> 


Form Items
ensure you use the following naming conventions when creating your form items:
name = mail_name
email = mail_email
subject = mail_subject
message = mail_message


also in each form item add the following onfocus function to clear the invalid background colour.
onfocus="onFieldFocus(this)"


Add Error Message
create a div  an other element and provide it with the following id:

<div id="formMessage"></div>

Add PHP Iframe

Add the following iframe to load the php script into:

<iframe name="php" id="php" src="" width="700" height="100"></iframe>



Configure Error Messages and Email Address
In the Javascript (main.js) edit the following fields to cater your own design and edit the email address. You can change the error colour,messages,email address and the PHP location.

var errorColor = "#FF0000";
var messageSent = "message sent";
var messageNotSent = "message could not be sent";
var fieldsEmpty = "please fill in all fields in red";
var messageEmail = "email address in not valid";
var email_to = "fahim@gmx.com";
var php_location = "scripts/mail.php";