Contact Form + jQuery validationengine
Posted
by
BigMad
on Stack Overflow
See other posts from Stack Overflow
or by BigMad
Published on 2012-12-02T19:12:47Z
Indexed on
2012/12/02
23:04 UTC
Read the original article
Hit count: 488
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)
© Stack Overflow or respective owner
