Simple PHP, jQuery, and AJAX Powered Contact Form

PRE-REQ

Place these in the footer of your page above the closing tag.

• 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

THE CODE

The form is simple HTML with a few input fields, a spam protection field, and a hidden confirmation message triggered via the jQuery Validate plugin AJAX success call.

Name*

Email*

Phone

Message*

Name the small house pet that says "meow"*

Here is some base CSS for the form, you will need to make adjustments to match your sites styling.

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], form textarea {

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, #erro span {

display:block;

position:absolute;

top:0;

width:100%

}

#success span p, #error span p {

margin-top:6em

}

#success span p {

color:#9bd32d;

}

#error span p {

color:#c0392b;

}

The PHP needed is just a basic form mail script. Change mail@yourdomain.com to the email the form should send to, and You have a message sent from your site to whatever subject you would like the email to have. This script will reside on your server as process.php and not get inserted into your page.

<?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);

?>

Using jQuery Validate we can assure that the form is filled out properly before being sent in, and also prevent a bit of spam using a custom function.

jQuery.validator.addMethod('answercheck', function (value, element) {

return this.optional(element) || /^\bcat\b$/.test(value);

}, "type the correct answer -_-");

// validate contact form

$(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();

});

}

});

}

});

});

REFERENCE http://ajtroxell.com/build-a-simple-php-jquery-and-ajax-powered-contact-form/

 /applications/core/interface/file/attachment.php?id=467">PHP_jQuery_and_AJAX_Powered_Contact_Form.zip