18100 sujets

Questions générales et questions de débutants

Formulaire de contact AJAX/HTML5

Bonjour à tous,


Je poste aujourd'hui, travaillant actuellement à la refonte de mon site web. Pour être bref, j'ai suivi ce tuto, après en avoir essayé plusieurs sans succès (lié il semblerait au fait que mon site soit "one-paged"...).
Celui-ci semble donc fonctionner plutôt bien (je reçois correctement les mails), à ceci près : les messages d'informations (succès/échec de l'envoi du mail) n'apparaissent pas, et ce pour une raison que j'ignore. Au-delà de l'importance de ces messages pour le visiteur, il y a aussi le problème de bon fonctionnement général du formulaire...

J'ai eu beau relire mes lignes, il me semble que tout a été correctement repris, d'après le tutoriel d'origine. Je vous appelle donc à l'aide, afin de pouvoir résoudre ce problème, et être sûr que mon formulaire fonctionne correctement, sans non plus de problème de sécurité...

Voici donc le lien de mon site-test. Vous trouverez ci-dessous les pages concernées par le code du formulaire.

Merci d'avance à vous tous ! Smiley smile



header.php
<?php 
error_reporting(E_ALL ^ E_NOTICE); // hide all basic notices from PHP

//If the form is submitted
if(isset($_POST['submitted'])) {
	
	// Vérification du champ 'nom'
	if(trim($_POST['name']) === '') {
		$nameError =  '*'; 
		$hasError = true;
	} else {
		$name = trim($_POST['name']);
	}
	
	// Vérification du champ 'email'
	if(trim($_POST['email']) === '')  {
		$emailError = '*';
		$hasError = true;
	} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
		$emailError = '*';
		$hasError = true;
	} else {
		$email = trim($_POST['email']);
	}
		
	// Vérification du champ 'message'
	if(trim($_POST['message']) === '') {
		$commentError = '*';
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['message']));
		} else {
			$comments = trim($_POST['message']);
		}
	}
		
	// upon no failure errors let's email now!
	if(!isset($hasError)) {
		
		$emailTo = 'soykje@gmail.com';
		$subject = 'Message de '.$name.', depuis  www.soykje.com';
 
		$body = "$comments \n\nExpéditeur : $name ($email)";
		$headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
        
        // set our boolean completion value to TRUE
		$emailSent = true;
	}
}
?>
<!DOCTYPE html><html lang="fr">

<head> 
	<title><?php bloginfo('name') ?><?php if ( is_404() ) : ?><?php _e(', #404 !') ?><?php elseif ( is_home() ) : ?>, graphiste indépendant<?php else : ?><?php wp_title(', ') ?><?php endif ?></title>
    
	<meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="description" content="Soykje, graphiste indépendant..." />
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300|Playfair+Display:400italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 
	<?php wp_head(); ?>
</head>
 
<body onLoad="initialize()">
	<div id="page">


contact.php
<div id="contact-form">
	<p class="presentation"><span class="premiermot">Vous avez une idée,</span> une question, ou simplement envie de dire bonjour ? Dans tous les cas, n’hésitez pas à me laisser un message : c’est avec plaisir que je vous lirais, et vous répondrais.</p><!--fin presentation-->

        <?php if(isset($emailSent) && $emailSent == true) { ?>
                <p class="info">Your email was sent. Huzzah!</p>
        <?php } else { ?>
        	
        <form id="cform" action="contact.php" method="post">
            <div id="col-1">
            <input name="name" type="text" id="name" placeholder="votre nom *" required="required" class="requiredField" value="<?php if(isset($_POST['name'])) echo $_POST['name'];?>"/>
            <?php if($nameError != '') { ?><span class="error"><?php echo $nameError;?></span><?php } ?>
            
            <input name="email" id="email" type="email" required="required" class="requiredField" placeholder="votre adresse email *" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" />
            <?php if($emailError != '') { ?><span class="error"><?php echo $emailError;?></span><?php } ?>
            </div>
            
            <div id="col-2">
            <input name="subject" type="text" id="subject" required="required" class="requiredField" placeholder="le sujet de votre message *" />
            
            <textarea name="message" id="message" required="required" placeholder="votre message *" class="requiredField"><?php if(isset($_POST['message'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['message']); } else { echo $_POST['message']; } } ?></textarea>
            <?php if($commentError != '') { ?><span class="error"><?php echo $commentError;?></span><?php } ?>            
            
            <button name="envoyer" type="envoyer" class="subbutton">envoyer</button>
            <input type="hidden" name="submitted" id="submitted" value="true" />
            </div>

        <div id="postscriptum">
            <p class="ps">PS : Gardez un souvenir, en téléchargeant mon book (<span class="book"><a href="http://www.soykje.com/DEPOT/book2013.pdf" target="_blank" title="Télécharger mon book"><img src="<?php bloginfo('template_url');?>/images/extlink.png" alt="" /></a></span>), ou bien retrouvez-moi sur les réseaux sociaux (<a href="http://www.facebook.com/soykje" target="_blank" title="Soykje sur Facebook"><img src="<?php bloginfo('template_url');?>/images/fb.png" alt="" /></a>, <a href="https://plus.google.com/u/0/110972588813858771410/posts" target="_blank" title="Soykje sur Google+"><img src="<?php bloginfo('template_url');?>/images/g+.png" alt="" /></a>) !</p>
            <p class="nb">* Champs obligatoires</p>
        </div>
        
        </form><!--fin du formulaire de contact-->
        <?php } ?>
</div>


et enfin le script js :
$(document).ready(function(){
//Formulaire de contact
	$('form#cform').submit(function() {
		$('form#cform .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if($.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<span class="error">*</span>');
				$(this).addClass('inputError');
				hasError = true;
			} else if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test($.trim($(this).val()))) {
					var labelText = $(this).prev('label').text();
					$(this).parent().append('<span class="error">*</span>');
					$(this).addClass('inputError');
					hasError = true;
				}
			}
		});
		if(!hasError) {
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				console.log(data);
				/*$('form#cform').slideUp("fast", function() {				   
					$(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>');
				});*/
			});
		}
		
		return false;	
	});
});

Modifié par soykje (11 Mar 2013 - 11:16)
Je vois que plusieurs d'entre vous ont testé le formulaire (je vois les mails tomber Smiley langue ), et je vous remercie d'avance pour votre patience.

Du reste, j'essaie désespérément de voir où ça coince, mais sans succès Smiley decu

Pressé de lire celui ou celle qui pourra me venir en aide !
Salut,

La première chose à faire, à mon avis, c'est de prévoir que des erreurs peuvent survenir, et donc d'y préparer ton code.
Je te conseille de changer ça :
$.post(
    $(this).attr('action'),
    formInput,
    function(data) {
        console.log(data);
    }
);
en ça
$.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: formInput
})
.done(function(data, status, jqXHR){
    // Ici ton code à exécuter si pas d'erreur
    console.log(data);
})
.fail(function(jqXHR, status, errorMsg){
    // Ici ton code à exécuter en cas d'erreur
    console.log(errorMsg);
});
Note: J'utilise $.ajax({type: "POST"}) au lieu de $.post parce que je trouve ça plus clair, mais ça marche aussi bien avec les deux.

Tu verras que la requête échoue sur une erreur 404 ("/testeur/contact.php" introuvable). Bizarre que les mails t'arrivent, donc, mais j'avoue ne pas avoir tout passé en revue.
Sujet clos
Aller à