Personnalisation avancée du formulaire
Les utilisateurs de comptes payants peuvent utiliser un mode avancé pour modifier des formulaires d'inscription hébergés par Mailchimp. Apprenez comment passer à ce mode avancé et ce que vous pouvez modifier.
Faites le boulot avec un pro
De la formation aux services marketing complets, notre communauté de partenaires peut vous aider à faire avancer les choses.
Crochets de CSS pour la personnalisation de formulaires
Copier l'URL de l'article
Il a été copié
Chaque audience Mailchimp est fournie avec un formulaire d’inscription hébergé qui peut être personnalisé à l’aide de notre créateur de formulaire. Pour les utilisateurs disposant d’un plan payant qui souhaitent davantage de contrôle sur l’apparence de leur formulaire d’inscription hébergé, Mailchimp dispose d’un mode avancé qui permet d’accéder au code du formulaire. Utilisez les hooks CSS dans le code de formulaire pour modifier les éléments frontaux de votre formulaire d’inscription à l’aide du code des sources côté serveur.
Dans cet article, nous allons définir les hooks CSS et CSS, partager les outils de développement les plus populaires et fournir des tableaux de référence avec les crochets CSS que vous pouvez utiliser sur un formulaire d’inscription Mailchimp.
Remarques
Voici ce qu'il faut savoir avant de commencer ce processus.
- Il s'agit d'une fonctionnalité avancée qui est recommandée pour les utilisateurs ayant une certaine connaissance du codage personnalisé. Contactez votre développeur ou faites appel aux services d'un expert Mailchimp si vous avez besoin d'aide.
- Si vous avez peu ou pas d'expérience en codage personnalisé, vous pouvez utiliser le créateur de formulaire pour créer, concevoir et traduire votre formulaire d'inscription hébergé.
- Les formulaires d'inscription de Mailchimp peuvent contenir jusqu'à 30 champs d'audience personnalisés. Le plan Premium comprend jusqu'à 80 champs d'audience personnalisés.
Définitions
Éléments (HTML)
Les éléments en HTML sont tous les composants qui composent 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 placés.
CSS
CSS (Cascading Style Sheets) est un langage de feuille de style qui contrôle la manière dont les éléments sont présentés sur une page Web. Il peut être utilisé pour le style du texte, l’attribution d’éléments à des parties spécifiques d’une page, la création d’animations, etc. Consultez cette introduction au langage CSS de W3Schools.
Sélecteur CSS
Les sélecteurs CSS sont utilisés pour identifier les éléments que vous souhaitez personnaliser. Il existe 5 catégories de sélecteur qui sont généralement basées sur le nom d’un élément, une classe ou un ID.
Hook CSS
Un hook CSS connecte les bibliothèques de contenu côté serveur aux éléments HTML sur une page Web via CSS.
Outils de développement
La plupart des navigateurs Web modernes sont dotés d’une console de développement qui permet de déboguer les problèmes, de consigner les erreurs et d’aider à tester le code. Après avoir ajouté des hooks CSS au code de votre formulaire, utilisez l’une des extensions de développeur suivantes pour voir vos modifications en temps réel.
Firefox Developer Tools est une puissante extension de développement Web pour Firefox.
DevTools est une suite de développement basée sur navigateur disponible dans Microsoft Edge. Pour les utilisateurs d’Internet Explorer, F12 Developer Tools est un produit similaire qui fonctionne avec toutes les versions d’Internet Explorer.
Chrome DevTools fait partie des outils de développement 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.
Styles globaux des formulaires
| Sélecteur CSS | Nom / type | Description |
|---|---|---|
| #mc_embed_signup | Élément DIV | Cet élément DIV s’enroule autour du formulaire. Utilisez ce sélecteur devant les autres sélecteurs suivants pour vous assurer que les styles sont appliqués (p. ex. #mc_embed_signup .mc-field-group) |
| #mc-embedded-subscribe-form | Élément FORMULAIRE | Utilisez ce sélecteur pour définir des styles sur l’élément de formulaire principal. Utile pour augmenter le rembourrage autour des éléments de forme. |
| div.mc-field-group | Champ « 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 de groupe de champs.mc ont également une classe .size1of2, ce qui les rend de moitié, permettant 2 champs 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 Submit (Envoyer) | Utilisez ce sélecteur pour donner un style au bouton Submit (Envoyer). |
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 à cocher / 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 à cocher / radio. |
| div.mc-field-group.input-group ul | Élément UL | Conteneur de liste non ordonnée pour les groupes de cases à cocher / radio. |
| div.mc-field-group.input-group ul li | Élément LI | Élément de liste contenant l’étiquette et l’entrée (groupes de cases à cocher/radio) |
| div.mc-field-group.input-group label | Étiquettes de cases à cocher / radio | Sélecteur d’étiquette de groupes de cases à cocher / radio par défaut. Remarque : L’étiquette vient après l’entrée dans les groupes de cases à cocher / radio. |
| div.mc-field-group.input-group input | Entrées de cases à cocher / radio | Sélecteur d’entrée de groupes de cases à cocher / radio par défaut. |
Champs obligatoires
| Sélecteur CSS | Nom / type | Description |
|---|---|---|
| .indicates-required | Élément DIV | Conteneur pour le message « *indique obligatoire » en haut du formulaire. |
| .mc-field-group .asterisk | Élément SPAN | Conteneur pour « * » (astérisque) sur les étiquettes obligatoires. |
Messages de réponse (Ajax)
| Sélecteur CSS | Nom / type | Description |
|---|---|---|
| #mce-responses | Élément DIV | Conteneur pour les réponses d’erreur. |
| div.response | Élé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 JavaScript écrira sous la forme d’un style en ligne « display:block; » pour afficher les messages si nécessaire. |
| div.mce_inline_error | Élément DIV | Div avec message d’erreur placé sous les entrées qui présentent un problème. |
| input.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 les messages d’erreur sans entrée spécifique. |
| #mce-success-response | Message de confirmation | Conteneur pour un message de réussite. |
Champs de date
| Sélecteur CSS | Nom / type | Description |
|---|---|---|
| .datefield | Élé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 du jour |
| .datefield .yearfield input | Entrée de texte | Entrée de texte de l’année |
| .datefield .small-meta | Élément SPAN | Texte suggéré pour le format de la date (jj/mm/aaaa) |
Champs d'adresse
| Sélecteur CSS | Nom / type | Description |
|---|---|---|
| .mc-address-group | Élé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 | Élément DIV | Élément conteneur pour les entrées du champ téléphonique. |
| .phonefield-us .phonearea input | Entrée de texte | Entrée de l’indicatif 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 | Élément SPAN | Texte suggéré pour le format de saisie du téléphone (###) ###-#### |
Assistance technique
Vous avez une question?
Les utilisateurs payants peuvent se connecter pour accéder à l'assistance par e-mail et chat.
Connexes
Déterminer l'emplacement de la page Web d'inscription
Configurez votre formulaire Mailchimp pour suivre la page Web sur laquelle les abonnés s'inscrivent. Découvrez le code HTML et les autres étapes nécessaires pour démarrer.