I have changed the name attribute to id in the <form> tag.
form method="POST" id="contact_form" action="http://www.thecreativesheep.ca/construction/thank-you.html">
$document.ready(function definition);
specifies a function to execute once the page has loaded. The function definition is
$("#contact_form").submit(function definition);
specifies a function to execute when the form identified by the id of contact_form is submitted. It is submitted when the button of type=submit is clicked. The function definition is
function(e){
$.post('submit.php', $(this).serialize(), callback function definition);
e.preventDefault();
}
The function argument is event object.
.post has three arguments (in this case) url, data, callback function
The url is the php script on the server which will be executed to receive the data and store it.
The data is $(this).serialize() (this) is the form in question, the owner of the event. .serialize() encodes the data from the form as a string for submission.
The callback function definition is the function to be execute on successfully receiving the reply. The function definition is
function(data){
var message;
if(parseInt(data)==-1)
message = "error";
else
{
$("#contact_form").hide('slow');
message = "Thank your for the message";
}
$("#contact_form").before('<p>
' + message + '</p>');
}
The argument of the function is the data returned. If it is -1 then give an error message otherwise hide the contact form and give a thank you message. The message is placed between <p> tags and inserted before the, now hidden, form.