Formulaire dans une lightbox

Faire apparaître un formulaire dans la lightbox, avec en option un effet de fondu, cela devrait inciter les visiteurs à le remplir...

Nous avons vu comment créer une lightbox avec effet de fondu, nous réutilisons le code JavaScript mais par ailleurs nous simplifions le code CSS parce qu'un formulaire dispose d'un bouton soumettre et un bouton annuler, donc le bouton close peut disparaître.

Le formulaire est placé dans la boite dans la page d'origine et n'a pas besoin d'être chargé dynamiquement, bien que cette option reste possible, de même qu'il est aussi possible de créer plusieurs boites et en faire apparaître une au choix selon les besoins. On peut adapter le code pour ce faire.

Démonstration

Notre exemple utilise un formulaire composé d'objets de différents types:
- Un champ de texte.
- Deux boutons radios alternatifs.
- Une liste de sélection.

Dans notre exemple, les données entrées et les choix faits par l'utilisateur sont envoyés à une autre page Web. Ces données sont récupérées par un code JavaScript placé dans cette autre page:

function retrieve()
{

	var parameters = location.search.substring(1).split("&");
	var temp = parameters[0].split("=");
	mail = unescape(temp[1]);

	temp = parameters[1].split("=");
	sex = unescape(temp[1]);

	temp = parameters[2].split("=");
	city = unescape(temp[1]);

	var data =  document.getElementById("data");

	data.innerHTML = "Email: " + mail + "<brr";
	data.innerHTML += "Genre: " + sex + "<br>";
	data.innerHTML += "City: " + city + "<br>";

}

retrieve();

Quand au code de la page du formulaire il est le même que le code précédemment utilisé, à ceci près que le remplissage dynamique est supprimé. Cela donne une fonction openbox simplifiée.

function openbox(formtitle, fadin)
{
  var box = document.getElementById('box'); 
  document.getElementById('filter').style.display='block';
  
  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;
  
  if(fadin)
  {
	 gradient("box", 0);
	 fadein("box");
  }
  else
  { 	
    box.style.display='block';
  }  	
}	

Nous pouvons voir que la fonction à en paramètre le titre du formulaire, et l'option fadin qui vaut 1 si l'on demande un effet de fondu, et 0 si l'affichage doit être immédiat.

La fonction closebox est maintenant associée au bouton "annuler":

<input type="button" name="cancel" value="Annuler" onclick="closebox()">

Le code CSS est le même avec la suppression de quelques descripteurs. En effet le code à insérer dans la page se trouve simplifié:

<div id="filter"></div>
<div id="box"></box>
    <span id="boxtitle"></span>
    <form method="GET" action="lightbox-formulaire-test.html" >
        ... objets du formulaire...
    </form>
</div>
</div>

• Voir la démonstration de formulaire dans une lightbox.
• Le code CSS.
• Le code JavaScript de la démo.
• Charger la page à laquelle sont envoyées les données pour voir le code source.
• Télécharger la démonstration complète.

(c) 2008 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.