Contact Form Without Page Refresh ~ Codex Web


<div>
<h2>Contact form</h2>
<div id="contact_form">
<form action="" method="post" id="contact-form">
<fieldset>
<input type="hidden" name="owner_email" id="owner_email" value="firozsomaji@gmail.com" />
<input type="hidden" name="serverProcessorType" id="serverProcessorType" value="php" />
<input type="hidden" name="smtpMailServer" id="smtpMailServer" value="localhost" />
<input type="hidden" name="stripHTML" id="stripHTML" value="true" />
<div class="field">
<input name="name" id="name" type="text" class="text-input" value="Name:" onBlur="if(this.value=='') this.value='Name:'" onFocus="if(this.value =='Name:' ) this.value=''" />
<label class="error" for="name" id="name_error">*This field is required.</label>
<label class="error" for="name" id="name_error2">*This is not a valid name.</label>
</div>
<div class="field">
<input name="email" id="email" type="text" class="text-input" value="E-mail:" onBlur="if(this.value=='') this.value='E-mail:'" onFocus="if(this.value =='E-mail:' ) this.value=''" />
<label class="error" for="email" id="email_error">*This field is required.</label>
<label class="error" for="email" id="email_error2">*This is not a valid email address.</label>
</div>
<div class="field">
<input name="phone" id="phone" type="text" class="text-input" value="Phone:" onBlur="if(this.value=='') this.value='Phone:'" onFocus="if(this.value =='Phone:' ) this.value=''" />
<label class="error" for="phone" id="phone_error">*This field is required.</label>
<label class="error" for="phone" id="phone_error2">*This is not a valid phone number.</label>
</div>
<div class="field1">
<textarea name="message" id="message" class="text-input" onBlur="if(this.value=='') this.value='Message:'" onFocus="if(this.value =='Message:' ) this.value=''" >Message:</textarea>
<label class="error" for="message" id="message_error">*This field is required.</label>
<label class="error" for="message" id="message_error2">*The message is too short.</label>
</div>
<div class="container">
<div class=" fright"><a id="clear" class="button1">reset</a><div class="indent-3"><a id="submit" class="button1">submit</a></div></div>
</div>
</fieldset>
</form>
</div>
</div>


<script type="text/javascript">
$(function(){
$('.error').fadeOut(0);

// reset form and hide all errors
$("a#clear").click(function(){
$('.error').fadeOut(0);
$('form#contact-form').clearForm();
});

// show message error if after editing
// the name field contains improper value
$("input#name").blur(function(){
if(validateInput('name')){
if(!validateName()){
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeIn(250);
}
}else{
$("label#name_error2").fadeOut(0);
}
});

// show message error if after editing
// the email field contains improper value
$("input#email").blur(function(){
if(validateInput('email')){
if(!validateEmail()){
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeIn(250);
}
}else{
$("label#email_error2").fadeOut(0);
}
});

// show message error if after editing
// the phone field contains improper value
$("input#phone").blur(function(){
if(validateInput('phone')){
if(!validatePhone()){
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeIn(250);
}
}else{
$("label#phone_error2").fadeOut(0);
}
});

// show message error if after editing
// the message field contains improper value
$("textarea#message").blur(function(){
if(validateTextArea('message')){
if(!validateMessage()){
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeIn(250);
}
}else{
$("label#message_error2").fadeOut(0);
}
});

$("input#name").keydown(function(){
if(validateInput('name')){
$("label#name_error").fadeOut(0);
}
if(validateName()){
$("label#name_error2").fadeOut(0);
}
});

$("input#email").keydown(function(){
if(validateInput('email')){
$("label#email_error").fadeOut(0);
}
if(validateEmail()){
$("label#email_error2").fadeOut(0);
}
});

$("input#phone").keydown(function(){
if(validateInput('phone')){
$("label#phone_error").fadeOut(0);
}
if(validatePhone()){
$("label#phone_error2").fadeOut(0);
}
});

$("textarea#message").keydown(function(){
if(validateTextArea('message')){
$("label#message_error").fadeOut(0);
}
if(validateMessage()){
$("label#message_error2").fadeOut(0);
}
});

var owner_email = $("input#owner_email").val();
if(!isValidEmailAddress(owner_email)){
$('#contact_form').html("<label class='error'>*Owner email is not valid</label>")
}

$("a#submit").click(function(){
// validate and process form
var quit = false;
if(validateName()){
name = validateName();
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeOut(0);
}else if(validateInput('name')){
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeIn(250);
quit = true;
}else{
$("label#name_error").fadeIn(250);
$("label#name_error2").fadeOut(0);
quit = true;
}
if(validateEmail()){
email = validateEmail();
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeOut(0);
}else if(validateInput('email')){
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeIn(250);
quit = true;
}else{
$("label#email_error").fadeIn(250);
$("label#email_error2").fadeOut(0);
quit = true;
}
if(validatePhone()){
phone = validatePhone();
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeOut(0);
}else if(validateInput('phone')){
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeIn(250);
quit = true;
}else{
$("label#phone_error").fadeIn(250);
$("label#phone_error2").fadeOut(0);
quit = true;
}
if(validateMessage()){
message = validateMessage();
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeOut(0);
}else if(validateTextArea('message')){
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeIn(250);
quit = true;
}else{
$("label#message_error").fadeIn(250);
$("label#message_error2").fadeOut(0);
quit = true;
}
if(quit){
return false;
}

var stripHTML = $("input#stripHTML").val();
var smtpMailServer = $("input#smtpMailServer").val();

var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&message=' + message + '&owner_email=' + owner_email + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;

var serverProcessorType = $("input#serverProcessorType").val();
if(serverProcessorType == 'asp'){
fileExtension = 'ashx';
}else{
fileExtension = serverProcessorType;
}
var mailHandlerURL = "bin/MailHandler." + fileExtension;
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function(){
$('.error').fadeOut(0);
$('form#contact-form').clearForm();
$('#contact_form').html("<div>Contact form submitted!</div>").append("<br><label for='message'><strong>We will be in touch soon.</strong></label>").fadeOut(0).fadeIn(1500, function(){
$('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button1'>back</a>");
});
}
});
return false;
});
});
$.fn.clearForm = function(){
return this.each(function(){
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form'){
return $(':input',this).clearForm();
}
if (type == 'text' || type == 'password' || tag == 'textarea'){
this.value = '';
}else if (type == 'checkbox' || type == 'radio'){
this.checked = false;
}else if (tag == 'select'){
this.selectedIndex = -1;
}
});
};
function isValidName(name){
var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);

return pattern.test(name);
}
function isValidEmailAddress(emailAddress){
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

return pattern.test(emailAddress);
}

function isValidPhoneNumber(phoneNumber){
var pattern = new RegExp(/^\+?(\d[\d\-\+ ]{5,}\d$)/);

return pattern.test(phoneNumber);
}

function validateName(){
var name = $("input#name").val();
if(isValidName(name)){
return name;
}else{
return false;
}
}

function validateEmail(){
var email = $("input#email").val();
if(!isValidEmailAddress(email)){
return false;
}else{
return email;
}
}

function validatePhone(){
var phone = $("input#phone").val();
if(!isValidPhoneNumber(phone)){
return false;
}else{
return phone;
}
}

function validateMessage(){
var message = $("textarea#message").val();
if(message.length <= 19){
return false;
}else{
return message;
}
}

// make sure visitor does not input a blank field
function validateInput(field){
var fieldObject = $("input#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}

function validateTextArea(field){
var fieldObject = $("textarea#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}
</script>


<?php
$to = "email@example.com";
$subject = "Online services request from" ." ". $_POST['name'];
$message = $_POST['message'] ."\n". "Name:" ." ". $_POST['name'] ."\n". "Phone Number:" ." ". $_POST['phone'];
$from = $_POST['email'];

mail($to, $subject, $message, "From: $from");
?>

Codex Web

Web Developer Resources

Contact Form Without Page Refresh

WordPress

PHP

Popular Posts