Passer au contenu principal

Crochets de CSS pour la personnalisation de formulaires

Copier l'URL de l'article
Il a été copié

Les formulaires d'inscription Mailchimp peuvent contenir jusqu'à 30 champs personnalisés. En plus de l'adresse e-mail, vous pouvez recueillir des données comme le prénom, le nom, l'entreprise etc. Après avoir configuré les champs et le format de votre formulaire, vous pouvez le personnaliser à l'aide d'un code CSS.

Qu'est-ce que le CSS ?

Le CSS (Cascading Style Sheets) est un langage de feuille de style principalement destiné à faciliter la séparation entre le contenu du document (écrit en HTML ou dans un langage de balisage similaire) et la présentation du document, y compris des éléments comme les couleurs, les polices, et la mise en page. Jetez un oeil à cette introduction au CSS du W3C.

Outils de développement

Firebug est une extension de développement web pour Firefox. C'est l'un des outils de développement web les plus puissants du marché.

IE Web Developer Tools - Microsoft propose un logiciel similaire qui fonctionnera avec Internet Explorer. (Toutes les versions). Jetez un oeil à Internet Explorer Developer Tools.

Web Inspector pour Google Chrome fait partie des outils de développeur de Google Chrome. Similaire à Firebug, Web Inspector est un outil de visualisation d'éléments HTML associés à un DOM.

Tableau de référence

Voici un tableau affichant les crochets de CSS possibles qui vous permettront de personnaliser vos formulaires.

Sélecteur CSSNom / typeDescription
#mc_embed_signupElément DIVCet élément DIV s'enroule autour du formulaire. Utilisez ce sélecteur devant les autres sélecteurs ci-dessous pour garantir que les styles seront appliqués. (Par exemple, #mc_embed_signup .mc-field-group)
#mc-embedded-subscribe-formElément FormulaireUtilisez ce sélecteur pour définir des styles sur l'élément de formulaire principal. Utile pour augmenter le remplissage autour des éléments de formulaire.
div.mc-field-groupChamp Groupe (Group)Un enveloppeur pour chaque combinaison d'étiquette et d'entrée sur les formulaires avec plus qu'un seul champ. Utilisez ceci pour contrôler l'espacement horizontal et vertical (remplissage) entre les entrées. Certains éléments .mc-field-group ont aussi une catégorie .size1of2 qui diminue leur taille de moitié pour en faire entrer deux par ligne.
div.mc-field-group labelÉtiquettesSélecteur d'étiquette par défaut. Utilisez ceci pour appliquer le style à la plupart des étiquettes de formulaire.
div.mc-field-group inputEntrée(s)Sélecteur d'entrée par défaut. Utilisez ceci pour appliquer le style à la plupart des entrées de formulaire.
div.mc-field-group selectMenus déroulantsSélectionnez le sélecteur (déroulant) par défaut. Utilisez cette option pour donner un styler à tous les menus déroulants.
input.buttonBouton SoumettreDonner un style au le bouton de soumettre avec ce sélecteur

Cases à cocher et boutons radio

Sélecteur CSSNom / typeDescription
div.mc-field-group.input-groupÉlément DIVPrincipal conteneur DIV pour les groupes de cases / radio.
div.mc-field-group.input-group strongBalise GrasUtilisé pour le style d'étiquette de champ extérieur pour un groupe de cases / radio.
div.mc-field-group.input-group ulElément ULConteneur de liste non-ordonnée pour les groupes de cases / radio.
div.mc-field-group.input-group ul liElément LIElément LI contenant l'étiquette et l'entrée. (groupes de cases / radio)
div.mc-field-group.input-group ÉtiquetteÉiquettes de cases / radioSélecteur d'étiquette de groupes de cases / radio par défaut. Remarque : l'étiquette vient après l'entrée dans les groupes de cases / radio.
div.mc-field-group.input-group inputEntrées de cases / radioSélecteur d'entrée de groupes de cases / radio par défaut.

Champs obligatoires

Sélecteur CSSNom / typeDescription
.indicates-requiredElément DIVConteneur pour le message *indique nécessaire en haut du formulaire.
.mc-field-group .asteriskElément SPANConteneur pour * sur les étiquettes nécessaires.

Messages de réponse (Ajax)

Sélecteur CSSNom / typedescription
#mce-responsesElément DIVConteneur pour les réponses d'erreur.
div.responseElément DIVConteneur de message de réponse par défaut. Ceci devra être réglé sur display:none; par défaut, pour qu'il ne s'affiche pas comme des cases de style vides. Le JS écrira dans un style d'alignement display:block pour les afficher en cas de besoin.
div.mce_inline_errorElément DIVDiv avec un message d'erreur placé sous les entrées ayant un problème.
input.mce_inline_errorEntrée(s)La catégorie .mce_inline_error class est également ajoutée aux entrées pour ajouter une bordure rouge.
#mce-error-responseMessage d'erreurConteneur pour les messages d'erreur sans entrée spécifique.
#mce-success-responseMessage d'erreurConteneur pour un message de réussite.

Champs de date

Sélecteur CSSNom / typeDescription
.datefieldElément DIVConteneur pour champs de date.
.datefield inputEntrée(s)Entrées de date par défaut.
.datefield .monthfield inputEntrée de texteEntrée de texte de mois
.datefield .dayfield inputEntrée de texteEntrée de texte de jour
.datefield .yearfield inputEntrée de texteEntrée de texte d'année
.datefield .small-metaElément SPANTexte suggéré pour le format de la date (mm/jj/aaaa)

Champs d'adresse

Sélecteur CSSNom / typeDescription
.mc-address-groupElément DIVGroupe d'adresse contenant un élément. Les éléments individuels du formulaire d'adresse ont le même style que les éléments du formulaire général énumérés ci-dessus.

Champs téléphoniques américains

Sélecteur CSSNom / typeDescription
.phonefield-usElément DIVElément conteneur pour les entrées du champ téléphonique.
.phonefield-us .phonearea inputEntrée de texteEntrée du code téléphonique
.phonefield-us .phonedetail1 inputEntrée de texteEntrée pour les trois premiers chiffres des numéros de téléphone aux États-Unis.
.phonefield-us .phonedetail2 inputEntrée de texteEntrée pour les quatre derniers chiffres des numéros de téléphone américains.
.phonefield-us .small-metaElément SPANTexte suggéré pour le format de saisie du téléphone (###) ###-####

Assistance technique

Vous avez une question?

Les utilisateurs payants peuvent se connecter pour accéder à l'assistance par e-mail et chat.

Cet article vous a-t-il été utile ?

Y a-t-il autre chose que nous puissions faire pour améliorer notre site?

Connexes