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 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 (###) ###-#### |