Crochets de CSS pour la personnalisation de formulaires

Dans MailChimp, vous pouvez facilement créer un signup form (Formulaire d'inscription) avec jusqu'à 30 champs personnalisés. Donc, en plus de "l'adresse email," vous pouvez également recueillir des données comme un "prénom," un "nom," une "entreprise," et un "titre." En utilisant le CSS, vous pouvez personnaliser l'aspect et l'impression dégagée par votre formulaire.

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é. Pour un aperçu général de la façon dont Firebug fonctionne, jetez un oeil à cette vidéo.

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 inputEntré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 (###) ###-####
Cet article vous a-t-il été utile ?
Y a-t-il autre chose que nous puissions faire pour améliorer notre site?

Assistance technique