I have written the javaScript for this contact form, this is the HTML below and I have not included CSS here
<!-- conatact form -->
<div class="cws-widget">
<div class="widget-title" style="color:#fec20b;">Send a Message</div>
<div class="textwidget">
<div role="form" class="cf" id="cf-f1705-o1" lang="en-US" dir="ltr">
<!-- <div class="screen-reader-response"></div> -->
<form action="" method="post" class="cf-form contact-form" novalidate="novalidate">
<p><span class="cf-form-control-wrap your-name"><input type="text" name="name" id="name" for="name" value="" size="60" class="" aria-required="true" aria-invalid="false" placeholder="Name" /></span></p>
<p><span class="cf-form-control-wrap your-email"><input type="email" name="email" id="email" for="email" value="" size="60" class="" aria-required="true" aria-invalid="false" placeholder="E-mail" /></span></p>
<p><span class="cf-form-control-wrap your-message"><textarea name="message" id="message" for="message" cols="39" rows="6" class="" aria-invalid="false" placeholder="Message"></textarea></span></p>
<p>
<input type="submit" id="submit" value="Send" class="cf-form-control cf-submit" />
</p>
</form>
<div class="email_server_responce"></div>
</div>
</div>
</div>
and the script to validate and Ajax server response is
if (jQuery(".contact-form").length) {
jQuery(".contact-form").each(function(){
jQuery(this).validate({
onkeyup: false,
onfocusout: false,
errorElement: 'p',
errorLabelContainer: jQuery(this).find('.msg_box_text'),
rules:
{
name:
{
required: true
},
email:
{
required: true,
email: true
},
message:
{
required: true
},
verify: {
required: true,
remote: {
url: 'php/check-capcha.php',
type: "post",
data:
{
code: function()
{
return jQuery('.verify').val();
}
}
}
}
},
messages:
{
name:
{
required: 'Please enter your name',
},
email:
{
required: 'Please enter your email address',
email: 'Please enter a VALID email address'
},
message:
{
required: 'Please enter your message'
},
verify: {
required: 'Please enter Captcha',
remote: "Please enter a VALID Captcha"
}
},
invalidHandler: function()
{
jQuery(this).find(".cws_msg_box.error-box").slideDown('fast');
jQuery("#feedback-form-success").slideUp('fast');
},
submitHandler: function(form)
{
jQuery(form).find(".cws_msg_box.error-box").slideUp('fast');
var $form = jQuery(form).ajaxSubmit();
submit_handler($form, jQuery(form).parent().children(".email_server_responce") );
}
});
})
var submit_handler = function (form, wrapper){
var $wrapper = jQuery(wrapper); //this class should be set in HTML code
$wrapper.css("display","block");
var data = {
action: "email_server_responce",
values: jQuery(form).serialize()
};
jQuery.post("php/contacts-process.php", data, function(s_response) {
s_response = jQuery.parseJSON(s_response);
if(s_response.info == 'success'){
$wrapper.addClass("message message-success").append('<div class="cws_msg_box success-box clearfix"><div class="icon_section"><i class="fa fa-thumbs-up"></i></div><div class="content_section"><div class="msg_box_title">Success!</div><div class="msg_box_text">Your message was successfully delivered.</div></div></div>');
$wrapper.delay(5000).hide(500, function(){
jQuery(this).removeClass("message message-success").text("").fadeIn(500);
$wrapper.css("display","none");
});
jQuery(form)[0].reset();
} else {
$wrapper.addClass("cws_msg_box error-box clearfix").append("<div class='icon_section'><i class='fa fa-exclamation'></i></div><div class='content_section'><div class='msg_box_title'>Server fail!</div><div class='msg_box_text'><p> Please try again later!</p></div></div>");
$wrapper.delay(5000).hide(500, function(){
jQuery(this).removeClass("cws_msg_box error-box clearfix").text("").fadeIn(500);
$wrapper.css("display","none");
});
}
});
return false;
}
}
and the PHP is
<?php
//Fetching Values from URL
$host="localhost";
$username="root";
$password="";
$databasename="test";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
if($_POST){
$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];
$insert=mysql_query("insert into contact (name,email,message) values('$name','$email','$message')");
if($insert){
$to = "example@gmail.com";
$subject = "Contact Request.";
$txt = "Hello,\n You have got a request from name: ".$name."\nemail: ".$email."\nmessage: ".$message."\n";
$headers = "From: info@example.com";
mail($to,$subject,$txt,$headers);
}
}?>
the validation works perfectly but it does not send data to the database and there is no ajax response form the server.
