Simple Contact Form in PHP Mysql Ajax with Javascript Validation

In this tutorial we are trying to build a simple contact form or enquiry form in php. As we know contact us form is very necessary in all website because all websites have must have a contact us page and all website admin want to get contacted by their target user or customer. So this is the best example for contact us form or enquiry form in php. The main benefit of the code is that response is also get in sample page without refreshing or navigating to other page. User will get response message in same page as we are serving data by Ajax.
Here you can customize the code as per your need. You can receive an email when any user fills this form or you can send an email back to that user who fills the contact form. This code is simple, neat and clean. Here I have made a separate response file where you can add email functionality or any customization according to your need.

Here i will explain code step by step

Simple Contact Form Code here

<div class="floatL cont_lft_side">

 
  <p>Please fill in your details below.</p>
  

<div style="width:448px; margin:auto;" id="getFormResponseDiv"></div>
<form id="frmCtnt" name="frmCtnt" onsubmit="getFormReponseSubmit(getFormResponseDiv);return false;">

<div class="txt_stl">
<input type="text" value="Enter Your Full Name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';">
</div>

<div class="txt_stl">
<input type="text" value="Enter Your Email Id" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';">
</div>

<div class="txt_stl">
<input type="text" value="Enter Your Contact Number" name="mobile" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';">
</div>

<div class="txt_stl">
<textarea onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" rows="" cols="" name="comment">Please Write your Query or Comment here.</textarea>
</div>

<input class="or_btn_icon" type="submit" value="Submit">

</form>
  </div>

Javascript Validation Code Here

<script>

var setURL;
function echeck(str) {
	var at="@";
	var dot=".";
	var lat=str.indexOf(at);
	var lstr=str.length;
	var ldot=str.indexOf(dot);
	var pattern=/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|me|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
	if (str.indexOf(at)==-1){
		alert("Invalid E-mail ID");
		return false;
	}
	if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		alert("Invalid E-mail ID");
		return false;
	}
	if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		alert("Invalid E-mail ID");
		return false;
	}
	if (str.indexOf(at,(lat+1))!=-1){
		alert("Invalid E-mail ID");
		return false;
	}
	if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		alert("Invalid E-mail ID");
		return false;
	}
	if (str.indexOf(dot,(lat+2))==-1){
		alert("Invalid E-mail ID");
		return false;
	}
	if (str.indexOf(" ")!=-1){
		alert("Invalid E-mail ID");
		return false;
	}
	if(!pattern.test(str)){         
		alert("Invalid E-mail ID");
		return false;   
    }
	return true;				
}


function frmValidate()
{
	
	if(document.frmCtnt.name.value=="" || document.frmCtnt.name.value==null || document.frmCtnt.name.value=="Enter Your Full Name")
	{
		alert("Your Name can't be blank");
		document.frmCtnt.name.focus();
		return false;
	}
	if(document.frmCtnt.email.value=="" || document.frmCtnt.email.value==null || document.frmCtnt.email.value=="Enter Your Email Id")
	{
		alert("Your Email can't be blank");
		document.frmCtnt.email.focus();
		return false;
	}
	if (echeck(document.frmCtnt.email.value)==false){
		document.frmCtnt.email.focus();
		return false;
	}
	
	if(document.frmCtnt.mobile.value=="" || document.frmCtnt.mobile.value==null || document.frmCtnt.mobile.value=="Enter Your Contact Number")
	{
		alert("Your Mobile can't be blank");
		document.frmCtnt.mobile.focus();
		return false;
	} else if (isNaN(document.frmCtnt.mobile.value)) {
		alert("Mobile number contains illegal character");	
		document.frmCtnt.mobile.focus();
		  return false;
	} 	
	
	if(isNaN(document.frmCtnt.mobile.value))
	{
		alert("Please enter valid Mobile Number");
		document.frmCtnt.mobile.focus();
		return false;
	}
	if(document.frmCtnt.comment.value=="" || document.frmCtnt.comment.value==null)
	{
		alert("Your Comment can't be blank");
		document.frmCtnt.comment.focus();
		return false;
	}
	return true;
}

Ajax Code Here

<script>
function getFormReponseSubmit(getFormResponseDiv)
{
if(frmValidate()==true)
{	
URL="?name="+document.frmCtnt.name.value+"&email="+document.frmCtnt.email.value+"&mobile="+document.frmCtnt.mobile.value+"&comment="+document.frmCtnt.comment.value;

if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){	
	document.getElementById("getFormResponseDiv").innerHTML=xmlhttp.responseText;
}else{
	document.frmCtnt.name.value="";
	document.frmCtnt.email.value="";
	document.frmCtnt.mobile.value="";
	document.frmCtnt.comment.value="";
	document.getElementById("getFormResponseDiv").innerHTML="<br/>&nbsp;Waiting.........<br/>";

}}
xmlhttp.open("POST","http://www.discussdesk.com/YOUR_RESPONSE_FILE_PATH"+URL,true);
xmlhttp.send();
}}
</script>

 

Note: This is just a tutorial, User can change or customize as per their need. If you have any suggestion or query. Please write me on below Comment form. Enjoy with Simple contact form.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments