PHP Contact form with jQuery Validation /Help me up!

+1 Alexander Best · June 12, 2014
Can someone help to find out why it does not work the code below , I believe I have everything from the Video PHP Contact form with jQuery Validation ? alexander_odriguez@hotmail.com


<?php


$hasError=false;
$sent=false;


if(isset($_POST['submitform'])){
   $name=trim(htmlspecialchars($_POST['name'], ENT_QUOTES));
   $email=trim($_POST['email']);
   $message=trim(htmlspecialchars($_POST['message'], ENT_QUOTES));


$fieldsArray=array(
  'name'   => $name,  // as or ? =>
  'email'   => $email, // as or ? =>
  'message'  => $message // as or ? =>
);


$errorArray=array();


  foreach($fieldsArray as $key => $val){// as or ? =>
    switch($key){
      case 'name':
      case 'message':
       if (empty($val)){
           $hasError=true;
           $errorArray[$key]= ucfirst($key)."Field has left empty.";
    }
       break;
    case 'email':
       if (!filter_var ($mail, FILTER_VALIDATE_EMAIL)){
          $hasError=true;
          $hasArray[$key]="Invalid email";
       }else{
           $email=filter_var($email, FILTER_SANITIZE_EMAIL);
       }
      break;
     }
   }


 if ($hasError!==true){
    $to ="alexander_odriguez@hotmail.com";
    $subject="Message from Contact Form";
    $smgcontents="Name: $name<br> Email:$email<br>  Message: $message";
    $headers ="MIME-Version: 1.0
";

    $headers .= "Content-type: text/html; charset=iso-8859-1
";

    $headers .="From: $name <$email
";

$mailsent=mail($to, $subject,$smgcontents,$headers);
 if ($mailsent){
     $sent= true;
     unset($name);
     unset($email);
     unset($message);
     }
   }
 }
 
?>


<!DOCTYPE HTML>
<html>
<head>
    <meta  charset="UTF-8">
   <title> Contact  form  </title>
   <link rel="stylesheet"   type="text/css" href="indexC.css">
   <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
   <script type="text/javascript">
   
   
 jQuery(document).ready(function($){
 $("#contactform").validate({
  rules:{
     name:{
       required :true,
        minlength :2               
 },
    email:{
        required :true,
        email :true               
 },  
    message:{
       required :true,
       minlength :50                
  } 
},
  messages:{
     name:{
         required :"Please enter your name", 
         minlength :"Your name seems a bit short or not ?"   
},  
    email:{
       required :"Please enter your email",
       email :"Please enter a valid email ?"                
 },
    message:{
        required :"Please add your comments",
        minlength :"Your comments  seems a bit short or not ?"

  }
});
});
 </script>
 </head>
 <body>     
   <div class="container">
     <h1>OnlineStore Contact</h1>
        <form id="contactform"  method="post" action="<?php echo $_SEVER['PHP_SELF']; ?>" novalidate >
      <?php
        if($sent==true){
            echo "<h2 class='success'>Thanks your message has been sent successfully</h2>";
       }elseif($hasError==true){
            echo '<ul class="errorlist">';
        foreach($errorArray as $key=>$val){// as or ?   / ?  => 
            echo "<li>".ucfirst($key). "field error-$val</li>";
       }
           echo'</ul>';
        }
?>
<input     type="text"     name="name"      value="<?php echo(isset($name)? $name:"");?>" placeholder="Your Name"  > 
<input     type="email"    name="email"      value="<?php echo(isset($email)? $email:"");?>" placeholder="Your Email"  > 
<textarea  name="message"  placeholder="Your Message"><?php echo(isset($message)? $message:"");?> </textarea>
<input     type="submit"   name="submitform"  value="Send">
</form>
</div>
 </body>
</html>


------------------CSS CODE BELOW.

*,*:before, *:After{
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}


*, html {
  margin:0;
  padding:0;
  outline:none;
}


html{
  font-size:62.5%;
}
::-ms-clear{
  display: none;


}
::-webkit-search-cancel-button{
  -webkit-appearance: none;


}
body{
  font-family:Arial, sans-secrif;
  font-size:10px;
  font-weight:normal;
  background-color:#fff;
  color:#222;
}
.container{
  position:relative;
  width:600px;
  margin:0 auto;
}
.container:first-of-type{
 top :100px;
}
h1{
  text-align:center;
  font-size:42px;
  font-size:4.2rem;
  margin-bottom:10px;
  color:#ff3300;


}


#contactform{
  padding:20px;
  border:1px solid #eee;
  -webkit-box-shadow:0px 2px 3px #ddd;
  -moz-box-shadow: 0px; 2px 3px #ddd;
  box-shadow:0px 2px 3px #ddd;
  -webkit-border-radius:5px;
  border-radius:5px;
  
}
#contactform imput[type=text],
#contactform imput[type=email],
#contactform imput[type=submit],
#contactform textarea{
  width:100%;
  display:block;
  padding:5px 10px;
  border:1px solid #ddd;
  margin-bottom:10px;
}


#contactform textarea{
  height:300px;
  font-family:Arial, san-sefix;
}
#contactform input[type="submit"]{
 width:200px;
  margin-bottom:;
  background-color:#fff;
  -webkit-border-radius:2px;
  -moz-border-radius:  2px ;
   text-transform:uppercase;
   cursor:pointer;
   -moz-transition:  all .3s ease-in-out;
   transition:all .3s ease-in-out;
}


#contactform input [type=submit]:hover{
background-color:#ff3300;
color:#fff;
border-color:#dddc00;


}
h2.succcess{
color:#27ae60;
margin-bottom:20px;
}


.errorlist{
list-style:none;
margin-bottom:20px;


}
label.error,
.errorlist li{
margin:bottom:10px;
color:#bb0000;
display:back;
}
.errorlist li:last-child{
margin-bottom:20px;
}


Post a Reply

Replies

Oldest  Newest  Rating
0 Bucky Roberts · June 12, 2014
Use the code tags. It makes it a lot easier to read.


<?php

$hasError=false;
$sent=false;

if(isset($_POST['submitform'])){
$name=trim(htmlspecialchars($_POST['name'], ENT_QUOTES));
$email=trim($_POST['email']);
$message=trim(htmlspecialchars($_POST['message'], ENT_QUOTES));

$fieldsArray=array(
'name' => $name, // as or ? =>
'email' => $email, // as or ? =>
'message' => $message // as or ? =>
);

$errorArray=array();

foreach($fieldsArray as $key => $val){// as or ? =>
switch($key){
case 'name':
case 'message':
if (empty($val)){
$hasError=true;
$errorArray[$key]= ucfirst($key)."Field has left empty.";
}
break;
case 'email':
if (!filter_var ($mail, FILTER_VALIDATE_EMAIL)){
$hasError=true;
$hasArray[$key]="Invalid email";
}else{
$email=filter_var($email, FILTER_SANITIZE_EMAIL);
}
break;
}
}

if ($hasError!==true){
$to ="alexander_odriguez@hotmail.com";
$subject="Message from Contact Form";
$smgcontents="Name: $name<br> Email:$email<br> Message: $message";
$headers ="MIME-Version: 1.0
";
$headers .= "Content-type: text/html; charset=iso-8859-1
";
$headers .="From: $name <$email
";
$mailsent=mail($to, $subject,$smgcontents,$headers);
if ($mailsent){
$sent= true;
unset($name);
unset($email);
unset($message);
}
}
}

?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Contact form </title>
<link rel="stylesheet" type="text/css" href="indexC.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">


jQuery(document).ready(function($){
$("#contactform").validate({
rules:{
name:{
required :true,
minlength :2
},
email:{
required :true,
email :true
},
message:{
required :true,
minlength :50
}
},
messages:{
name:{
required :"Please enter your name",
minlength :"Your name seems a bit short or not ?"
},
email:{
required :"Please enter your email",
email :"Please enter a valid email ?"
},
message:{
required :"Please add your comments",
minlength :"Your comments seems a bit short or not ?"
}
}
});
});
</script>
</head>
<body>
<div class="container">
<h1>OnlineStore Contact</h1>
<form id="contactform" method="post" action="<?php echo $_SEVER['PHP_SELF']; ?>" novalidate >
<?php
if($sent==true){
echo "<h2 class='success'>Thanks your message has been sent successfully</h2>";
}elseif($hasError==true){
echo '<ul class="errorlist">';
foreach($errorArray as $key=>$val){// as or ? / ? =>
echo "<li>".ucfirst($key). "field error-$val</li>";
}
echo'</ul>';
}
?>
<input type="text" name="name" value="<?php echo(isset($name)? $name:"");?>" placeholder="Your Name" >
<input type="email" name="email" value="<?php echo(isset($email)? $email:"");?>" placeholder="Your Email" >
<textarea name="message" placeholder="Your Message"><?php echo(isset($message)? $message:"");?> </textarea>
<input type="submit" name="submitform" value="Send">
</form>
</div>
</body>
</html>


------------------CSS CODE BELOW.

*,*:before, *:After{
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

*, html {
margin:0;
padding:0;
outline:none;
}

html{
font-size:62.5%;
}
::-ms-clear{
display: none;

}
::-webkit-search-cancel-button{
-webkit-appearance: none;

}
body{
font-family:Arial, sans-secrif;
font-size:10px;
font-weight:normal;
background-color:#fff;
color:#222;
}
.container{
position:relative;
width:600px;
margin:0 auto;
}
.container:first-of-type{
top :100px;
}
h1{
text-align:center;
font-size:42px;
font-size:4.2rem;
margin-bottom:10px;
color:#ff3300;

}

#contactform{
padding:20px;
border:1px solid #eee;
-webkit-box-shadow:0px 2px 3px #ddd;
-moz-box-shadow: 0px; 2px 3px #ddd;
box-shadow:0px 2px 3px #ddd;
-webkit-border-radius:5px;
border-radius:5px;

}
#contactform imput[type=text],
#contactform imput[type=email],
#contactform imput[type=submit],
#contactform textarea{
width:100%;
display:block;
padding:5px 10px;
border:1px solid #ddd;
margin-bottom:10px;
}

#contactform textarea{
height:300px;
font-family:Arial, san-sefix;
}
#contactform input[type="submit"]{
width:200px;
margin-bottom:;
background-color:#fff;
-webkit-border-radius:2px;
-moz-border-radius: 2px ;
text-transform:uppercase;
cursor:pointer;
-moz-transition: all .3s ease-in-out;
transition:all .3s ease-in-out;
}

#contactform input [type=submit]:hover{
background-color:#ff3300;
color:#fff;
border-color:#dddc00;

}
h2.succcess{
color:#27ae60;
margin-bottom:20px;
}

.errorlist{
list-style:none;
margin-bottom:20px;

}
label.error,
.errorlist li{
margin:bottom:10px;
color:#bb0000;
display:back;
}
.errorlist li:last-child{
margin-bottom:20px;
}

-1 Nikola Novakovic · June 13, 2014
What is the actual error here ?

P.S. I did not test this on my local, just asking
0 Alexander Best · June 13, 2014
Bucky Sorry But can you give a couple of examples? I dont get it .

The problem here is I can not run this code I just dont know that is wrong .

This code I have save , and  I am trying to run on an HTML file to see how it displays .  
  • 1

PHP

106,932 followers
About

Server-side, HTML embedded scripting language used to create dynamic Web pages.

Links
Moderators