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

Pour faire apparaître le formulaire, cliquer ici.

On utilise dans cet exemple un effet de fondu, cela peut être désactivé, dans ce cas cliquer sur:

Formulaire sans fondu.

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="shadowing"></div>
<div id="box"></box>
    <span id="boxtitle"></span>
    <form method="GET" action="lightbox-formulaire-test.html" >
        ... objets du formulaire...
    </form>
</div>
</div>

Télécharger la démonstration complète.