Last active
August 29, 2015 14:20
-
-
Save teckx5/553d68ac7a8969754ed2 to your computer and use it in GitHub Desktop.
This file contains 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
Based on the work by @ajtroxell, as seen in this article | |
http://ajtroxell.com/build-a-simple-php-jquery-and-ajax-powered-contact-form/ | |
External required files: | |
jQuery | |
http://code.jquery.com/jquery-latest.min.js | |
jQuery Form Plugin | |
//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js | |
jQuery Validate | |
//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js |
This file contains 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
<form id="contact" name="contact" method="post"> | |
<fieldset> | |
<label for="name" id="name">Name<span class="required">*</span></label> | |
<input type="text" name="name" id="name" size="30" value="" placeholder="Name" required/> | |
<label for="email" id="email">Email<span class="required">*</span></label> | |
<input type="text" name="email" id="email" size="30" value="" placeholder="your@email" required/> | |
<label for="phone" id="phone">Phone</label> | |
<input type="text" name="phone" id="phone" size="30" value="" placeholder="Phone" /> | |
<label for="Message" id="message">Message<span class="required" placeholder="Message">*</span></label> | |
<textarea name="message" id="message" required></textarea> | |
<label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label> | |
<input type="text" name="captcha" value="" required/> | |
<input id="submit" type="submit" name="submit" value="Send" /> | |
</fieldset> | |
</form> | |
<div id="success"> | |
<span>Your message was sent successfully! I will be in touch as soon as I can</span> | |
</div> | |
<div id="error"> | |
<span>Something went wrong, try refreshing and submitting the form again</span> | |
</div> |
This file contains 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
<?php | |
$to = "mail@yourdomain.com"; | |
$from = $_REQUEST['email']; | |
$name = $_REQUEST['name']; | |
$headers = "From: $from"; | |
$subject = "You have a message sent from your site"; | |
$fields = array(); | |
$fields{"name"} = "name"; | |
$fields{"email"} = "email"; | |
$fields{"phone"} = "phone"; | |
$fields{"message"} = "message"; | |
$body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); } | |
$send = mail($to, $subject, $body, $headers); | |
?> |
This file contains 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
form { | |
margin:0; | |
} | |
form label { | |
margin-bottom:.2em; | |
font-size:1.3rem; | |
line-height:1.3rem; | |
font-size:13px; | |
line-height:13px; | |
color:#e6e6e1; | |
text-shadow:0px -1px #202020; | |
} | |
form label.error { | |
margin-bottom:1em; | |
font-size:1.2rem; | |
line-height:1.2rem; | |
font-size:12px; | |
line-height:12px; | |
color:#c0392b; | |
} | |
form input[type="text"], form textarea { | |
margin-bottom:1.25em; | |
font-family:"Inconsolata", sans-serif; | |
font-size:1.4rem; | |
line-height:1.4rem; | |
font-size:14px; | |
line-height:14px; | |
box-shadow:none; | |
-moz-box-shadow:none; | |
-webkit-box-shadow:none; | |
background:#e6e6e6; | |
border:1px solid #191919; | |
-moz-border-radius:0.2em; | |
-webkit-border-radius:0.2em; | |
border-radius:0.2em; | |
} | |
form input[type="text"]:focus, form textarea:focus { | |
border-color:#191919; | |
box-shadow:none; | |
-moz-box-shadow:none; | |
-webkit-box-shadow:none; | |
} | |
form input[type="text"][disabled], form textarea[disabled] { | |
background:#fff | |
} | |
form input[type="text"].error, form textarea.error { | |
background:#e6e6e6; | |
border-color:#c0392b; | |
} | |
fieldset { | |
border:0px; | |
margin:0; | |
padding:0 | |
} | |
.required { | |
color:#e9266d; | |
} | |
#success, #error { | |
display:none; | |
} | |
#success span, #error span { | |
display:block; | |
position:absolute; | |
top:0; | |
width:100%; | |
} | |
#success span, #error span { | |
margin:6em 0; | |
padding:10px; | |
color:#ffffff; | |
} | |
#success span { | |
background:#9bd32d; | |
} | |
#error span { | |
background:#c0392b; | |
} |
This file contains 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
jQuery.validator.addMethod('answercheck', function (value, element) { | |
return this.optional(element) || /^\bcat\b$/.test(value); | |
}, "type the correct answer -_-"); | |
// validate contact details and message | |
$(function() { | |
$('#contact').validate({ | |
rules: { | |
name: { | |
required: true, | |
minlength: 2 | |
}, | |
email: { | |
required: true, | |
email: true | |
}, | |
message: { | |
required: true | |
}, | |
answer: { | |
required: true, | |
answercheck: true | |
} | |
}, | |
messages: { | |
name: { | |
required: "come on, you have a name don't you?", | |
minlength: "your name must consist of at least 2 characters" | |
}, | |
email: { | |
required: "no email, no message" | |
}, | |
message: { | |
required: "um...yea, you have to write something to send this form.", | |
minlength: "thats all? really?" | |
}, | |
answer: { | |
required: "sorry, wrong answer!" | |
} | |
}, | |
submitHandler: function(form) { | |
$(form).ajaxSubmit({ | |
type:"POST", | |
data: $(form).serialize(), | |
url:"process.php", | |
success: function() { | |
$('#contact :input').attr('disabled', 'disabled'); | |
$('#contact').fadeTo( "slow", 0.15, function() { | |
$(this).find(':input').attr('disabled', 'disabled'); | |
$(this).find('label').css('cursor','default'); | |
$('#success').fadeIn(); | |
}); | |
}, | |
error: function() { | |
$('#contact').fadeTo( "slow", 0.15, function() { | |
$('#error').fadeIn(); | |
}); | |
} | |
}); | |
} | |
}); | |
}); | |
// Validate the capthca question | |
jQuery.validator.addMethod('answercheck', function (value, element) { | |
return this.optional(element) || /^\bcat\b$/.test(value); | |
}, "type the correct answer -_-"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment