[jQuery] [Wordpress] Envoi d'un mail dynamique

Bonjour à tous

depuis 2 semaines je me suis décidé à faire mon propre theme avec mes propres mains pour mon propre site sous Wordpress.
Je souhaite par dessus tout éviter les plugins. C'est ce qui me permet d'alléger mon thème essentiellement. Donc je planche depuis 2-3 jours (je sais pas si les nuits ça compte) sur une modal box en jQuery qui affiche un formulaire et ensuite affiche un petit message annonçant que le mail est envoyé.
Cette box à pour but de ne pas perdre le visiteur dans des pages que je considère inutile.

voila où j'en suis :
Ma fonction d'envoi de mail :

Functions.php

function envoi_mail(){
  if($_POST[envoye]){
	$erreur = "";
	if(!trim($_POST[nom])){
		$erreur = true
		$erreur_nom .= "<p>Veuillez préciser votre nom</p>";
	}else {
		$nom = trim($_POST['contactName']);
	}
	if(!trim($_POST[prenom])){
		$erreur = true
		$erreur_prenom .= "<p>Veuillez préciser votre prénom</p>";
	}else {
		$prenom = trim($_POST['contactName']);
	}
	if(!filter_var(trim($_POST[mail]),FILTER_VALIDATE_EMAIL)){
		$erreur = true
		$erreur_mail .= "<p>Votre adresse n'est pas valide</p>";
	}else {
		$mail = trim($_POST['contactName']);
	}
	if(!trim($_POST[sujet])){
		$erreur = true
		$erreur_sujet .= "<p>Veuillez indiquer un sujet</p>";
	} else {
		$sujet = trim($_POST['contactName']);
	}                       
	if(!trim($_POST[message])){
		$erreur = true
		$erreur_message .= "<p>Laissez nous un message tout de même !</p>";
	}else {
		$message = trim($_POST['contactName']);
	}
	if(!$erreur){
		$email = mail(get_option("admin_email"),trim($_POST[your_name])." Vous à envoyé un message :".$_POST[sujet],stripslashes(trim($_POST[message])),"From: ".trim($_POST[prenom])." ".trim($_POST[nom])." <".trim($_POST[mail]).">\r\nReply-To:".trim($_POST[mail]));
		$email_ok = true;
		}
    }
}

L'extrait de mon header.php

<div id="contact_popup">
<a href="#" id="ferme_popup_contact">X</a>
	<?php if(isset($email_ok) && $email_ok == true) { ?>
			<p><strong>Votre message à été envoyé ! Notre réponse ne saura tarder...</strong></p>
	<?php } else{
        	if($erreur == true) { ?>
			<p><strong>Votre message n'a pu être envoyé</strong><p>
			<?php echo $erreur;
			}?>
	<form action="<?php the_permalink(); ?>" id="form_contact" method="POST">
		<label for="nom">Nom : </label><input type="text" name="nom" value="<?php if(isset($_POST['nom'])) { echo $_POST['nom']; } ?>" class="obligatoire"/><br/>
  		<?php if(isset($erreur_nom != '')) { ?>
		<p class="erreur"><?php echo $erreur_nom; ?></p>
 		<?php } ?>
		<label for="prenom">Prénom : </label><input type="text" name="prenom" value="<?php if(isset($_POST['prenom'])) { echo $_POST['prenom']; } ?>" class="obligatoire"/><br/>
		<?php if(isset($erreur_prenom != '')) { ?>
		<p class="erreur"><?php echo $erreur_prenom; ?></p>
 		<?php } ?>
  		<label for="mail">Adresse Mail : </label><input type="text" name="mail" value="<?php if(isset($_POST['mail'])) { echo $_POST['mail']; } else{ echo 'Si Vous attendez une réponse'; } ?>" class="obligatoire"/><br/>
		<?php if(isset($erreur_mail != '')) { ?>
		<p class="erreur"><?php echo $erreur_mail; ?></p>
 		<?php } ?>
  		<label for="sujet">Sujet : </label><input type="text" name="sujet" value="<?php if(isset($_POST['sujet'])) { echo $_POST['sujet']; } ?>" class="obligatoire"/><br/>
		<?php if(isset($erreur_sujet != '')) { ?>
		<p class="erreur"><?php echo $erreur_sujet; ?></p>
 		<?php } ?>
  		<label for="message">Message : </label><textarea type="text" name="message" rows="20" cols="30" class="obligatoire"><?php if(isset($_POST['message'])) { echo $_POST['message']; } ?></textarea><br/>
		<?php if(isset($erreur_message != '')) { ?>
		<p class="erreur"><?php echo $erreur_message; ?></p>
 		<?php } ?>
    		<button type="submit" id="envoi">Envoyez !</button>
		<input type="hidden" name="envoye" id="submitted" value="true" />
    	</form>
</div>

La partie jQuery senser dynamiser la fenetre modal :

jQuery(document).ready(function($) {
 	$('#form_contact').submit(function() {
		$('#form_contact .erreur').remove();
		var erreur = false;
		$('.obligatoire').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<p class="erreur">Vous avez oublié le '+labelText+'.</p>');
				erreur = true;
			}
			else if($(this).hasClass('mail')) {
				var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					var labelText = $(this).prev('label').text();
					$(this).parent().append('<p class="erreur">Votre email n\'est pas valide.</p>');
					erreur = true;
				}
			}
 		});
			if(!erreur) {
				$('#form_contact').fadeOut('normal', function() {
				$(this).parent().append('<p>Envoi en cours...</p>');
			});
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				$('#form_contact').slideUp("fast", function() {
					$(this).before('<p class="thanks"><strong>Merci !</strong> Votre email à bien été envoyé</p>');
 					});
				});
			}
		return false;
		});
});

Actuellement le résultat est une page blanche !
Ai-je bien insérer javascript dans wordpress ? J'avoue me poser des questions que je ne me posais pas en avançant dans sa....
Modifié par kikadisa (01 May 2011 - 20:29)