AideQuickBooksIntuitHooks 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 CSS | Nom/Type | Description |
|---|---|---|
| #mc_embed_signup | Élément DIV | Cet é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 FORMULAIRE | Ce 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 champs | Groupe de champs | Enveloppe 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-group | Libellés | Sélecteur de libellé par défaut. Utilisez cette option pour personnaliser la plupart des étiquettes des documents. |
| entrée div.MC-field-groupe | Entré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 champs | Menus déroulants | Sélectionner par défaut (liste déroulante) : Utilisez cette option pour personnaliser tous les menus déroulants. |
| entrée.bouton | Bouton Envoyer | Utilisez ce sélecteur pour personnaliser le bouton d'envoi. |
Cases à cocher et boutons radio
| Sélecteur de CSS | Nom/Type | Description |
|---|---|---|
| div.mc-field-groupe.inbit-groupe | Élément DIV | Conteneur DIV principal pour les groupes de cases à cocher/de radio. |
| div.mc-field-group.inbit-groupe forte | Tag en gras | Sert à personnaliser le libellé du champ extérieur pour un groupe de cases à cocher/radio. |
| div.mc-field-group.input-groupe ul | Élément UL | Conteneur 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-group | Case à cocher/Libellés radio | Case à 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-groupe | Case à cocher/entrées radio | Case à cocher/sélection de groupes par défaut. |
Champs obligatoires
| Sélecteur de CSS | Nom/Type | Description |
|---|---|---|
| .indique-obligatoire | Élément DIV | Conteneur pour le message « *indique un champ obligatoire » en haut du formulaire. |
| Astérisque | Élément SPAN | Conteneur pour « * » (astérisque) sur les étiquettes obligatoires. |
Messages de réponse (Ajanais)
| Sélecteur de CSS | Nom/Type | Description |
|---|---|---|
| #mce-réponses | Élément DIV | Conteneur pour les réponses d'erreur. |
| réponse.div. | Élément DIV | Conteneur 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 DIV | Div avec un message d'erreur situé au-dessous des entrées qui présentent un problème. |
| entrant.mce_inline_error | Entrée(s) | La classe .mce_inline_error est également ajoutée aux entrées pour ajouter une bordure rouge. |
| #mce-error-response | Message d’erreur | Conteneur pour message d'erreur non spécifique aux intrants. |
| #mce-success-response | Message de réussite | Conteneur pour message de réussite. |
Champs de date
| Sélecteur de CSS | Nom/Type | Description |
|---|---|---|
| Datefield | Élément DIV | Conteneur pour les champs de date. |
| Entrée .datefield | Entrée(s) | Entrées de la date par défaut. |
| Entrée .datefield .moisfield | Entrée du texte | Saisie du texte du mois |
| Entrée .datefield .dayfield | Entrée du texte | Entrée du texte du jour |
| Entrée .datefield . gérer | Entrée du texte | Entrée du texte de l'année |
| .datefield .petits-méta | Élément SPAN | Texte de l'indice pour le format de date (jj/mm/aaaa) |
Champs d'adresse
| Sélecteur de CSS | Nom/Type | Description |
|---|---|---|
| .mc-adresse-groupe | Élément DIV | Groupe 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 CSS | Nom/Type | Description |
|---|---|---|
| .phonefield-us | Élément DIV | Conteneur pour les champs téléphoniques |
| entrée .phonefield-us .phonearea | Entrée du texte | Entrée de l’indicatif régional. |
| entrée .phonefield-us .phonetail1 | Entrée du texte | Entrez les 3 premiers chiffres des numéros de téléphone américains. |
| entrée .phonefield-us .phonetail2 | Entrée du texte | Entrée pour les 4 derniers chiffres des numéros de téléphone américains. |
| Small-Meta | Élément SPAN | Infos pour le format de saisie téléphonique (###) ###-##### |
Sur le même sujet
- CSS en HTML E-mailde QuickBooks
- Utiliser le site Web CSS InLinede QuickBooks
- Dépannage de votre premier e-mailde QuickBooks
- À propos des options du formulaire d'inscriptionde QuickBooks