Nicorama Site

Formulaire placé dans la barre latérale

wubijacq.com forms

Le formulaire présenté sur cette page


A l' avantage de pouvoir être traité en AJAX, mais aussi en PHP si l' internaute utilisateur de ce formulaire n' a pas javascript installé dans son système
Basé sur le script de Kevin Liew de Queness.com: Create a Ajax based Form Submission with jQuery
J' ai modifié HTML5 et CSS afin d' obtenir un formulaire qui puisse s' adapter à une page responsive web design (RWD)
J' ai du régler le problème des caractères spéciaux comme les apostrophes, qui rajoutent des slashes dans le texte des messages.
Quant au javascript spécial étourdi, si vous faites deux fois la même erreur, elle vous sera signalée textuellement
J' ai modifié l'aspect du bouton "reset" (utile mais pas indispensable) afin qu' il soit plus présentable sur Explorer Internet 9

Explications


Il est possible, dans cette page, de placer le formulaire en haut de la barre latérale, visible à droite de la partie principale, si vous avez une largeur d' écran de plus de 700px.
Ou juste après "Commentaires" si vous avez un mobile.
Quand la page est rétrécie à 625 pixels de largeur, la barre latérale est réduite à 220 pixels. Juste après, en minimisant encore plus, c'est le point de rupture et la page se présente sur une seule colonne.
La barre latérale se retrouve contenue dans cette unique colonne, juste en dessous de la partie principale et atteint brusquement plus de 620 pixels de large.
C' est juste avant ce point de rupture, au moment où la barre latérale est la plus petite, que j'ai ajusté les largeurs des champs de saisie (input et textarea). Je leur ai donc choisi une largeur fixe de 198 pixels.
Les media-queries (hollandais volant)

HTML, CSS, javascript et AJAX/PHP du formulaire


HTML


Je n' utilise pas les balises LABEL mais les balises SPAN en display:inline-block pour les intitulés afin de rendre le formulaire flexible.
Ce code est à coller dans votre "nav" ou ""aside" du haut de votre sidebar selon la dénomination donnée aux blocs de votre barre latérale
 
                        <div class=block>
               <div class=done>
Votre commentaire a bien &eacute;t&eacute envoy&eacute, merci.<br>
Il sera affich&eacute apr&egrave;s mod&eacute;ration. 
</div>
	                <div class=form>
	<form method="post" action="process.php">
 <fieldset class=fld1>
                        <div class=element>
<span class=int> Pseudo </span>
<input type=text name=name id =name placeholder="entrer votre nom ou prénom" class=text> 
<div id=nameInfo class=error ></div>
</div>
                        <div class=element>
<span class=int> Courriel </span>
<input type=email name=email id=email placeholder="entrer une adresse valide" class=text>
<div id=emailInfo class=error></div>
</div>
                        <div class=element>
<span class=int> Site web </span>
<input type=url name=website id=website placeholder="facultatif" class=text>
<div class=error></div>
</div>
                        <div class=element>
<span class=int> Message </span>
<textarea type=text name=comment id=comment placeholder="minimum 10 caract&egrave;res" class=text>
</textarea>
<div class=error></div>
</div>
                        <div class=element>
<div style=display:block>
<input type=submit id=submit class=submit>
<input type=reset  id=submit class=reset value=<<<>
                      <span class=loading><span>
                      </div>
                  </div>
            </fieldset>
<fieldset style=display:block;float:left;margin:10px>
Votre adresse &eacute;lectronique ne sera pas communiqu&eacute;e
                </form>
         </fieldset>
<p align=center>
<a href="http://wubijack.free.fr/copyleft.htm">copyleft@wubijacq.com</a>
</p>
<div class=clear></div>                      

CSS


Il se peut que le code soit un peu surchargé, je sais mais cela fonctionne. CSS est très important, il gère l' aspect graphique du formulaire mais il est aussi très lié à javascript.
span.int
{display:inline-block;width:70px;margin:3px;padding:3px;text-align:left}

div.error
{color:#72AE00;font-size:75%;}

input.text
{-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
width:198px;height:20px;text-align:center}
::-webkit-input-placeholder { text-align:center; }
::-moz-placeholder { text-align:center; } 
:-ms-input-placeholder { text-align:center; } 
input:-moz-placeholder { text-align:center; }

textarea
{width:198px;height:100px;
       -moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;}

input.submit
{width:90px;height:45px;margin:3px;color:green;background:white}

input.reset
{width:45px;height:30px;margin:7px;color:red;background:white}


fieldset.fld1
{float:left;margin:0 auto;display:block;text-align:center}

fieldset.fld2
{display:block;float:left;padding:10px}



.clear {clear:both}

.right {float:right;width:55%;}

.block {width:"65%";min-height:320px;
	margin:0 auto;
	text-align:left;
}
.element * {
	padding:5px; 
	margin:2px; 
	font-family:arial;
	font-size:12px;
}

}
.element input.text {
	float:left; 
	width:213px;
	
	

}
.element .textarea {
	height:120px; 
	width:198px;}

.element .hightlight {
	border:2px solid #9F1319;background:#ccc	
}

element .error {display:none;}
	
}
.element #submit {
	float:right;
	margin-right:10px;
}
span.loading {
	float:right;margin:5px; 
	background:url(images/ajax-loader.gif) no-repeat 1px; 
	height:25px; 
	width:25px; 
	display:none;
}
.done {
	background:url(images/check.gif) no-repeat 2px; 
	padding-left:35px;
	font-family:arial;
	font-size:12px; 
	width:70%; 
	margin:20px auto; 
	display:none
}

javascript


$(document).ready(function() {
	
	//if submit button is clicked
	$('#submit').click(function () {		
		
		//Get the data from all the fields
		var name = $('input[name=name]');
                var nameInfo = $('#nameInfo');
		var email = $('input[name=email]');
                var emailInfo = $('#emailInfo');
		var website = $('input[name=website]');
		var comment = $('textarea[name=comment]');
                var reg=/^[a-zâäàéèùêëîïôöçñA-Z -]{3,}$/;
                var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
 
		//Simple validation to make sure user entered something
		//If error found, add hightlight class to the text field
		if (name.val()=='') {
			name.addClass('hightlight');
                        return false;
		
                 }else if(!reg.test(name.val())){
                        name.addClass('error');
                        nameInfo.text('entrer au moins 3 lettres et continuer');
                        nameInfo.addClass('error');
                        return false;     
                        
                }
		 else name.removeClass('hightlight');
             
                
	
		if (email.val()=='') {
			email.addClass('hightlight');
			return false;
                 }else if(!mail.test(email.val())){
                        name.addClass('error');
                        emailInfo.text('entrer une adresse valide et continuer');
                        emailInfo.addClass('error');
                        return false;     
                
		} else email.removeClass('hightlight');
		
		if (comment.val()=='') {
			comment.addClass('hightlight');
			return false;
		} else comment.removeClass('hightlight');
		
		//organize the data properly
		var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' + 
		website.val() + '&comment='  + encodeURIComponent(comment.val());
		
		//disabled all the text fields
		$('.text').attr('disabled','true');
		
		//show the loading sign
		$('.loading').show();
		
		//start the ajax
		$.ajax({
			//this is the php file that processes the data and send mail
			url: "process.php",	
			
			//GET method is used
			type: "GET",

			//pass the data			
			data: data,		
			
			//Do not cache the page
			cache: false,
			
			//success
			success: function (html) {				
				//if process.php returned 1/true (send mail success)
				if (html==1) {					
					//hide the form
					$('.form').fadeOut('slow');					
					
					//show the success message
					$('.done').fadeIn('slow');
					
				//if process.php returned 0/false (send mail failed)
			} else alert('Erreur inattendue. Veuillez r&,eacute;essayer plus tard.');				
			}		
		});
		
		//cancel the submit button default behaviours
		return false;
	});	
});	

PHP


Il est possible de placer CSS et javascript dans la partie HEAD d' un script HTML, mais PHP doit impérativement se trouver dans une page à part. Ici elle est nommée process.php, mais vous pouvez la renommer en faisant bien attention qu' elle corresponde bien à votre script HTML (action=blabla.php) et aussi dans javascript après $.ajax({ url:"blabla.php",
<?php

      //pour éviter les vilains slashes dans le texte de votre message
if (get_magic_quotes_gpc()) {

    function stripslashes_deep($comment)
     {
       $comment = is_array($comment) ?

                    array_map('stripslashes_deep', $comment) :

                    stripslashes($comment);

        return $comment;
      }

    $_POST = array_map('stripslashes_deep', $_POST);

    $_GET = array_map('stripslashes_deep', $_GET);

    $_COOKIE = array_map('stripslashes_deep', $_COOKIE);

    $_REQUEST = array_map('stripslashes_deep', $_REQUEST);
     }

      //Retrieve form data. 
      //GET - l' utilisateur envoie les données utilisant AJAX
      //POST -l' utilisateur n' a pas javascript installé, POST sera utilisé à la place
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];

      //flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

     //Simple server side validation for POST data, of course, 
//you should validate the email
if (!$name) $errors[count($errors)] = 'Veuillez entrer votre pseudo.';
if (!$email) $errors[count($errors)] = 'Veuillez entrer votre adresse courriel.'; 
if (!$comment) $errors[count($errors)] = 'Veuillez entrer votre commentaire.'; 

//if the errors array is empty, send the mail
if (!$errors) {

	//le destinataire c'est vous - indiquer votre vraie adresse courriel
	$to = 'mon@adresse.mail';
	
	//l' expéditeur est identifié ici
	$from = $name . ' <' . $email . '>';
	
	//Indiquer dans quelle page est situé le formulaire (surtout si vous avez plusieurs formulaires)
	$subject = 'depuis (ma page)' . $name;	
	$message = '
	<!DOCTYPE html><html lang=fr>
	<head><meta charset=utf-8>
        <style>
  div
   {font-size:14px}
        </style>
        </head>
	<body>
	
		<div><b>Pseudo:</b>&nbsp;&nbsp;&nbsp;' . $name . '</div>
		<div><b>Courriel:</b>&nbsp;&nbsp;&nbsp;' . $email . '</div>
		<div><b>Site web:</b>&nbsp;&nbsp;&nbsp;' . $website . '</div>
		<div><b>Commentaire:</b><br>' . nl2br($comment) . '</div>
	</body>
	</html>';

	//envoi du courrier
	$result = sendmail($to, $subject, $message, $from);
	
	//if POST was used, display the message straight away
	if ($_POST) {
		if ($result) echo 'Merci, votre message a bien &eacute;t&eacute envoy&eacute.';
		else echo 'Erreur innatendue. Veuillez r&eacute;essayer plus tard';
		
	//else if GET was used, return the boolean value so that 
	//ajax script can react accordingly
	//1 means success, 0 means failed
	} else {
		echo $result;	
	}

//if the errors array has values
} else {
	//display the errors message
	for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
	echo '<a href="url de la page contenant le formulaire">Retour</a>';
	exit;
}


//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
	$headers = "MIME-Version: 1.0" . "\r\n";
	$headers .= "Content-type:text/html;charset=uft-8" . "\r\n";
	$headers .= 'From: ' . $from . "\r\n";
	
	$result = mail($to,$subject,$message,$headers);
	
	if ($result) return 1;
	else return 0;
}
?>

Commentaires (3)

Sam

( Haïti )
C' est fantastique
Pseudo: Muoi
Site web: http://tanklitunkli.com/
Commentaire: Do you have any tips for writing posts? That's where I constantly struggle and I simply end up staring vacant screen for long period of time.