Newsletters : Modifier l'apparence du formulaire d'inscription MailChimp

Maintenant que nous avons créé notre formulaire d'inscription avec Mailchimp, voici un petit article pour modifier son apparence et l'accorder à son blog !

C'est parti pour les explications ! :)

Où ajouter le code CSS

Cliquez sur Mise en Page à partir du tableau de bord Blogger. Cliquez sur Modifier sur le gadget HTML/JavaScript qui contient votre formulaire d'inscription :

Repérez les lignes suivantes :

<style type="text/css">

et

</style>

C'est entre ces 2 lignes de code que nous allons insérer le code CSS pour le formulaire d'inscription :

Tout d'abord supprimez le contenu surligné en vert ci-dessus.
Collez les lignes suivantes entre <style type="text/css"> et </style> :

#mc_embed_signup form {
  display: block;
  position: relative;
  text-align: left;
  padding: 0;
}

#mc_embed_signup .mc-field-group {
  width: 99.5% !important;   /* Restreint la taille des champs de saisie à 100% */
  padding-bottom: 0;
  min-height: 30px;
}

Comme ceci :

Vous ne verrez pas une grande différence visuelle. Nous allons ajouter les codes CSS petit à petit avant la ligne </style>.

Le fond et la bordure du formulaire

Pour modifier le fond, ajouter une bordure au formulaire, collez le code suivant à la suite des codes CSS, avant </style> :

/* Fond du formulaire */
#mc_embed_signup {
  background: #ffffff;   /* Couleur de fond du formulaire */
  border: 2px solid #f5eddc;   /* Bordure du formulaire | Epaisseur = 2px ; style = solid ; couleur =  #f5eddc */
  clear: left;
  padding: 20px;   /* Espacement entre contenu et bords du formulaire */
  max-width: 100%;   /* Restreint la largeur du formulaire à 100% de la barre latérale */
}

Changez la couleur du fond en remplaçant le code couleur #ffffff par ce que vous voulez.
Le site code-couleur est un site web très utile pour trouver le code d'une couleur ;)

Pour la bordure, vous pouvez modifier l'épaisseur en changeant la valeur de 2px, le style en changeant solid, et la couleur et changeant le code couleur.
Si vous ne voulez pas de bordure, remplacez la ligne :

border: 2px solid #f5eddc;   /* Bordure du formulaire | Epaisseur = 2px ; style = solid ; couleur =  #f5eddc */

Par :

border: none;

padding représente l'espacement entre le bord du formulaire et son contenu. vous pouvez également changer cette valeur comme vous le souhaitez.

Visuellement on obtient :

Titre du formulaire

Si vous avez ajouté un titre au formulaire via Mailchimp, voici comment modifier son apparence.
Collez le code CSS suivant à la suite des codes CSS précédents :

/* Titre du formulaire */
#mc_embed_signup h2 {
  font-family: 'Merriweather', serif;   /* Police du titre */
  font-weight: 300;   /* Epaisseur de la police du titre */
  font-size: 14px;   /* Taille de la police du titre */
  text-align: center;   /* Alignement de la police du titre */
  text-transform: uppercase;   /* Texte en majuscules | normal = par défaut */
  letter-spacing: 2px;   /* Espacement des caractères du titre */
  color: #46606d;   /* Couleur du titre */
  padding: 0;
  margin: 0 0 16px;
}

Vous pouvez modifier la police, la couleur du titre, sa taille, son alignement, en suivant les commentaires en orange.

Visuellement on obtient :

Champ "* indique requis"

Pour cacher le texte qui explique que l'astérisque représente un champ requis, collez le code suivant à la suite des précédents :

/* Encart texte requis */
.indicates-required {
  display: none;   /* Cache l'encart texte requis  */
}

Visuellement on obtient :

Les titres des champs de saisie

Pour modifier l'apparence des titres des champs de saisie collez le code suivant à la suite des précédents :

/* Titres des champs de saisie */
#mc_embed_signup .mc-field-group label {
  font-family: 'Merriweather', serif;   /* Police du titre */
  font-weight: 300;   /* Epaisseur de la police du titre */
  font-size: 12px;   /* Taille de la police du titre */
  text-align: left;   /* Alignement de la police du titre */
  letter-spacing: 1px;   /* Espacement des caractères du titre */
  color: #46606d;   /* Couleur du titre */
  padding: 0;
  margin: 0 0 6px;
}

Vous pouvez modifier la police, la couleur du titre, sa taille, son alignement, en suivant commentaires en orange.

Vous pouvez également cacher ces titres en remplaçant le code ci-dessus par celui-ci :

/* Titres des champs de saisie */
#mc_embed_signup .mc-field-group label {
  display: none;   /* Cache les titres des champs de saisie */
}

Avec ce dernier code, on obtient visuellement :

Ajouter du texte aux champs de saisie

On peut insérer un texte dans les champs pour expliquer à quoi correspond le champ, surtout si on a caché les titres des champs ;)
Dans le gadget HTML/JavaScript de votre formulaire, appuyez sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît collez le titre de votre champ de saisie et appuyez sur Entrer.

Par exemple, le titre de mon champ de saisie pour le prénom était Prénom, et le titre de mon champ de saisie pour l'e-mail était Adresse e-mail :

Cherchez le code value="" qui se trouve juste après le titre de votre champ de saisie et ajoutez votre texte entre les "".

Par exemple, j'ajoute Prénom au champ de saisie pour le prénom et E-mail pour le champ de saisie pour l'e-mail :

Visuellement on obtient :

Modifier l'apparence des champs de saisie et de leur texte

Il est possible de modifier l'apparence des champs de saisie et de leur texte. Pour cela, collez le code CSS suivant à la suite des précédents, juste avant la ligne </style> :

/* Champs de saisie et texte */
#mc_embed_signup .mc-field-group input {
  font-family: 'Open sans', sans-serif;   /* Police du texte des champs de saisie */
  font-size: 13px;   /* Taille de la police du texte des champs de saisie */
  font-weight: 400;   /* Epaisseur du texte des champs de saisie */
  letter-spacing: 1px;   /* Espacement des caractères du texte */
  color: #46606d;   /* Couleur du texte */
  background-color: #ffffff;   /* Couleur de fond du champ de saisie */
  display: block;
  width: 100%;   /* Largeur du champ de saisie */
  padding: 8px 0;   /* Espace autour du texte dans le champ de saisie | 8px = au-dessus et en-dessous; 0 = à gauche et à droite */
  margin: 10px 0;   /* Espace autour du champ de saisie | 10px = au-dessus et en-dessous; 0 = à gauche et à droite */
  text-align: center;   /* Alignement du texte */
  text-indent: 0;
  border: 2px solid #f5eddc;   /* Bordure du champ de saisie | Epaisseur = 2px ; style = solid ; couleur =  #f5eddc */
}

Vous pouvez modifier la police, la couleur du texte, sa taille, son alignement, la largeur du champ de saisie, l'espace autour du texte, et sa bordure en suivant les commentaires en orange.

Si vous ne voulez pas de bordure, remplacez la ligne :

border: 2px solid #f5eddc;   /* Bordure du champ de saisie | Epaisseur = 2px ; style = solid ; couleur =  #f5eddc */

Par :

border: none;

Visuellement on obtient :

Modifier le texte du bouton valider

Pour modifier le texte du bouton valider, cherchez dans le code HTML de votre formulaire (Ctrl + F) le code suivant :

type="submit"

Cherchez ensuite le code value="" qui se trouve juste après submit. Ce code contient entre "" le texte à afficher sur le bouton valider. Vous pouvez le changer en ce que vous voulez. Par exemple, pour changer le texte en S'inscrire, j'écris comme ceci :

Modifier l'apparence du bouton valider

Pour modifier l'apparence du bouton valider, collez le code CSS suivant à la suite des précédents :

/* Bouton valider */
#mc_embed_signup .button {
  background-color: #46606d;   /* Couleur de fond du bouton valider */
  font-family: 'Merriweather', serif;   /* Police du bouton valider */
  font-size: 13px;   /* Taille de la police du bouton valider */
  font-weight: 300;   /* Epaisseur de la police du bouton valider */
  text-transform: uppercase;   /* Texte en majuscules | normal = par défaut */
  letter-spacing: 2px;   /* Espacement des caractères du texte */
  color: #ffffff;   /* Couleur du texte */
  border: none;   /* Supprime la bordure autour du bouton valider */
  border-radius: 0;   /* Supprime l'arrondi du bouton valider */
  height: 38px;   /* Hauteur du bouton valider */
  width: 100%;   /* Largeur du bouton valider */
  margin: 2px 0;
  padding: 0;
  text-align: center;   /* Alignement du texte */
  text-decoration: none;
}

De même que pour les codes précédents, vous pouvez changer la police, la couleur du texte, la couleur du fond, la bordure, etc, en suivant les commentaires en orange ;)

Visuellement on obtient :

Modifier l'apparence du bouton valider au survol de la souris

Pour modifier l'apparence du bouton valider au survol de la souris, collez le code suivant à la suite des précédents :

/* Bouton valider quand survolé par la souris */
#mc_embed_signup .button:hover {
  background-color: #f5eddc;   /* Fond du bouton valider quand survolé par la souris */
  color: #46606d;   /* Couleur du texte du bouton valider quand survolé par la souris */
}

Vous pouvez changer la couleur de fond et la couleur du texte en remplaçant les valeurs données. Vous pouvez également changer la police, ou ajouter une bordure par exemple en ajoutant les codes correspondants avant le signe }.

Visuellement au survol de la souris, on obtient :

Et voilà ! Vous savez maintenant comment modifier l'apparence du formulaire d'inscription pour qu'il s'accorde au design de votre blog ;)

En bonus, voici un 2e exemple d'apparence que j'ai réalisé pour vous :

Pour appliquer cette apparence, sélectionner tout le CSS entre <style type="text/css"> et </style> et remplacez-le par celui-ci :

#mc_embed_signup form {
  display: block;
  position: relative;
  text-align: left;
  padding: 0;
}

#mc_embed_signup .mc-field-group {
  width: 99.5% !important;   /* Restreint la taille des champs de saisie à 100% */
  padding-bottom: 0;
  min-height: 30px;
}

/* Fond du formulaire */
#mc_embed_signup {
  background: #cad66a;   /* Couleur de fond du formulaire */
  clear: left;
  padding: 20px;   /* Espacement entre contenu et bords du formulaire */
  max-width: 100%;   /* Restreint la largeur à 100% de la barre latérale */
}

/* Titre du formulaire */
#mc_embed_signup h2 {
  font-family: 'Open sans', sans-serif;   /* Police du titre */
  font-weight: 600;   /* Epaisseur de la police du titre */
  font-size: 16px;   /* Taille de la police du titre */
  text-align: center;   /* Alignement de la police du titre */
  text-transform: uppercase;   /* Texte en majuscules | normal = par défaut */
  letter-spacing: 2px;   /* Espacement des caractères du titre */
  color: #ffffff;   /* Couleur du titre */
  padding: 0;
  margin: 0 0 18px;
}

/* Encart texte requis */
.indicates-required {
  display: none;   /* Cache l'encart texte requis  */
}

/* Titres des champs de saisie */
#mc_embed_signup .mc-field-group label {
  display: none;   /* Cache les titres des champs de saisie */
}

/* Champs de saisie et texte */
#mc_embed_signup .mc-field-group input {
  font-family: 'Open sans', sans-serif;   /* Police du texte des champs de saisie */
  font-size: 14px;   /* Taille de la police du texte des champs de saisie */
  font-weight: 600;   /* Epaisseur du texte des champs de saisie */
  text-transform: uppercase;   /* Texte en majuscules | normal = par défaut */
  letter-spacing: 2px;   /* Espacement des caractères du texte */
  color: #46606d;   /* Couleur du texte */
  background-color: #ffffff;   /* Couleur de fond du champ de saisie */
  display: block;
  width: 100%;   /* Largeur du champ de saisie */
  padding: 15px 0;   /* Espace autour du texte dans le champ de saisie | 15px = au-dessus et en-dessous; 0 = à gauche et à droite */
  margin: 15px 0;   /* Espace autour du champ de saisie | 15px = au-dessus et en-dessous; 0 = à gauche et à droite */
  text-align: center;   /* Alignement du texte */
  text-indent: 0;
  border: none;   /* Supprime la bordure autour du champ de saisie */
}

/* Bouton valider */
#mc_embed_signup .button {
  background-color: #ffffff;   /* Couleur de fond du bouton valider */
  font-family: 'Open sans', sans-serif;   /* Police du bouton valider */
  font-size: 14px;   /* Taille de la police du bouton valider */
  font-weight: 600;   /* Epaisseur de la police du bouton valider */
  text-transform: uppercase;   /* Texte en majuscules | normal = par défaut */
  letter-spacing: 2px;   /* Espacement des caractères du texte */
  color: #ACB658;   /* Couleur du texte */
  border: none;   /* Supprime la bordure autour du bouton valider */
  border-radius: 0;   /* Supprime l'arrondi du bouton valider */
  height: 47px;   /* Hauteur du bouton valider */
  width: 100%;   /* Largeur du bouton valider */
  margin: 0 0 6px;
  padding: 0;
  text-align: center;   /* Alignement du texte */
  text-decoration: none;
}

/* Bouton valider quand survolé par la souris */
#mc_embed_signup .button:hover {
  background-color: #46606D;   /* Fond du bouton valider quand survolé par la souris */
  color: #ffffff;   /* Couleur du texte du bouton valider quand survolé par la souris */
}