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

Adresse email:

Sexe masculin Féminin

Ville de résidence actuelle

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>

Forum

Rester dans la lightbox après le formulaire

24-07-2008 16:37:06

reevez

Salut à tous ! Deja merci pour la source de code pour faire ça . J'ai adapté relativement rapidement tout ça en ASP , mais je voudrais qu'une fois le formulaire au lieu d'aller sur une autre vraie page on resterai dans la meme lightbox, et il y aurait marqué 2votre Incription a bien été effectuée" avec un bouton Fermer . That's it . Est ce possible pouvez vous éclairer ma lanterne je suis pas une tete en prog mais j'ai des mini bases :p Merci d'avance ! Le site est conçi bien concu clair C'est cool ...
30-07-2008 15:45:08

webmaster

Bonjour. Cela ne pose pas de problème. On supprime le nom de fichier assigné à la propriété action du formulaire:
action=""
Le bouton au lieu de soumettre le formulaire doit appeler une fonction JavaScript/ASP:
<input type="submit" name="submit" value="Envoyer">
devient:
<input type="button" name="submit" value="Envoyer" onclick="alert('merci')">
La fonction alert() n'est qu'un exemple, on peut y placer toute fonction que l'on aura définie dans un script JavaScript ou ASP.

Plusieurs formulaires lightbox

01-09-2011 15:55:35

Diddou

Bonjour, j'utilise le lihtbox form est d'abord bravo c'est un script aussi pratique qu'esthétique. Je souhaiterais pouvoir gérer plusieurs formulaires sur une même page. Par exemple lien 1 ouvre le lightbox avec un formulaire et lien 2 ouvre une lightbox avec un autre formulaire. Pour l'instant je n'arrive pas à intégrer plus d'un formulaire. Avez-vous une idée ?
01-09-2011 19:25:31

webmaster

Bonjour Le code a été prévu pour un formulaire, c'est pourquoi les balises sont reconnues par un ID. On peut le modifier pour plusieurs formulaires en remplaçant pour le code CSS les ID par des classes et en modifiant le code CSS en conséquence. Il faut toujours des ID pour identifier les balises afin de faire apparaître la lightbox voulue. Tout ceci requiert quelques adaptations du code.
06-09-2011 21:20:52

Diddou

Merci pour l'info, je vais essayer d'adapter ça.
Forum

LightBox : la partie apparente de l'iceberg !

03-05-2010 13:30:20

saxrub

Salut à tous, J'utilise depuis peu Lightbox format forlulaire Content comme tout, j'ai fait tester ma première page "Lightboxée" par un collègue, collègue qui a eu l'idée farfelue de faire descendre le contenu de la page avec l'ascenseur droit de la page. Et là, tout s'écroule ! La hauteur de la div FILTER s'arrête à la hauteur de la partie visible [url=http://www.saxrub.fr/temp/Visible.gif]www.saxrub.fr/temp/Visible.gif[/url] de la page telle qu'elle s'affiche, rendant accessible la partie basse de la page conteneur [url=http://www.saxrub.fr/temp/bas.gif]www.saxrub.fr/temp/bas.gif[/url]. Une idée sur le problème ? A+ Pascal
03-05-2010 20:05:46

webmaster

Bonjour Peut-être en modifiant les propriétés du conteneur?
div 
{
   min-width:600px;
   min-height:300px;
   overflow:scroll;
}

Suite du forum...


© 2008-2014 Xul.fr