Crochets de CSS pour la personnalisation de formulaires

Lisez cette page dans

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 CSS	Nom / type	Description
#mc_embed_signup	Elément DIV	Cet é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-form	Elément Formulaire	Utilisez 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-group	Champ 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	Étiquettes	Sélecteur d'étiquette par défaut. Utilisez ceci pour appliquer le style à la plupart des étiquettes de formulaire.
div.mc-field-group input	Entré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 select	Menus déroulants	Sélectionnez le sélecteur (déroulant) par défaut. Utilisez cette option pour donner un styler à tous les menus déroulants.
input.button	Bouton Soumettre	Donner un style au le bouton de soumettre avec ce sélecteur

Cases à cocher et boutons radio

Sélecteur CSS	Nom / type	Description
div.mc-field-group.input-group	Élément DIV	Principal conteneur DIV pour les groupes de cases / radio.
div.mc-field-group.input-group strong	Balise Gras	Utilisé pour le style d'étiquette de champ extérieur pour un groupe de cases / radio.
div.mc-field-group.input-group ul	Elément UL	Conteneur de liste non-ordonnée pour les groupes de cases / radio.
div.mc-field-group.input-group ul li	Elément LI	Elément LI contenant l'étiquette et l'entrée. (groupes de cases / radio)
div.mc-field-group.input-group Étiquette	Éiquettes de cases / radio	Sé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 input	Entrées de cases / radio	Sélecteur d'entrée de groupes de cases / radio par défaut.

Champs obligatoires

Sélecteur CSS	Nom / type	Description
.indicates-required	Elément DIV	Conteneur pour le message *indique nécessaire en haut du formulaire.
.mc-field-group .asterisk	Elément SPAN	Conteneur pour * sur les étiquettes nécessaires.

Messages de réponse (Ajax)

Sélecteur CSS	Nom / type	description
#mce-responses	Elément DIV	Conteneur pour les réponses d'erreur.
div.response	Elément DIV	Conteneur 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_error	Elément DIV	Div avec un message d'erreur placé sous les entrées ayant un problème.
input.mce_inline_error	Entrée(s)	La catégorie .mce_inline_error class est également ajoutée aux entrées pour ajouter une bordure rouge.
#mce-error-response	Message d'erreur	Conteneur pour les messages d'erreur sans entrée spécifique.
#mce-success-response	Message d'erreur	Conteneur pour un message de réussite.

Champs de date

Sélecteur CSS	Nom / type	Description
.datefield	Elément DIV	Conteneur pour champs de date.
.datefield input	Entrée(s)	Entrées de date par défaut.
.datefield .monthfield input	Entrée de texte	Entrée de texte de mois
.datefield .dayfield input	Entrée de texte	Entrée de texte de jour
.datefield .yearfield input	Entrée de texte	Entrée de texte d'année
.datefield .small-meta	Elément SPAN	Texte suggéré pour le format de la date (mm/jj/aaaa)

Champs d'adresse

Sélecteur CSS	Nom / type	Description
.mc-address-group	Elément DIV	Groupe 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 CSS	Nom / type	Description
.phonefield-us	Elément DIV	Elément conteneur pour les entrées du champ téléphonique.
.phonefield-us .phonearea input	Entrée de texte	Entrée du code téléphonique
.phonefield-us .phonedetail1 input	Entrée de texte	Entrée pour les trois premiers chiffres des numéros de téléphone aux États-Unis.
.phonefield-us .phonedetail2 input	Entrée de texte	Entrée pour les quatre derniers chiffres des numéros de téléphone américains.
.phonefield-us .small-meta	Elément SPAN	Texte suggéré pour le format de saisie du téléphone (###) ###-####