I am new to website development and recently I am trying to establish my very own website. I have a single page website where i am trying to incorporate a contact form without refreshing the page and provide a client side validation with PHP server side validation and finally to give a smooth success message when the form is complete.
The problem I am facing right now is the page redirects to contact.php where a white page is shown and then no email is pushed. Please help me where i am making the mistake. Below are the codes which i am using for this website. Please help.
Index.html
<div class="row">
<div class="span9">
<div class="response"></div>
<form id="contact-form" class="contact-form" action="contact.php" autocomplete="off" name=postlink method="post">
<p class="contact-name">
<input id="name" type="text" placeholder="Name" value="" name="name" required />
</p>
<p class="contact-email">
<input id="email" type="email" placeholder="Email Address" value="" name="email" required />
</p>
<p class="contact-phone">
<input id="phone" type="tel" placeholder="Mobile Number" maxlength="10" value="" name="phone" required />
</p>
<p class="contact-lead">
<input id="lead" type="text" placeholder="How did you hear about us" value="" name="lead" required />
</p>
<p class="contact-message">
<textarea id="message" placeholder="Tell Us More About You" name="message" rows="10" cols="40" required ></textarea>
</p>
<p class="contact-submit">
<input id="submit" type="submit" class="submit" href=# onclick="submitPostLink()" value="Send Your Email"></p>
</p>
</form>
</div>
contact.php
<?php
$to = 'info@YYYY.com';
$subject = 'Website Request';
$headers = "From: " . strip_tags($_POST['email']) . "
";
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "
";
$headers .= "MIME-Version: 1.0
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1
";
$message = '<html><body>';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['name']) . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['email']) . "</td></tr>";
$message .= "<tr><td><strong>Mobile Number:</strong> </td><td>" . strip_tags($_POST['phone']) . "</td></tr>";
$message .= "<tr><td><strong>How did you Find Us:</strong> </td><td>" . strip_tags($_POST['lead']) . "</td></tr>";
$message .= "<tr><td><strong>More About:</strong> </td><td>" . $_POST['message'] . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
if($_POST)
{
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$lead = $_POST['lead'];
$message = $_POST['message'];
// Full Name
if (eregi('^[A-Za-z0-9 ]{3,20}$',$name))
{
$valid_name=$name;
}
else
{
$error_name='Please Enter a valid Name.';
}
// Email
if (eregi('^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.([a-zA-Z]{2,4})$', $email))
{
$valid_email=$email;
}
else
{
$error_email='Please Enter your correct Email.';
}
// Phone Number Validation
if (eregi('/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/$',$phone))
{
$valid_phone=$phone;
}
else
{
$error_phone='Please Enter your valid Mobile Number';
}
// Lead
if (eregi('^[A-Za-z0-9 ]{3,20}$',$lead))
{
$valid_lead=$lead;
}
else
{
$error_lead='Please Let us know how you found us';
}
// Gender
if ($message==0)
{
$error_message='Please let us know more';
}
else
{
$valid_message=$message;
}
if((strlen($valid_name)>0)&&(strlen($valid_email)>0)&&(strlen($valid_phone)>0)&&(strlen($valid_lead)>0) && $valid_message>0 )
{
mail($to, $subject, $message, $headers);
echo "Thank You $name for contacting us, we will revert back to you with your request within 12 hours!";
}
else{ }
}
?>
Javascript
<script type="text/javascript">
$('document').ready(function()
{
$('#contact-form').validate(
{
rules:
{
"name":{
required:true,
maxlength:30
},
"email":{
required:true,
email:true,
maxlength:100
},
"phone":{
required:true,
maxlength:10
},
"lead":{
required:true,
},
"message":{
required:true
}},
messages:
{
"name":{
required:"This field is required"
},
"email":{
required:"This field is required",
email:"Please enter a valid email address"
},
"phone":{
required:"This field is required"
},
"lead":{
required:"This field is required"
},
"message":{
required:"This field is required"
}},
submitHandler: function(contact-form){
$(contact-form).ajaxSubmit({
target: '#response',
success: function() {
$('#span9').slideUp('fast');
}
});
}
})
});
</script>
Stylesheet
#contact-form {
margin-bottom: 0;
}
#contact-form p {
margin-bottom: 5px;
}
#contact-form error {
font-weight: bold;
font-size: 1.2em;
color: #9d3131;
}
#contact-form input,
#contact-form textarea {
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: #26292E;
color: #FFFFFF;
font-size: 16px;
height: auto;
padding: 15px;
margin: 0;
outline-style:dotted;
outline-color:#09F;
resize: none;
}
#contact-form input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#contact-form input:focus, #contact-form textarea:focus {
background: #26292E;
box-shadow: 0 0 3px #aaa;
}
#contact-form textarea {
width: 100%;
resize: vertical;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#contact-form .submit {
background: #26292E;
color: #7F8289;
cursor: pointer;
display: inline-block;
font-size: 18px;
font-weight: 500;
padding: 16px 40px;
text-align: center;
vertical-align: middle;
width: auto;
margin-top: 10px;
-webkit-transition: background 0.1s linear 0s, color 0.1s linear 0s;
-moz-transition: background 0.1s linear 0s, color 0.1s linear 0s;
-o-transition: background 0.1s linear 0s, color 0.1s linear 0s;
transition: background 0.1s linear 0s, color 0.1s linear 0s;
}
#contact-form .submit:hover {
background: #09F;
color: #FFFFFF;
}
#response {
margin-top: 10px;
color: #9d3131;
}