Tuto "Formulaire de contact avancé" help!
Bonjour.
D'abord je tiens à remercier Grafikart pour ce tuto qui m'a semblé clair de bout en bout (et pour me rendre les choses claires, c'était pas gagné! ^^).
Mais j'ai quelque question car j'aimerais aller plus loin.
J'aimerais sortir le code php + js de la page pour la faire devenir html et faire intervenir le code que quand j'en ai besoin.
J'explique: pas de soucis pour sortir le code js vers une page .js et la faire intervenir par une simple <script> sur la page.
Je peux aussi sortir une grosse partie du code php en crèant une page php validation.php et en faisant un include sur la page.
Mais moi ce que j'aimerais c'est faire sortir tout le code php pour rendre ma page html. Et que par l'appel du <script> de la page .js, il fasse quand même les vérification php contenue dans la page validation.php.
Comment puis je le faire, Avez vous des pistes?
Je suppose que je dois partir du .js et demander à celui-ci de faire valider par le php... mais comme j'ai une niv moyen, cela m'est très difficile d'imaginer le chemin à prendre.
Si vous pouviez m'aider svp, cela serait super.
Merci
10 réponses
Salut !
J'ai compris ta demande mais je n'en comprends pas trop l'intérêt.
Si tu ne veux aucun traitement php dans ta page, tu peux passer par de l'ajax, c'est à dire appeler ton script de traitement php via le javascript.
Merci pour la réponse.
C'est exactement ce que j'aimerais faire. Mais je ne sais pas comment le faire lol.
En fait on m'a dit d'utiliser json... mais moi déjà si je pouvais garder le code déjà fait et appeler comme tu dis le script php par js ça m'irait... comment on fait?
<?php
if(!empty($_POST)){
extract($_POST);
$valid = true;
if($adresse != ""){
}
else{
if(empty($nom)){
$valid=false;
$erreurnom="Erreur nom";
}
if(!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i",$email)){
$valid=false;
$erreuremail = "Votre email n'est pas valide";
}
if(empty($email)){
$valid=false;
$erreuremail="Erreur email";
}
if(empty($message)){
$valid=false;
$erreurmessage="Erreur message";
}
if($valid){
$to = "ssdsde@yahoo.fr";
$sujet = $nom." a contacté le site";
$header = "From: $nom <$email> \n";
/*
*A la place
*$header = "From: lalala@mondomaine.de \n";
*$header .= "Reply-To: $email";
*contre le spam auto
*/
$message = stripslashes($message);
$nom = stripslashes($nom);
if(mail($to,$sujet,$message,$header)){
$erreur = "Votre email nous est bien parvenu";
unset($nom);
unset($email);
unset($message);
}
else{
$erreur = "Une erreur est survenue. Mail bloqué";
}
}
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#adresse").hide();
$("#envoyer").click(function(){
valid=true;
if($("#nom").val()==""){
$("#nom").css("border-color", "#FF0000");
$("#nom").next(".error-message").text("Veuillez entrer un nom");
valid=false;
}
else{
$("#nom").css("border-color", "#00FF00");
$("#nom").next(".error-message").text("");
}
if($("#email").val()==""){
$("#email").css("border-color", "#FF0000");
$("#email").next(".error-message").text("Veuillez entrer un email");
valid=false;
}
else{
if(!$("#email").val().match(/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i)){
$("#email").css("border-color", "#FF0000");
$("#email").next(".error-message").text("email non valide");
valid=false;
}
else{
$("#email").css("border-color", "#00FF00");
$("#email").next(".error-message").text("");
}
}
if($("#message").val()==""){
$("#message").css("border-color", "#FF0000");
$("#message").next(".error-message").text("Veuillez mettre un message");
valid=false;
}
else{
$("#message").css("border-color", "#00FF00");
$("#message").next(".error-message").text("");
}
return valid;
});
});
</script>
<link href="css/style01.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Contact</h1>
<h2>Contactez-nous!</h2>
<hr />
<?php
if(isset($erreur)){ echo "<p>$erreur</p>"; }
?>
<form method="post" action="index.php">
<label for="nom">Nom:</label><br />
<input type="text" name="nom" id="nom" value="<?php if(isset($nom)) echo $nom; ?>" />
<span class="error-message"><?php if (isset($erreurnom)) echo $erreurnom; ?></span><br />
<input type="text" name="adresse" id="adresse" />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" value="<?php if(isset($email)) echo $email; ?>" />
<span class="error-message"><?php if (isset($erreuremail)) echo $erreuremail; ?></span><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message" /><?php if(isset($message)) echo $message; ?></textarea>
<span class="error-message"><?php if (isset($erreurmessage)) echo $erreurmessage; ?></span><br />
<input type="submit" value="envoyez" id="envoyer" />
</form>
</body>
</html>Donc de 57 à 100 c'est mis dans un fichier .js.
Et de 1 à 49 dans un fichier .php
Les différents: "<?php if (isset($erreurnom)) echo $erreurnom; ?>" je les ai enlever ainsi que les value...
Mais bon à partir d'ici ça fonctionne plus.
Bon j'ai travaillé sur le formulaire (beaucoup)
J'arrive à ça coté php:
<?php
$n = array();
if (!empty($_POST))
{
extract($_POST);
$valid = true;
if (empty($nom))
{
$valid = false;
$erreur = 'Erreur nom';
$n'erreurnom'] = true;
}
if (empty($email))
{
$valid = false;
$erreur = 'Erreur email';
$n'emailinvalide'] = false;
$n'erreuremail'] = true;
}
elseif (!preg_match('/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i', $email))
{
$valid = false;
$erreur = 'Votre email n\'est pas valide';
$n'erreuremail'] = false;
$n'emailinvalide'] = true;
}
if (empty($message))
{
$valid = false;
$erreur = 'Erreur message';
$n'erreurmessage'] = true;
}
}
else
{
$valid = false;
}
$n'valide'] = $valid;
echo json_encode($n);
if ($valid = true)
{
$to = 'lalala@monmail.fr<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>';
$sujet = $nom . ' a contacté le site';
$header = 'From: $nom <$email> \n';
$message = stripslashes($message);
$nom = stripslashes($nom);
if (mail($to, $sujet, $message, $header))
{
$erreur = 'Votre email nous est bien parvenu';
}
else
{
$erreur = 'Une erreur est survenue. Mail bloqué';
}
echo $erreur;
}
?>et une parse error qui fait tout foirer niveau "(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName...."
qqn peut il m'aider?
Essaye:
<?php
$n = array();
if (!empty($_POST)) {
extract($_POST);
$valid = true;
if (empty($nom)) {
$valid = false;
$erreur = 'Erreur nom';
$n'erreurnom'] = true;
}
if (empty($email)) {
$valid = false;
$erreur = 'Erreur email';
$n'emailinvalide'] = false;
$n'erreuremail'] = true;
} elseif (!preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $email)) {
$valid = false;
$erreur = 'Votre email n\'est pas valide';
$n'erreuremail'] = false;
$n'emailinvalide'] = true;
} if (empty($message)) {
$valid = false;
$erreur = 'Erreur message';
$n'erreurmessage'] = true;
}
} else {
$valid = false;
}
$n'valide'] = $valid;
echo json_encode($n);
if ($valid = true) {
$to = 'lalala@monmail.fr
<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute(\'data-cfemail\');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>';
$sujet = $nom . ' a contacté le site';
$header = 'From: $nom <$email> \n';
$message = stripslashes($message);
$nom = stripslashes($nom);
if (mail($to, $sujet, $message, $header)) {
$erreur = 'Votre email nous est bien parvenu';
} else {
$erreur = 'Une erreur est survenue. Mail bloqué';
}
echo $erreur;
}
?>la ligne modifié :
('data-cfemail') j'ai ajouté des Backslash ()
!preg_match('/^[a-z0-9-_.]+@[a-z0-9-_.]+.[a-z]{2,3}$/i', $email) par !preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$#", $email)
Ca fontionne mais à ce moment là, il n'envoie plus rien.
On m'a dit sur plusieurs autres forums de laisser tomber cette ligne...
Bah je te direz d'enlever la vérification d'email et passé par Jquery ^^ si tu veux : http://etienner.fr/billet.php?id=9
Merci! c'est en fait ce que j'ai fait avec json.
Par contre, je voulais un truc fonctionnel sous php si le js est désactivé... je cherche ^^
EDIT: il est tard, je suis fatigué: le tien est nickel!
Merci beaucoup...!
EDIT02: j'avais un parse error sur ton code:
$headers .= "Content-Type: text/plain; charset="ISO-8859-1"; DelSp="Yes"; format=flowed rn";
j'ai mis ça plus d'error parse.
$headers .= 'Content-Type: text/plain; charset="ISO-8859-1"; DelSp="Yes"; format=flowed rn';
Bon je montre le mien:
le formulaire
<div id="hide" class="nojs">
<form id="monForm" action="inc/validation.php" method="post">
<label for="nom">nom</label>
<input type="text" id="nom" name="nom" />
<div id="errornom"></div>
<label for="spam" class="spam">What is two plus two?</label>
<input name="spam" type="text" size="4" id="spam">
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<div id="erroremail"></div>
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
<div id="errormessage"></div>
<div id="success"></div>
<input type="submit" id="envoyer" value="Envoyer" />
</form>
</div>Le javascript (jquerry-ajax etc)
$(document).ready(function() {
var $form = $('#monForm');
$('#envoyer').on('click', function() {
$form.trigger('submit');
return false;
});
$form.on('submit', function() {
var nom = $('#nom').val();
var email = $('#email').val();
var message = $('#message').val();
var spam =$('#spam').val();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
dataType: 'json',
success: function(json) {
if(json.valide == false){
if (json.errorspam == true){
$('#success').html("Test spam failed");
$('#errormessage').html("");
$('#erroremail').html("");
$('#errornom').html("");
}
if (json.erreurnom == true){
$('#errornom').html("erreur nom");
$('#nom').css({"background-color": "yellow"});
$('#success').html("");
}else{
$('#errornom').html("");
}
if (json.erreuremail == true){
$('#erroremail').html("erreur email");
$('#success').html("");
}else{
$('#erroremail').html("");
}
if (json.emailinvalide == true){
$('#erroremail').html("email invalide");
$('#success').html("");
}else if(json.erreuremail == true){
$('#erroremail').html("erreur email");
$('#success').html("");
}else{
$('#erroremail').html("");
}
if (json.erreurmessage == true){
$('#errormessage').html("erreur message");
$('#success').html("");
}else{
$('#errormessage').html("");
}
}else{
$('#success').html("succes!");
$('#errormessage').html("");
$('#erroremail').html("");
$('#errornom').html("");
}
}
});
return false;
});
});Mon code php:
<?php
$n = array();
if (!empty($_POST))
{
$nom = $_POST'nom'];
$email = $_POST'email'];
$message = $_POST'message'];
$spam = $_POST'spam'];
$valid = true;
if (!empty($spam) && !($spam == '4' || $spam == 'four'))
{
$valid = false;
$erreur = 'erreur spam';
$n'errorspam'] = true;
$n'valide'] = $valid;
echo json_encode($n);
exit();
}
if (empty($nom))
{
$valid = false;
$erreur = 'Erreur nom';
$n'erreurnom'] = true;
}
if (empty($email))
{
$valid = false;
$erreur = 'Erreur email';
$n'emailinvalide'] = false;
$n'erreuremail'] = true;
}
elseif (!preg_match('/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i', $email))
{
$valid = false;
$erreur = 'Votre email n\'est pas valide';
$n'erreuremail'] = false;
$n'emailinvalide'] = true;
}
if (empty($message))
{
$valid = false;
$erreur = 'Erreur message';
$n'erreurmessage'] = true;
}
}
else
{
$valid = false;
}
$n'valide'] = $valid;
echo json_encode($n);
/*if ($valid = true)
{
$to = 'lalal@monmail.fr';
$sujet = $nom . ' a contacté le site';
$header = 'From:'.$nom.'<'.$email.'> \n';
$message = stripslashes($message);
$nom = stripslashes($nom);
if (mail($to, $sujet, $message, $header))
{
$erreur = 'Votre email nous est bien parvenu';
$n'erreurphp1'] = true;
unset($nom);
unset($email);
unset($message);
unset($adresse);
}
else
{
$erreur = 'Une erreur est survenue. Mail bloqué';
$n'erreurphp2'] = true;
}
}*/
?>Bon ça fonctionne...
Maintenant je cherche un moyen à rendre mon formulaire toujours effectif si js est désactivé...
Un idée?
Si vous voyez d'autres choses à améliorer (en restant simple car je suis débutant), n'hésitez pas. Sachez que c'est déjà fonctionnel comme ça.
Je devrais peut-être mettre de l'encodage utf8 qqpart(pour l'envoie du message)?
!!! le champ spam est un honeypot!!! non visible!