Arrêt de QuickBooks en France : QuickBooks, QuickBooks Expert-Comptable et le service client ne seront plus disponibles en France après le 29 décembre 2023. En savoir plus.
QuickBooks HelpAideQuickBooksIntuit

Hooks CSS pour personnalisation des formulaires

by Intuit Mis à jour 7 moiss

Pour chaque public Mailchimp, un formulaire d'inscription est disponible, à personnaliser à l'aide de l'outil de création de formulaire. Pour les utilisateurs d'un abonnement payant qui souhaitent avoir plus de contrôle sur l'apparence de leur formulaire d'inscription, Mailchimp propose un mode avancé qui permet l'accès au code du formulaire. Utilisez les hooks CSS dans le code du document pour modifier les éléments en entrée de votre formulaire d'inscription à l'aide du code provenant de sources sur le serveur.

Dans cet article, nous définirons les hooks CSS et CSS, partagerons les outils de développement populaires et fournirons des tableaux de référence avec les hooks CSS à utiliser sur un formulaire d'inscription Mailchimp.

Infos sur

Voici quelques choses à savoir avant de passer à cette étape.

  • Il s'agit d'une fonctionnalité avancée recommandée aux utilisateurs qui utilisent le codage personnalisé. Contactez votre développeur ou faites appel à un expert Mailchimp si vous avez besoin d'aide.
  • Si vous avez peu ou pas d'expérience en matière de codage personnalisé, vous pouvez utiliser l' outil de création de formulaire pour créer, concevoir et traduire votre formulaire d'inscription envoyé par.
  • Les formulaires d'inscription de Mailchimp peuvent contenir jusqu'à 30 champs personnalisés. L' abonnement Premium comprend jusqu'à 80 champs d'audit personnalisés.

Définitions

Éléments (HTML)
Les éléments en HTML sont tous les composants d'une page Web. Ils peuvent contenir des données, du texte, des images ou rien en fonction des propriétés et des attributs qui y sont renseignés.

CSS
CSS (Cascadeing Style Sheets) est un langage de feuille de style qui contrôle la présentation des éléments sur une page Web. Vous pouvez l'utiliser pour styliser le texte, attribuer des éléments à certaines pages d'une page donnée, créer des animations, et plus encore. Consultez cette présentation CSS de W3Schools.

Sélecteur de CSS
Les sélectionneurs vous permettent d'identifier les éléments à personnaliser. Les cinq catégories de sélection sont généralement basées sur le nom, la classe ou le numéro d'identification d'un élément.

Hook CSS
Un hook CSS sert à connecter les bibliothèques de contenu côté serveur aux éléments HTML d'une page Web via CSS.

Outils de développement

La plupart des navigateurs Web récents sont accompagnés d'une console de développement qui permet de déboguer les données et d'enregistrer les erreurs, et de prendre en charge le test de code. Après avoir ajouté les hooks CSS à votre code de document, utilisez l'une des extensions de développeur suivantes pour voir vos modifications en temps réel.

Firefox Developper Tools est une importante extension de développement Web pour Firefox.

DevTools est une suite de développement basée sur un navigateur disponible dans Microsoft Edge. Pour les utilisateurs Internet Explorer, F12 développeur Outils est un produit similaire qui fonctionne avec toutes les versions d’Internet Explorer.

Chrome DevTools fait partie des outils développeur de Google Chrome.

Tableaux de référence

Les tableaux suivants contiennent des hooks CSS que vous pouvez utiliser pour personnaliser vos formulaires d'inscription.

Formez les styles globaux

Sélecteur de CSSNom/TypeDescription
#mc_embed_signupÉlément DIVCet élément DIV enveloppe le document. Utilisez ce sélecteur devant les autres sélections suivantes pour vous assurer que les styles sont bien appliqués. (par exemple, #mc_embed_signup .mc-field-group)
#MC-embeded-abonne-formÉlément de FORMULAIRECe champ vous permet de définir les styles sur l'élément principal du document. Utile pour augmenter le rembourrage des éléments du formulaire.
div.mc-groupe de champsGroupe de champsEnveloppe pour chaque libellé et combinaison d'entrées sur les formulaires avec plus d'un champ. Utilisez cette option pour contrôler l'espace horizontal et vertical (remplissage) entre les entrées. Certains éléments .mc-field-group ont également une classe .dimension1of2, ce qui les réduit à mi-taille, autorisant l'affichage de 2 champs par ligne.
étiquette div.MC-field-groupLibellésSélecteur de libellé par défaut. Utilisez cette option pour personnaliser la plupart des étiquettes des documents.
entrée div.MC-field-groupeEntrée(s)Sélecteur d'entrées par défaut. Utilisez cette option pour personnaliser la plupart des entrées de formulaire.
sélection du groupe de champsMenus déroulantsSélectionner par défaut (liste déroulante) : Utilisez cette option pour personnaliser tous les menus déroulants.
entrée.boutonBouton EnvoyerUtilisez ce sélecteur pour personnaliser le bouton d'envoi.

Cases à cocher et boutons radio

Sélecteur de CSSNom/TypeDescription
div.mc-field-groupe.inbit-groupeÉlément DIVConteneur DIV principal pour les groupes de cases à cocher/de radio.
div.mc-field-group.inbit-groupe forteTag en grasSert à personnaliser le libellé du champ extérieur pour un groupe de cases à cocher/radio.
div.mc-field-group.input-groupe ulÉlément ULConteneur de liste désordonné pour les groupes de cases à cocher/de radio.
div.mc-field-group.input-groupe ul liÉlément LIÉlément de l'article de liste contenant le libellé et les données entrées. (cases à cocher/groupes de radio)
étiquette div.mc-field-group.inbit-groupCase à cocher/Libellés radioCase à cocher/sélection d'étiquettes par défaut Note : Le libellé apparaît après l'entrée dans les groupes de cases à cocher ou de radio.
entrée div.mc-field-group.inbit-groupeCase à cocher/entrées radioCase à cocher/sélection de groupes par défaut.

Champs obligatoires

Sélecteur de CSSNom/TypeDescription
.indique-obligatoireÉlément DIVConteneur pour le message « *indique un champ obligatoire » en haut du formulaire.
AstérisqueÉlément SPANConteneur pour « * » (astérisque) sur les étiquettes obligatoires.

Messages de réponse (Ajanais)

Sélecteur de CSSNom/TypeDescription
#mce-réponsesÉlément DIVConteneur pour les réponses d'erreur.
réponse.div.Élément DIVConteneur de message de réponse par défaut. Ce champ doit être défini sur « Afficher : aucun ; » par défaut afin qu'ils ne s'affichent pas comme cases vides. Le code Javascript apparaîtra dans le style « Display:block ; » pour afficher les messages au besoin.
div.mce_inline_errorÉlément DIVDiv avec un message d'erreur situé au-dessous des entrées qui présentent un problème.
entrant.mce_inline_errorEntrée(s)La classe .mce_inline_error est également ajoutée aux entrées pour ajouter une bordure rouge.
#mce-error-responseMessage d’erreurConteneur pour message d'erreur non spécifique aux intrants.
#mce-success-responseMessage de réussiteConteneur pour message de réussite.

Champs de date

Sélecteur de CSSNom/TypeDescription
DatefieldÉlément DIVConteneur pour les champs de date.
Entrée .datefieldEntrée(s)Entrées de la date par défaut.
Entrée .datefield .moisfieldEntrée du texteSaisie du texte du mois
Entrée .datefield .dayfieldEntrée du texteEntrée du texte du jour
Entrée .datefield . gérerEntrée du texteEntrée du texte de l'année
.datefield .petits-métaÉlément SPANTexte de l'indice pour le format de date (jj/mm/aaaa)

Champs d'adresse

Sélecteur de CSSNom/TypeDescription
.mc-adresse-groupeÉlément DIVGroupe d'adresses contenant l'élément. Le style des éléments individuels du formulaire d'adresse est identique aux éléments du document général répertoriés ci-dessus.

Champs téléphoniques (États-Unis)

Sélecteur de CSSNom/TypeDescription
.phonefield-usÉlément DIVConteneur pour les champs téléphoniques
entrée .phonefield-us .phoneareaEntrée du texteEntrée de l’indicatif régional.
entrée .phonefield-us .phonetail1Entrée du texteEntrez les 3 premiers chiffres des numéros de téléphone américains.
entrée .phonefield-us .phonetail2Entrée du texteEntrée pour les 4 derniers chiffres des numéros de téléphone américains.
Small-MetaÉlément SPANInfos pour le format de saisie téléphonique (###) ###-#####