Personnalisation du formulaire d'inscription

[Etiennne]

Bonjour,

Alors là, je vous préviens tout de suite, je vais être embêtant  

J'ai installé Newslettux2 sur un site (merci merci merci merci), et j'ai intégré le formulaire d'inscription/désinscription dans une de ses pages de manière à conserver la même esthétique. Pour l'instant, ça donne ça :

http://www.alicegregorio.com/liste-diffusion.php

Or, je voudrais bidouiller deux-trois trucs mais je ne sais pas où trouver les fichiers qui me permettraient de le faire (j'ai cherché dans form-newslettux.php mais niet)... Plus précisément, je voudrais obtenir un résultat similaire à celui obtenu sur la page suivante (il s'agit du formulaire d'inscription de feu Wanewsletter, paix à son âme) :

http://www.alicegregorio.com/newsletter.php

En somme il s'agit d'arranger les éléments suivants :
— supprimer la mention "Email" devant le formulaire
— inscrire par défaut "votre courriel" dans le formulaire en question (normalement, on fait ça en changeant la valeur de "value" dans <input type="text" />, mais je ne sais pas où le trouver)
— mettre les zones "Inscription" et "Désinscription" non pas côte à côte mais l'une en dessous de l'autre (avec les boutons correspondants bien sûr  )
— changer leur police "Trebuchet MS" en "Times New Roman" (sans avoir à changer la police du menu à gauche  )
— réduire l'espace séparant les zones "Inscription" et "Désinscription" du bouton "Ok !" "Valider"
— changer le bouton "Ok !" en "Valider" (ça, j'ai trouvé : il faut modifier le fichier /languages/client_fr.lang.php)
— agrandir l'espace séparant la zone du bouton de validation et la zone "Licence d'utilisation"

Si vous pouviez me donner quelques pistes (en fait, juste les adresses des fichiers à modifier ça devrait aller), ça serait bien sympa.

Merci à toute l'équipe ! Newslettux est excellent !

E.

[Matthieu]

Bonjour,

beaucoup de choses sont modifiables directement dans le form-newslettux.php

Tout d'abord, je suppose que tu as du prendre le formulaire simplifié (je vais partir sur cette idée puisque c'est ce qui se rapproche le plus de ce que tu avais avant).

- supprimer la mention E-mail" devant le formulaire :

je ne trouve pas ça très judicieux pour ma part, pour une raison d'accessibilité, mais c'est techniquement faisable.
ça se passe ligne 560, remplacer

Code:

echo ' <p><label for="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '">'.$ntux2['mail'].'</label><input type="text" id="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" tabindex="'.$tabindex.'" value="'.$email.'"'.DOC; $tabindex++;

par

Code:

echo ' <p><input type="text" id="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" tabindex="'.$tabindex.'" value="'.$email.'"'.DOC; $tabindex++;

inscrire par défaut "votre courriel" dans le formulaire en question (normalement, on fait ça en changeant la valeur de "value" dans <input type="text" />, mais je ne sais pas où le trouver)

Même ligne, remplace donc ce qu'on vient de mettre :

Code:

echo ' <p><input type="text" id="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" tabindex="'.$tabindex.'" value="'.$email.'"'.DOC; $tabindex++;

par :

Code:

echo ' <p><input type="text" id="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="email'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" tabindex="'.$tabindex.'" value="votre courriel" onfocus="this.value=\'\');"'.DOC; $tabindex++;

(pour rendre plus ergonomique, j'ai mis un onfocus="..." pour effacer la mention dès que le focus est sur ce champ, tu peux supprimer ce paramètre si tu ne le souhaites pas)

mettre les zones "Inscription" et "Désinscription" non pas côte à côte mais l'une en dessous de l'autre (avec les boutons correspondants bien sûr

qq lignes plus bas (l. 573) remplace

Code:

echo ' <li style="float:left; text-align:left; list-style-type:none;"><input type="radio" id="subscribe'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="action" tabindex="'.$tabindex.'" value="subscribe" checked="checked"'.DOC.'<label for="subscribe">'.$ntux2['subscribe'].'</label></li>'.CR; $tabindex++;
echo ' <li style="float:left; text-align:left; list-style-type:none;"><input type="radio" id="unsubscribe'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="action" tabindex="'.$tabindex.'" value="unsubscribe"'.DOC.'<label for="unsubscribe">'.$ntux2['unsubscribe'].'</label></li>'.CR; $tabindex++;

par

Code:

echo ' <li style="list-style-type:none;"><input type="radio" id="subscribe'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="action" tabindex="'.$tabindex.'" value="subscribe" checked="checked"'.DOC.'<label for="subscribe">'.$ntux2['subscribe'].'</label></li>'.CR; $tabindex++;
echo ' <li style="list-style-type:none;"><input type="radio" id="unsubscribe'; echo ($formnumber != 0) ? '_'.$formnumber : ''; echo '" name="action" tabindex="'.$tabindex.'" value="unsubscribe"'.DOC.'<label for="unsubscribe">'.$ntux2['unsubscribe'].'</label></li>'.CR; $tabindex++;

changer leur police "Trebuchet MS" en "Times New Roman" (sans avoir à changer la police du menu à gauche

tout le formulaire est dans un bloc nommé "reg".

donc tu dois pouvoir le faire en CSS directement comme ceci

Code:

#reg ul li label
{
    font-family:"Times New Roman";
    background-color:red;
}

Tu penseras à virer le background-color, je l'ai mis pour que tu voies du premier coup d'oeil si le style est appliqué aux label ou pas.

réduire l'espace séparant les zones "Inscription" et "Désinscription" du bouton "Ok !" "Valider"

tu peux effacer la ligne 576 :

Code:

echo ' <div style="clear:left;"></div>'.CR;

qui ne sert plus à rien avec la modif ci-dessus.

agrandir l'espace séparant la zone du bouton de validation et la zone "Licence d'utilisation"

t'as 2 solutions, soit mettre un margin-bottom au formulaire, soit un margin-top à la licence. Je te livre les 2, fais l'essai et choisis ce qui est le mieux. C'est en CSS :

Code:

form#reg
{
    margin-bottom:3em; /* mettre ce que tu veux */
}

ou bien

Code:

#license_NewsletTux
{
    margin-top:3em;
}

[Etiennne]

Merci pour ta réponse. En fait, c'était plus compliqué que ce que je croyais... Tout a bien fonctionné, excepté pour la zone "Inscription/Désinscription" qui reste à droite (malgré quelques essais infructueux en CSS). Je suppose que je pourrai arranger ça en rétablissant <li text-align:left; [...]>, non ?

Au fait, pourquoi dis-tu que ce n'est pas judicieux pour l'accessibilité de supprimer la mention "Email" avant le formulaire ? Si je change d'avis, pourrais-tu me dire comment modifier "Email" en "Email " (avec un espace) ou "Courriel " (idem) ?

Merci encore!

E.

[Matthieu]

Hello

Pour la zone d'inscription : faut essayer, j'ai pas testé en reproduisant ton site.




Pas judicieux parce que les personnes malvoyantes ou aveugles qui vont sur ton site vont avoir un champ de formulaire sans étiquette ("label" en anglais, c'est "étiquette") donc un champ sans légende = que vont-ils y mettre ?

Le lecteur vocal lit pour chaque champ son étiquette associée.

Sinon il y a 2 possibilités, soit mettre un padding-right en CSS au label, soit modifier le fichier common ou client.fr.php dans le dossier des langues pour rajouter manuellement l'espace.

[Etiennne]

Bonjour Matthieu,

Merci beaucoup pour ton aide.

Je suis donc allé dans languages/common_fr.php, puis j'ai changé "Email" en "E-mail : ".

J'ai aussi ajouté quelques lignes au CSS de ma page. Je recopie ici, pour ceux et celles que ça intéresse :

Code:

#reg ul li
{
  font-family:"Times New Roman";
  text-align: left;
  letter-spacing: 3px;
}
#reg ul
{
  margin-bottom: 1em;
}
form#reg
{
  padding-left: 1em;
  margin-bottom: 6em;
  letter-spacing: 1px;
}

Etiennne