Créer un formulaire de contact dans une lightwindows

La lightwindows permet des effets comparables à ceux de la lightbox. Voici un exemple d'un formulaire qui s'ouvre avec fond sombre :

Cliquez pour répondre au formulaire





Première étape :

Allez sur STICKMANLIGHTS

Cliquez sur  Download Files :You can grab the files here

Vous venez d'enregistrer un fichier .zip. C'est un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers

Deuxième étape :

Dans l'administration de votre blog - Mes Documents - Autres fichiers :

1. vous créez un répertoire Lightwindows
   
   
   
   
   1. dans lequel vous créez un répertoire images
      
   2. dans lequel vous uploadez les fichiers :
      
      
      
      
      1. arrow-down.gif
         
      2. arrow-up.gif
         
      3. black-70.png
         
      4. nextlabel.gif
         
      5. prevlabel.gif
         
      6. blank.gif
         
   3. vous notez les adresses de ces fichiers
      

Troisième étape :

Sur votre PC :

1. Vous ouvrez le bloc-notes
   
2. Vous appelez le fichier lightwindow.js
   
3. Vous modifiez l'adresses des images :
   
   
   
   
   1. ajax-loading.gif
      
   2. black.png
      
   3. black-70.png
      
   (vous venez de les enregistrer dans l'administration de votre blog à la deuxième étape)
   
4. vous enregistrez le fichier sous le même nom
   

1. Vous appelez le fichier lightwindow.css
   
2. vous modifiez l'adresse des images :
   
   
   
   
   1. blank.gif
      
   2. prevlabel.gif
      
   3. nextlabel.gif
      
   4. black-70.png
      
   5. arrow-up.gif
      
   6. arrow-down.gif
      
3. Vous sauvegardez le fichier sous le même nom
   

Quatrième étape :

Dans l'administration de votre blog - Mes Documents - Autres Fichiers - Lightwindows :

1. vous créez un sous-répertoire javascript
   
2. vous y uploadez les fichiers :
   
   
   
   
   1. lightwindows.js
      
   2. prototype.js
      
   3. scriptaculous.js
      
   4. effects.js
      
3. vous notez leur adresse
   

1. vous créez un sous-répertoire css
   
2. vous y uploadez le fichier :
   
   
   
   
   1. lightwindows.css
      
3. vous notez son adresse
   

Cinquième étape

Lors de la mise en place de votre lightwindows, vous collez en HTML

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/prototype.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/effects.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/lightwindow.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/css/lightwindow.css" type="text/css" media="screen" />

Avec vos propres adresses de fichiers. Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses et donc le pavé précédent.

Ensuite, vous collez, toujours en HTML

<a class="lightwindow page-options" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/form.html">Cliquez pour répondre au formulaire</a>

Avec :

• en bleu, l'adresse de votre formulaire
  
• en vert, ce qui apparaît en mode normale