Comment personnaliser (CSS) le formulaire d’inscription ?
Cet article concerne les versions Standard, Professionnelle, Atomique.
Vous avez affiché un formulaire d’inscription (« normal » ou « mini ») et souhaitez, grâce à CSS, le modifier : rien de plus simple, tout se passe dans vos déclarations de feuille de style et ça prend quelques clics de souris.
1. Dans les 2 cas
le formulaire a un ID : ntux3_reg. Vous pouvez donc utiliser le sélecteur #ntux3reg avec un héritage par exemple :
#ntux3_reg fiedset
{
...
}
2. Avec le formulaire « normal »
la classe « ntux3_email » s’applique au champ contenant l’email.
la classe « ntux3_profiles » s’applique aux champs contenant la(les) liste(s) de diffusion.
Si une liste a plusieurs formats (texte + HTML), alors la liste des 2 formats a l’id « ntux3_formats_{ID_profile}« . (par exemple pour la liste de diffusion d’ID 300, la sous-liste des 2 formats aura pour ID : ntux3_formats_300)
la classe « ntux3_otherfields » s’applique au champ contenant les données annexes (si spécifiées)
la classe « ntux3_antispam » s’applique au champ contenant l’antispam.
la classe « delete_all_data » s’applique au champ de désinscription complète (Version Pro : seulement en cas de table NewsletTux pour gérer les abonnés)
La classe « compulsorylegend » peut être utilisée pour contrôler l’apparence de la ligne « les champs tagués d’une astérisque sont obligatoires ».
3. Avec le formulaire « mini »
seule la classe « ntux3_email » est utilisée pour le bloc contenant l’email.
La classe « compulsorylegend » peut être utilisée pour contrôler l’apparence de la ligne « les champs tagués d’une astérisque sont obligatoires ».
4. Comment utiliser ces données ?
Vous avez un document CSS recensant toutes les propriétés de votre page. Ce document doit être inclus dans la page qui héberge le formulaire d’inscription.
Pour appliquer un effet, vous devez rajouter ce code (en choisissant la balise voulue parmi celles proposées ci-dessus) :
#ntux3_email label
{
color:blue;
}
Va vous afficher le texte « Adresse e-mail » en bleu.
Pour masquer la ligne des champs obligatoires, vous pouvez utiliser ce code :
#ntux3_reg .compulsorylegend
{
display:none;
}
4. Désinscription et autres messages
Autres messages utilisant des classes CSS :
la classe « ntux3_error » en cas de message d’erreur
la classe « ntux3_ok » en cas de message de succès/réussite/fin de procédure
la classe « ntux3_warning » cas d’un formulaire soumis avec des champs obligatoires non remplis par exemple
la classe « ntux3_nok » erreur qui empêche d’aller plus loin dans la procédure
Après, c’est à votre bon vouloir … 
[...] Astuce : pour personnaliser encore plus les messages de NewsletTux, consultez l’article sur les classes CSS utilisées par NewsletTux. [...]