Modifier la mise en page du formulaire de connexion

Savoir comment modifier la mise en page du formulaire de connexion, dans le but de pouvoir afficher ce formulaire plus aisément n'importe où dans une page.

1. Installation facile, sans modifier la mise en page
2. Récupérer l'ID de votre zone membres
3. Modification de la mise en page
4. Exemples

Si vous souhaitez simplement afficher la zone de connexion, sans en modifier la mise en page, rendez-vous sur l'onglet "Vos Zones".

Copiez le petit script qui se trouve sous "Formulaire de connexion", et collez le dans les sources de votre page, en cliquant sur le bouton de l'éditeur de construction de votre page.

Pour modifier la mise en page de votre zone de connexion, vous allez avoir besoin de l'ID de votre zone membre (cf. prochain paragraphe).

Vous trouverez cet ID en vous rendant sur l'onglet "Vos zones". L'ID est un nombre qui se trouve en dessous du nom et de la description de la zone (il est précédé d'un #).

Si vous souhaitez mettre en page vous même cette zone de connexion, la tache est légèrement plus compliquée.

Vous allez devoir insérer le formulaire suivant dans les sources de votre page :
<form method="POST" action="espmconnect.html">
<input name="idmod" type="hidden" value="IDZONE" />
Email/Pseudo : <input name="email" type="text" value="" size="20" maxlength="150">
Mot de passe : <input name="mdp" type="password" value="" size="20" maxlength="50">
<input type="submit" name="actions" value="connexion">
</form>

Avec obligatoirement, dans cet ordre, les éléments suivants :
•<form method="POST" action="espmconnect.html"> : correspond à l'ouverture du formulaire.
•<input name="idmod" type="hidden" value="IDZONE" /> : correspond à un champs caché. Remplacez IDZONE par l'id de votre zone membres (invisible pour vos visiteurs).
•<input name="email" type="text" value="" size="20" maxlength="150"> : correspond au champ dans lequel le membre va écrire son mail ou son pseudo.
•<input name="mdp" type="password" value="" size="20" maxlength="50"> : correspond au champ dans lequel le membre va écrire son mot de passe.
•<input type="submit" name="actions" value="connexion"> : correspond au bouton "connexion".
•</form> : correspond à la fermeture du formulaire.

Ainsi, vous pouvez disposer ou vous le souhaitez et comme vous le souhaitez ces différents éléments. Attention à toujours bien encadrer l'ensemble par :
•<form method="POST" action="espmconnect.html"> et </form>.

Voici quelques exemples de mise en page :


---------------------------------------------------------


<form method="POST" action="espmconnect.html">
<input name="idmod" type="hidden" value="IDZONE" />
Email/Pseudo : <input name="email" type="text" value="" size="20" maxlength="150">
<br />
Mot de passe : <input name="mdp" type="password" value="" size="20" maxlength="50">
<input type="submit" name="actions" value="connexion">
</form>

Vous donnera :

Email/Pseudo :
Mot de passe :



---------------------------------------------------------


<form method="POST" action="espmconnect.html">
<input name="idmod" type="hidden" value="IDZONE" />
<input name="email" type="text" value="Email/Pseudo" size="20" maxlength="150"> <input name="mdp" type="text" value="Mot de passe" size="20" maxlength="50">
<input type="submit" name="actions" value="connexion">
</form>

Vous donnera :





---------------------------------------------------------


<form method="POST" action="espmconnect.html">
<input name="idmod" type="hidden" value="IDZONE" />
Email/Pseudo : <input name="email" type="text" value="" size="20" maxlength="150"> / Mot de passe : <input name="mdp" type="password" value="" size="20" maxlength="50">
<input type="submit" name="actions" value="connexion">
</form>

Vous donnera :

Email/Pseudo : / Mot de passe :


---------------------------------------------------------


<form method="POST" action="espmconnect.html">
<input name="idmod" type="hidden" value="IDZONE" />
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Email ou pseudo :<br />
<input name="email" type="text" value="" size="20" maxlength="150"></td>
<td>Mot de passe :<br />
<input name="mdp" type="password" value="" size="20" maxlength="50"></td>
<td><input type="submit" name="actions" value="connexion"></td>
</tr>
</table>
</form>

Vous donnera :

Email ou pseudo :

Mot de passe :