Created
April 22, 2013 05:11
-
-
Save psdtohtml5/5432566 to your computer and use it in GitHub Desktop.
HTML : Basic Form Structure
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Basic HTML Form | |
<form id="contact-form" class="span7 cf" action="" method="post"> | |
<div id="status"> | |
</div> | |
<legend>Leave us a message</legend> | |
<span class="col3 first"> | |
<input type="text" id="name" name="name" placeholder="Name"> | |
</span> | |
<span class="col3"> | |
<input type="text" id="email" name="email" placeholder="E-mail"> | |
</span> | |
<span class="col3 last"> | |
<input type="text" id="subject" name="subject" placeholder="Subject"> | |
</span> | |
<span class="span12"> | |
<textarea id="message" name="message" placeholder="Message"></textarea> | |
</span> | |
<div id="form-submmit"> | |
<input type="submit" name="submit" class="red-button bebas" value="SEND MESSAGE"> | |
</div> | |
</form> | |
<script> | |
//JQuery For Contact Form | |
//Function for E-Mail Validation | |
function isValidEmail(email) { | |
return ( /(.+)@(.+){2,}\.(.+){2,}/.test(email) ); | |
} | |
$("#contact-form").submit(function(e) { | |
e.preventDefault(); | |
//Contact Form Value Getting by the ID | |
var name = $("#name").val(), | |
email = $("#email").val(), | |
subject = $("#subject").val(), | |
message = $("#message").val(); | |
if(name == "" || email == "" || subject == "" || message == "") { | |
$("#status").html("All fields are required"); | |
return false; | |
} | |
if(!isValidEmail(email)) { | |
$("#status").html("Enter a valid email adddress"); | |
return false; | |
} | |
// Contact Form Ajax | |
$.ajax({ | |
type: "POST", //Define Method of Form | |
url: "contact.php",//Define Action of Form | |
data: { //Contact Form Data to be send | |
submit: true, | |
name: name, | |
email: email, | |
subject: subject, | |
message: message | |
}, | |
beforeSend: function ( xhr ) { | |
$("#status").show().html("<img src='images/preloader.gif' width='32' height='32' alt='sending email...'>"); | |
} | |
}).done(function( response ) { //After Finish capture the Responce | |
$("#status").html(response); //Show the Captured Responce into the Div having ID status | |
}); | |
}); | |
</script> | |
<?php | |
if(isset($_POST["submit"])) | |
{ | |
/* | |
********************************** | |
* Change Email address below to * | |
* the one where you want to * | |
* receive the enquiries * | |
********************************** | |
*/ | |
$to = "[email protected]"; | |
/* | |
********************************** | |
* DO NOT change anything below * | |
********************************** | |
*/ | |
if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['subject']) && isset($_POST['message'])) | |
{ | |
$name = $_POST['name']; | |
$email = $_POST['email']; | |
$subject = $_POST['subject']; | |
$message = $_POST['message']; | |
$headers = 'From: '. $name . '<' .$email . '>' . "\r\n" . | |
'Reply-To: '. $email . "\r\n" . | |
'X-Mailer: PHP/' . phpversion(); | |
if(mail($to, $subject, $message, $headers)) | |
{ | |
echo "Your message has been sent successfully."; | |
} | |
else | |
{ | |
echo "There was a problem sending your message. Please try again."; | |
} | |
}else | |
{ | |
echo "All fields are requied."; | |
} | |
}else | |
{ | |
echo "Form was not submitted!"; | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment