I created this contact form, inserting jQuery fadeLabel and validationEngine to beautify
the form
the file index.php / .html (I have not yet figured out which of
the two versions put it)
scripts are
index:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/js/backtop.js"></script>
<script src="/js/fadeLabel.js"></script>
<script>
$(document).ready(function () {
$('form .fadeLabel').fadeLabel();
});
</script>
<script src="/js/validationEngine-it.js"></script>
<script src="/js/validationEngine.js"></script>
<script>
$(document).ready(function(){
$("#form_box").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "contact.php",
ajaxSubmitMessage: "Thank you, We will contact you soon !",
success : false,
failure : function() {}
})
});
</script>
<script src="/js/contactform.js"></script>
however this is
the part of
the form's code
<p id="form_success" class="success hide"><strong>Grazie!</strong> Il tuo messaggio è stato inviato con successo.</p>
<form id="form_box">
<fieldset>
<p><label for="name">Nome*</label><input type="text" id="name" name="name" class="validate[required] fadeLabel" value=""/></p>
<p><label for="email">E-mail*</label><input type="email" id="email" name="email" class="validate[required,custom[email]] fadeLabel" value=""/></p>
<p><label for="website">Sito web</label><input type="url" id="website" name="website" class="fadeLabel" value=""/></p>
<p><label for="message">Messaggio*</label><textarea id="message" name="message" class="validate[required] fadeLabel" cols="30" rows="10" value=""></textarea></p>
</fieldset>
<p id="form_submit" class="submit"><button class="send">Invia</button> *Campi obbligatori</p>
<p id="form_send" class="send hide">Invio in corso…</p>
<p id="form_error" class="submit error hide"><button class="send">Invia</button> Si prega di correggere l'errore e re-inviarlo.</p>
</form>
This is
the contact.php where it receives
the data and sends 2 emails (one for me with
the data and a thank you to those who contacted me)
contact.php:
<?php
//include variables
$my_email = "
[email protected]";
$my_site = "adrianogenovese.com";
session_start();
$name = $_POST['name'];
$email = $_POST['email'];
$website = $_POST['website'];
$message = $_POST['message'];
$ip = $_SERVER['REMOTE_ADDR'];
//beginning to email me
$to = $my_email;
$sbj = "Richiesta Informazioni - $my_site";
$msg = "
<html>
...
//the body of
the email to me
...
</html>
";
$from = $email;
$headers = 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n";
$headers .= "From: $from";
mail($to,$sbj,$msg,$headers); //email sent to me
//beginning of
the email recipient
$toClient = $email;
$msgClient = "
<html>
...
//the body of
the email recipient
...
</html>
";
$fromClient = $my_email;
$sbjClient = "Grazie $name per aver contattato $my_site ";
$headersClient = 'MIME-Version: 1.0' . "\r\n";
$headersClient .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headersClient .= "From: $fromClient";
mail($toClient,$sbjClient,$msgClient,$headersClient); //mail inviata al cliente
//order confirmation email
//Reset error
session_destroy();
exit;
?>
this is
the contact form jscript
contactform.js:
$(document).ready(function() {
$(".send").click(function(){
$("#form_send").removeClass('hide');
$("#form_submit").addClass('hide');
$("#form_error").addClass('hide');
var name = $("#name").val();
var email = $("#email").val();
var website = $("#website").val();
var message = $("#message").val();
if (name == "" || email == "" ) {
$("#form_send").addClass('hide');
$("#form_error").removeClass('hide');
}
else {
$.ajax({
type: "POST",
url: "contatti/contact.php",
data: "name=" + name + "&email=" + email + "&message=" + message + "&website=" + website,
dataType: "html",
success: function(msg) {
$("#form_send").addClass('hide').delay(3000).fadeOut(3000);
$("#form_success").removeClass('hide');
$("#form_box").addClass('hide').slideUp(2000).fadeOut();
},
error: function() {
alert("An unexpected error occurred...");
}
});
}
}); //end form
});//end Dom
The jQuery seem to work very well, I wanted to make sure that
the page is not of
the form updated or go to another page (the only thing that works for now)
compensation reflected in
the following problems:
I always leave
the alert of contactform.js
Does not send any mail, it to me to recipient
I can not do
the work properly. delay () .fadeOut / fadeIn and. SlideUp (). FadeOut ()
so that
the sending of this email appears for 3 seconds "$ (" # form_send "). addClass ('hide')" before you do anything else then
the form disappears up using some second type slideUp "$ (" # form_box "). addClass ('hide')" by displaying just
the "$ (" # form_success "). removeClass ('hide')"
in
the address bar also appears
the form data (e.g. ../index.php?name=test&email=example%40mail.com&website=&message=helloworld)
