So i downloaded a html template, and i cant get the contact form to work..
So here is the contact form:
<form id="contact" action="contact.php" method="get" />
<div class="row-fluid">
<p class="span12">
<label for="name" class="second-color">
Nome</label>
<input type="text" id="name" name="name" class="required second-color span12" maxlength="25" />
</p>
</div>
<div class="row-fluid">
<p class="span12">
<label for="email" class="second-color">
E-mail</label>
<input type="text" id="email" name="email" class="required second-color email span12" maxlength="25" />
</p>
</div>
<div class="row-fluid">
<p class="span12 multi">
<label for="comment" class="second-color">
Mensagem</label>
<textarea id="comment" name="comment" class="required second-color span12"></textarea>
</p>
</div>
<a href="javascript:;" class="btn medium color1 hidden-tablet hidden-phone">ENVIAR MENSAGEM</a>
<a href="javascript:;" class="btn small color1 visible-tablet visible-phone">ENVIAR MENSAGEM</a>
<div id="loadingForm">
<img src="assets/images/loading.gif" alt="loading" />
</div>
</form>
And on the javascript file, i have this piece of code that is related to the form:
/*post operation for contact page*/
$("#contact a").click(function () {
$('#contact #loadingForm').fadeIn('slow');
/*function which validates input with required class in contact page */
var myform = $("#contact").validate({
email: true,
errorPlacement: function (error, element) {
error.appendTo();
}
}).form();
/*myform returns true if form is valid.*/
if (myform) {
var action = $("#contact").attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
web: $('#web').val(),
message: $('#message').val()
},
function (data) {
d = data;
$('.response').remove();
if (data == 'Message sent!') {
$('#contact a').attr('disabled', '');
$('#contact').append('<span class="success"></p>');
}
else {
$('#contact').append('<span class="response"></span>');
}
});
}
$('#contact #loadingForm').fadeOut('slow');
return false;
});
So now, what do i need to do for the contact work? The template is on ajax, so the form cant reload the page, because if the page is reloaded, the background music will stop.
I have to create the file contact.php, but, if i do that, the page will reloaded when i click on the button, right?
Can anyone help me with this?
Your page won't reload if you call it like you do with Ajax. Just make sure the form doesn't submit.
I would add:
$("#contact a").click(function (event) {
event.preventDefault();
To make sure your page won't reload on click.
Then in the PHP side you can use something like this:
<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name
Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email
";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Message sent!";
?>