Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

Visuellement on obtient :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 l'apparence du formulaire d'inscription MailChimp sur Blogger

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 formulaire d'inscription MailChimp sur Blogger

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 formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 :

Modifier l'apparence du formulaire d'inscription MailChimp sur Blogger

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 */
}

Autres articles

87 commentaires:

  1. C'est vraiment super comme tuto. De toute façon, je suis fan de ton blog et de tes explications.
    Par contre, j'ai une barre blanche sous le titre, je ne sais pas trop comment l'enlever.
    Bises

    RépondreSupprimer
    Réponses
    1. Merci ! ^^
      La barre blanche est une bordure qui s'affiche sous tes titres de la barre latérale. Pour l'enlever du titre du gadget colles la ligne suivante :

      border: none; /* Supprime la bordure */

      Juste avant le signe } du code suivant :

      #mc_embed_signup h2 {
      font-family: 'Satisfy', cursive;
      font-weight: 600;
      font-size: 18px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      background: #F5D0A9;
      color: #FE642E;
      padding: 0;
      margin: 0 0 18px;
      }

      comme ceci :

      #mc_embed_signup h2 {
      font-family: 'Satisfy', cursive;
      font-weight: 600;
      font-size: 18px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      background: #F5D0A9;
      color: #FE642E;
      padding: 0;
      margin: 0 0 18px;
      border: none;
      }

      Et voilà ! ;)

      Supprimer
    2. Bonjour ! Déjà merci pour ce tuto, les explications sont niquel & mon blog commence enfin à ressembler à quelque chose (Y)
      J'ai le même problème avec la barre blanche j'ai bien lu ton commentaire pour l'enlever mais quand je cherche la ligne de code #mc_embed_signup h2 je ne la trouve pas :/
      Bonne soirée
      Bises !

      Supprimer
    3. Bonjour Marley,
      C'est normal que tu ne le trouves pas ;)
      Sur ton blog, le problème ne vient pas du titre mais de la marge qui se trouve autour de ton gadget d'inscription.

      Retrouve ce code CSS :

      /* Fond du formulaire */
      #mc_embed_signup {
      background: #FEFEFE; /* Couleur de fond du formulaire */
      border: none;
      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 */
      }

      Remplace 20px à la ligne :

      padding: 20px; /* Espacement entre contenu et bords du formulaire */

      Par 0. Si tu souhaites conserver la marge sur les côtés et sous le formulaire alors, remplace 20px par :

      padding: 0 20px 20px; /* Espacement entre contenu et bords du formulaire */

      Si tu souhaites déplacer le formulaire vers le haut ajoute cette ligne :

      margin-top: -20px;

      Avant le signe } de ce même code CSS :

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

      Remplace -20px par la valeur de ton choix. Une valeur plus grande, déplacera le formulaire vers le bas, et une valeur plus petite le déplacera vers le haut ;)

      Supprimer
  2. Hello,
    Merci beaucoup j'adore, je viens de le faire et ça fonctionne merci encore ma belle.
    Par contre ce qui me dérange c'est quand quelqu'un s'inscrit à ma newsletter il voit mon adresse postale : pas moyen de le cacher ?
    Bises

    RépondreSupprimer
    Réponses
    1. Bonjour Olivia,
      Oui c'est possible en allant dans Lists à partir de ton tableau de bord, cliques sur le nom de ta liste, puis sur Signup forms. Cliques sur Embedded forms puis sur the form builder pour retomber sur la page de création du formulaire.
      Sous Forms and response e-mails tu trouveras un menu déroulant. Par défaut il est sur Signup form. Cliques dessus et sélectionne Signup "thank you" page. Ici tu peux voir la page de remerciements avant l'envoi de l'e-mail de confirmation. Cliques sur le texte et une fenêtre s'ouvrira. Tu devrais trouver une ligne qui ressemble à ceci :

      *|HTML:LIST_ADDRESS_HTML|*

      Supprimes-la puis cliques sur Save & Close en haut à droite de la fenêtre.
      Et voilà ! ;)
      Tu peux vérifier les autres pages en cliquant à nouveau sur le menu déroulant et en choisissant les différentes pages.

      Supprimer
    2. Bonsoir,
      ça y est, merci beaucoup ma belle. Grâce à toi mon blog beauté devient de plus en plus présentable.
      Il manque juste une chose pour qu'il soit parfait : c'est la modification du gadget Recherche. Aurais-tu une astuce pour rendre le bouton rechercher plus présentable ?
      Bises et merci encore

      Supprimer
  3. Salut Catherine, je voulais savoir comment faire pour changer la police d'un seul de mes titres de ma barre d'infos ?

    RépondreSupprimer
    Réponses
    1. Salut, que veux-tu dire par barre d'infos ?

      Supprimer
    2. Mon menu déroulant en fait

      Supprimer
    3. Dans le code HTML de ton menu il faut nommer le liens auquel tu veux ajouter une apparence spécifique.

      Par exemple, je veux donner changer la couleur d'un seul lien. Je peux le nommer bleu, et ajouter un code CSS associé à ce nom.
      Pour donner un nom à un élément on ajoutes :

      class="bleu"

      A l'élément (remplaces bleu par le nom de ton choix).
      Ici ton élément est un lien donc ajoutes ce code juste après "<a" du lien, comme ceci :

      <a class="bleu" title="Lien" href="http://adresseblog.blogspot.fr/lien.html">Lien</a>

      Ensuite dans le code CSS de ton thème ajoutes le code suivant :

      .bleu {
      color: #7BD0D8;
      }

      Remplaces color: #7BD0D8; par le CSS que tu souhaites appliquer au lien nommé "bleu".

      Et voilà ;)

      Supprimer
  4. Petite question , j'ai essayer en m'inscrivant à la newletters le soucis quand je confirme sa donne mon adresse postal ... Comment faire ? Je l'enleve pour le moment ..

    RépondreSupprimer
    Réponses
    1. Bonjour, comme pour Olivia, il faut aller dans Lists à partir de ton tableau de bord, cliques sur le nom de ta liste, puis sur Signup forms. Cliques sur Embedded forms puis sur the form builder pour retomber sur la page de création du formulaire.
      Sous Forms and response e-mails tu trouveras un menu déroulant. Par défaut il est sur Signup form. Cliques dessus et sélectionne Signup "thank you" page. Ici tu peux voir la page de remerciements avant l'envoi de l'e-mail de confirmation. Cliques sur le texte et une fenêtre s'ouvrira. Tu devrais trouver une ligne qui ressemble à ceci :

      *|HTML:LIST_ADDRESS_HTML|*

      Supprimes-la puis cliques sur Save & Close en haut à droite de la fenêtre.
      Et voilà ! ;)
      Tu peux vérifier les autres pages en cliquant à nouveau sur le menu déroulant et en choisissant les différentes pages.

      Supprimer
    2. Bonjour Catherine , j'ai lu le commentaire et effectué comme indiquer mais cela ne fonctionne pas l'adresse est toujours présente .. :/

      Supprimer
    3. C'est très bizarre, car si tu supprimes le code *|HTML:LIST_ADDRESS_HTML|* de toutes les pages il ne devrait plus apparaître :/

      Supprimer
  5. Yahou un grand merci, c'est installé, maintenant je dois agrémenter comme il se doit pour que ça se marie bien à mon blog.

    Merci encore

    RépondreSupprimer
  6. Coucou,
    Voilà, en suivant ton tutoriel, j'ai plus le mettre en français sans utiliser avec le site !
    Merci beaucoup !
    Pauline.

    RépondreSupprimer
  7. Encore une fois merci !

    Juste deux petites questions:

    - Impossible de changer la couleur de survol du bouton qui reste grise, tu saurais pourquoi?
    - Lorsque l'on tape son mail et son nom, les mots des champs pré-remplis sont à effacer, ils ne disparaissent pas automatiquement, est-ce normal ?

    Mon blog: http://www.julinfinity.com

    Encore merci ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Pour le bouton au survol, il manque le signe } à la fin du code CSS précédent. Rajoutes-le juste avant la ligne :

      /* Bouton valider quand survolé par la souris */

      Pour le texte, tu peux essayer d'ajouter le code suivant à l'intérieur de chaque champ de saisie :

      onfocus="if(this.value=='NOM'){this.value='';}" onblur="if(this.value==''){this.value='NOM';}"

      Ajoutes ce code après value="" et remplaces NOM par les mots que tu as rentré pour chaque champ.

      Par exemple pour le champ :

      <input type="text" value="MON PETIT NOM" name="LNAME" class="valid" id="mce-LNAME" aria-invalid="false">

      Ça donne :

      <input type="text" value="MON PETIT NOM" onfocus="ifundefinedthis.value=='MON PETIT NOM'){this.value='';}" onblur="ifundefinedthis.value==''){this.value='MON PETIT NOM';}" name="LNAME" class="valid" id="mce-LNAME" aria-invalid="false">

      Supprimer
    2. Hello!
      Merci pour ta réponse!
      Je n'ai pas réussi du coup j'ai changé la forme de l'encart en conservant le titre des champs, ça me convient aussi ! ^^

      Est-ce que tu saurais comment retirer le " * " par contre?

      Douce journée,

      Julie.

      Supprimer
    3. J'ai le même problème concernant les mots des champs de saisie pré-remplis qui ne s’effacent pas lorsque l'on tape du texte. J'ai essayé d'ajouter le code onfocus="if(this.value=='NOM'){this.value='';}" onblur="if(this.value==''){this.value='NOM';}"
      comme tu l'as expliqué, mais rien à faire ça ne fonctionne pas :/

      En tout cas merci quand même pour tous ces tutos ! :)

      Supprimer
    4. Finalement je me suis aidée d'une commentaire que je n'avais pas vu et j'ai remplacé le "value" juste avant "=Adresse mail" par "placeholder" ce qui fonctionne très bien :) Cependant, pour changer, j'ai encore une petite question. Lorsque je rentre une adresse mail pour m'inscrire et voir si cela fonctionne, le message "Presque fini... Nous devons confirmer votre adresse e-mail. Pour compléter le processus d'abonnement, veuillez cliquer sur le lien contenu dans l'e-mail que nous venons de vous envoyer." s'affiche. Or je ne reçois rien dans ma boîte mail. C'est censé être automatique ou ai-je oublié de cocher quelque chose sur mon compte mailchimp ?

      Supprimer
    5. Bonjour,
      C'est censé être automatique :/
      As-tu vérifié dans tes spams ?

      Supprimer
    6. Oui, et il n'y a rien :/ J'ai essayé avec une autre adresse, mais c'est la même chose... Peut-être devrais-je recommencer le tuto de A à Z ? O.o

      Supprimer
    7. Bonjour,
      Essaye de recommencer à partir de la création du formulaire directement sur Mailchimp :/

      Supprimer
  8. Tous tes articles sont vraiment très instructifs...c'est super de ta part de partager tes connaissances, en tant que blogueuse en herbe j'apprécie :)
    A quand un tuto pour insérer un slider sur blogger ? Haha j'en ai très envie sur mon blog !

    Bonne continuation...

    RépondreSupprimer
  9. Merci infiniment pour tes tutos ! Mon blog s'embellit grâce à toi !
    Des bisous,
    Ninis

    RépondreSupprimer
  10. Coucou :) j'adore ton blog vraiment !! Mais pourrais-tu faire un tuto pour modifier l'apparence de la boite souscription de feedburner vus que feedburner est dans les widgets proposés par Blogger et que beaucoup l'utilise (moi par exemple mdr) car j'ai réussie à changer la couleur de fond et enlever "Delivered by Feedburner" mais j'aimerai changer l'apparence du bouton etc... j'ai essayer avec les codes html de ce tutoriels ci dessus mais ça ne marche pas...
    Bisous, Clémentine

    RépondreSupprimer
    Réponses
    1. Bonjour Clémentine,
      C'est noté sur ma liste de tutoriels à faire ;)
      C'est normal que les codes de ce tutoriel ne marchent pas car les codes CSS ciblent un élément par son nom. Or le bouton de Feedburner à un nom différent du bouton de Mailchimp :)

      Supprimer
  11. Moi aussi, un tutoriel pour Feedburner m'intéresserait beaucoup ;)
    Je te remercie beaucoup pour tes tutoriels qui sont géniaux <3

    RépondreSupprimer
  12. Wahouuu newsletters sublimes et tutoriel magique! Mille fois merci!

    RépondreSupprimer
  13. Salut, merci beaucoup pour tes tutoriels j'adore !

    Par contre sur mon formulaire d'inscription, quand on clique pour remplir l'encart "E-mail" et qu'on clique en dehors sans l'avoir rempli il y a un encadré rouge foncé qui apparait et dit "Ce champs est requis."

    Est-ce que tu saurais comment le modifier pour le rendre moins moche ou le supprimer tout simplement ?

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. C'est une bonne question, je vais voir ;)

      Supprimer
  14. Hello,

    DEUX astuces :

    Je suis très perfectionniste et le "Adresse mail" restait quand on voulait taper son adresse mail. Il y a un moyen archi simple pour l'enlever dès qu'on écrit : Il faut remplacer le "value" juste avant "=Adresse mail" par "placeholder". (ça fait ainsi comme le widget "Recherche" pour ceux qui ont suivi le tuto de Cath =) )

    Autre Astuce (et en réponse au commentaire précédent) : si vous ne voulez pas de "error rentrer une adresse mail correcte" ou de "Champ Requis" en rouge : supprimez le dernier paragraphe du code donné par Mailchimp !
    ATTENTION néanmoins : il est précisé que cela peut engendrer du spam à cause de robots... ! ;)

    Merci pour ce tuto Cath, tu m'épateras toujours :)

    RépondreSupprimer
    Réponses
    1. Merci pour les astuces ;)
      J'ai pas eu le temps d'ajouter le placeholder à ce tuto ^^

      Supprimer
  15. Je viens de faire ton tuto, c'est génial! (surtout maintenant que grâce à toi, on peut envoyer des newsletters automatiques!!!!!!! :D)
    Merci 1000 fois! :D

    RépondreSupprimer
  16. Merci pour ce tuto et vive l'htlm et le code CSS !
    J'ai un problème pour ajuster le titre ''s'inscrire à la newsletter'' celui ci n'est pas centré par rapport au bouton s'inscrire ... je sais pas si tu vois ce que ça veut dire mais ça fait quelque chose comme ça :

    S'inscrire à la newsletter

    email

    valider

    Bonne journée !

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Le problème vient du champ e-mail et du bouton valider.
      Ils dépassent complètement de la zone de ta barre latérale, c'est donc normal que ton titre soit décalé.

      Dans ton code CSS tu as :

      #mc_embed_signup .mc-field-group input {
      font-family: 'Open sans', sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 1px;
      color: #46606d;
      background-color: #ffffff;
      display: block;
      width: 200%;
      padding: 8px 0;
      margin: 10px 0;
      text-align: center;
      text-indent: 0;
      border: 2px solid #f5eddc;
      }

      Remplace 200% à la ligne width par 100%.

      De même, remplace la valeur de width du code suivant pour 100% :

      #mc_embed_signup .button {
      background-color: #ffffff;
      font-family: 'Merriweather', georgia;
      font-size: 13px;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #d43389;
      border: none;
      border-radius: 0;
      height: 38px;
      width: 200%;
      margin: 2px 0;
      padding: 0;
      text-align: center;
      text-decoration: none;
      }

      Si tu souhaites augmenter la largeur de ton gadget il faut augmenter la largeur de ta barre latérale. Tu peux faire ceci dans Modèle > Personnaliser > Ajuster la largeur

      Remarque : les images de ta barre latérale dépassent également. Ce qui donne l'impression que ta barre latérale est large, mais c'est une erreur.
      Pour limiter la largeur des images à 100% de la largeur de la barre latérale, ajoute ce code CSS :

      aside img {
      max-width: 100%;
      height: auto
      }

      Supprimer
    2. Merci j'ai réussi à changer la taille :) et merci aussi pour ce deuxième tuto je vais m'empresser de le faire !

      Supprimer
  17. Salut Catherine !

    je te remerci énormement pour cet article qui m'a vraiment été bénéfique. je n'ai pas eu bcp de problème à suivre le step by step en image ( que tu a du avoir du mal à faire ). Du courage et bonne nuit

    RépondreSupprimer
  18. salut catherine merci pour ce tuto, juste une question au moment de cliquer sur "sbmit" un msg auto apparait "Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you." je veux le changer c'est possible?

    RépondreSupprimer
    Réponses
    1. Bonjour Hugo,
      Oui c'est possible. A l'étape "CRÉER UN FORMULAIRE DE CONTACT" du tutoriel précédent (http://ladybirdr.blogspot.fr/2015/04/newsletters-creer-un-formulaire.html), sur la page Embedded forms, clique sur The Form Builder.
      Sous "Forms and Response emails" tu trouveras un menu déroulant avec tous les e-mails et messages. Sélectionne ceux qui t'intéressent et modifie le texte dans la partie de droite.

      Supprimer
  19. Bonsoir,
    merci beaucoup pour tes tutos. Ils sont vraiment parfait.
    Grâce à toi, j'ai pu créer un formulaire de contact qui ressemble à quelquechose!
    Il est ici : http://lamaternelledetot.blogspot.fr/
    D'ailleurs, j'ai eu mon premier abonné un pendant que je rendais les boutons plus attractifs.
    Par contre, J'ai un ami qui ne parviens pas à s'abonner depuis un mac. Aurais-tu une idée du pourquoi de la chose ?
    ToT

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est très étrange. Il n'y a pourtant pas de raison que cela ne fonctionne pas sur Mac.
      Par contre sur le site de Mailchimp il est écrit que le formulaire fonctionne mal avec le navigateur Opéra. Si la personne à utilisé ce navigateur le problème peut venir de là :/

      Supprimer
  20. Merci merci merci pour ce super tuto!
    Je suis très heureuse d'avoir découvert ton blog que je vais parcourir de long en large!
    Mon blog a enfin un bouton Newsletter qui ressemble à quelque chose!

    RépondreSupprimer
  21. Merci pour ce tuto!
    J'ai un problème avec le message automatique qui apparait une fois le bouton "submit" cliqué. J'ai beau en changer l'apparence dans le menu de Mailchimp, il apparait en gras et vert fluo sur mon site... Des idées?
    Merci beaucoup !

    RépondreSupprimer
    Réponses
    1. Bonjour Alexia,
      Pour modifier l'apparence du message de succès utilise le code CSS suivant :

      /* Apparence du message de succès */
      #mc_embed_signup #mce-success-response {
      }

      Pour le message d'erreur utilise le code CSS suivant :

      /* Apparence du message d'erreur*/
      #mc_embed_signup #mce-error-response {
      }

      Colle ces codes à la suite de tes codes CSS qui définit l'apparence de ton formulaire d'inscription ;)

      Supprimer
  22. Coucou :)
    Merci pour tes tutos, ils sont juste dingues !
    Je viens de réaliser celui-là, mais je me retrouve face à un "petit problème".
    J'ai voulu tester l'inscription à la newsletter avec l'email de mon père ( donc un mail différent de celui du blog) et quand je complète les champs, on m'écrit " please enter a value " .. Qu'est ce que je dois faire ?
    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Lsou,
      Rencontres-tu toujours ce problème ?

      Supprimer
  23. Bonjour Catherine, merci pour ce tuto, j'ai pu enfin créer ma newsletter, tout va bien, sauf que le titre n’apparaît pas, je pense que les modifications seront faites si le titre réapparait. Lorsque j'ai crée ma newsletter j'ai bien mis un titre..je ne comprends pas :/ En plus j'ai mis exactement le même code que toi..

    RépondreSupprimer
  24. Bonjour , j'ai réussi a installer sur mon blog principal , mais la je travaille sur mon blog factice pour améliorer le design et quand je mets mon code je n'ai pas la barre s'inscrire qui s'affiche j'ai essayé en prenant ton code (vert) et pareil . Je ne vois pas d'ou vient le problème surtout que pour la barre de recherche qui est le même concept cela fonctionne. le blog qui ne fonctionne pas : https://choubydesign6.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a une erreur dans le code HTML de ton formulaire, le bouton valider "S'inscrire" est dans un contenant qui le cache. Retrouve le code CSS de ton formulaire commençant par :

      #mc_embed_signup .clear {

      Avant le signe } de ce code colle :

      visibility: visible;

      Sauvegarde et cela devrait marcher.

      Supprimer
  25. Bonjour, Merci beaucoup pour ce tuto. Par contre j'ai le même problème que Olivia et Catherine. J'ai bien fait ce que tu as dit mais rien à faire, se me note toujours mon adresse perso dans mes newsletter. Du coup c dommage car je ne peux pas me servir de ce que tu nous propose. Toutefois merci pour tous ce que tu fais

    RépondreSupprimer
    Réponses
    1. Bonjour,
      L'adresse s'affiche dans les e-mails que tu envoie, les emails de confirmation ou sur les pages de confirmation d'inscription ?
      A noter qu'il est obligatoire d'afficher l'adresse postale dans les Newlsetters.

      Supprimer
  26. Bonjour Catherine, d'abord merci pour ce tuto ! J'ai un problème : le titre " Inscrivez vous à la newsletter" n'est pas écris, il y a juste la case pour le mail et le prénom. Et après vérification, dans le code il n'y a pas de ligne ou l'on écrit le titre que l'on veut, c'est peut-être cette ligne qu'il me manque.
    Merci beaucoup d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Chloé,
      Effectivement le titre manque dans ton code. Les balises sont bien présentes mais le texte n'existe pas.
      Va sur ton gadget et retrouve ce petit bout de code :

      <h2></h2>

      Inscris ton texte entre <h2> et </h2> comme par exemple :

      <h2>Inscrivez vous à la newsletter</h2>

      Enregistre et voilà ;)

      Supprimer
  27. Bonjour,
    Merci pour ce tuto qui est vraiment cool.
    J'ai tout suivi à la lettre mais j'ai ajouté 2 encarts pour l'inscription. Celui qui est dans mon footer est niquel. Le clic sur "je m'abonne" mène à une page dans un nouvel onglet avec le texte que j'ai customisé dans mailchimp. Celui qui est dans la barre latérale affiche ce texte vert horrible qui sort de je ne sais où. j'ai réussi à changer la police et enlever le gras mais le code css couleur ne fonctionne pas. ça reste vert... Une idée ?

    Merci d'avance

    PS : le blog est toujours en construction avant une réelle migration d'Over-blog.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu m'envoyer le lien du blog ? S'il n'est pas encore public, envoie-moi une invitation à l'adresse : contact@catherinesurr.fr

      Supprimer
    2. Je viens aussi de remarquer que le mail de confirmation s'envoie en double :-(

      Supprimer
    3. Bonjour,
      Désolée pour le temps de réponse. J'ai validé l'invitation au blog aujourd'hui mais j'ai une erreur comme quoi le lien ne marche pas. Peux-tu me renvoyer une invitation ?

      Supprimer
    4. Bonjour,
      le blog est en ligne désormais donc tu devrais avoir de la visibilité. Merci encore !! :-)

      Supprimer
    5. Bonjour,
      Il y a peut-être un conflit entre les 2 formulaires. Essaye de supprimer le code :

      <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
      <script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email'; /*
      * Translated default messages for the $ validation plugin.
      * Locale: FR
      */
      $.extend($.validator.messages, {
      required: "Ce champ est requis.",
      remote: "Veuillez remplir ce champ pour continuer.",
      email: "Veuillez entrer une adresse email valide.",
      url: "Veuillez entrer une URL valide.",
      date: "Veuillez entrer une date valide.",
      dateISO: "Veuillez entrer une date valide (ISO).",
      number: "Veuillez entrer un nombre valide.",
      digits: "Veuillez entrer (seulement) une valeur numérique.",
      creditcard: "Veuillez entrer un numéro de carte de crédit valide.",
      equalTo: "Veuillez entrer une nouvelle fois la même valeur.",
      accept: "Veuillez entrer une valeur avec une extension valide.",
      maxlength: $.validator.format("Veuillez ne pas entrer plus de {0} caractères."),
      minlength: $.validator.format("Veuillez entrer au moins {0} caractères."),
      rangelength: $.validator.format("Veuillez entrer entre {0} et {1} caractères."),
      range: $.validator.format("Veuillez entrer une valeur entre {0} et {1}."),
      max: $.validator.format("Veuillez entrer une valeur inférieure ou égale à {0}."),
      min: $.validator.format("Veuillez entrer une valeur supérieure ou égale à {0}.")
      });}(jQuery));var $mcj = jQuery.noConflict(true);</script>

      D'un des 2 gadgets, car il est en double. Dis-moi ce que ça donne.

      Pour l'e-mail de confirmation, je ne l'ai reçu qu'une seule fois ;)

      Supprimer
  28. Bonjour,

    J'ai supprimé le code du gadget sur le côté mais j'ai toujours de texte verdâtre qui sort de je ne sais où...

    Cool pour l'email. C'est dajà ça :-)

    Merci encore !

    RépondreSupprimer
    Réponses
    1. C'est vraiment étrange.
      Tu peux modifier l'apparence de ce texte si tu le souhaites avec le code CSS suivant :

      #mce-success-response {
      }

      Il faudra bien mettre !important avant le signe ; à la fin de chaque ligne.
      Si tu souhaites cacher ce code essaye d'ajouter la ligne :

      display: none !important;

      Comme ceci :

      #mce-success-response {
      display: none !important;
      }

      Mais si tu fais ça, les personnes qui s'inscrivent n'auront pas de message de confirmation sur le blog. Ils recevront simplement un e-mail de confirmation.

      Supprimer
  29. Bonjour Catherine!
    Merci beaucoup pour ce tuto qui est encore une fois très bien expliqué.
    Malheureusement mon titre apparaît au dessus de ma news letter.
    Je te laisse l'adresse de mon blog pour que tu puisses voir:
    http://cascadencre.blogspot.fr/
    Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour supprimer le titre du gadget tu peux simplement laisser le champ Titre vide.
      Va dans Mise en Page, clique sur modifier sur le gadget en question et laisse le champ du titre vide ;)

      Supprimer
  30. Bonjour Catherine,

    Merci encore pour ton aide précieuse et ton accompagnement dans toutes les étapes de la construction de mon site.

    J'ai deux petites questions afin d'améliorer ma newsletter-bar (qui pour l'instant ne fonctionne pas encore très bien)

    Comment as-tu fait pour que dans ton inscription à toi, la personne reste sur ta page avec le message "Vous êtes inscrit ! Vérifiez vos e-mails ;)"
    J'aimerais désactiver l'option "e-mail de confirmation" : Que la personne ne reçoive qu'un courrier (que j'aurai personnalisé) qui lui dit merci et qu'elle est bien inscrite + ce petit message sur ma page qui lui confirme que ca a marché...

    Et aussi, comment on change la couleur et le contour des encarts "NOM" et "E-MAIL" quand on les remplit (pour ma part jaune avec un cadre bleu fluo) (es-ce avec un :hover aussi ?)

    MERCI !
    (comme tu pourras peut-être voir, j'ai aussi quelques soucis pour aligner tous ces éléments correctement en une seule ligne mais j'y travaille et essaye de régler ca vite. Si par chance au passage tu vois où ca cloche, je te remercie d'avance pour ton coup de pouce.)

    BELLE CONTINUATION POUR TON BLOG !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Personnellement je n'utilises plus Mailchimp, d'où les différences entre mon système d'inscription et celui de Mailchimp.
      Néanmoins, voici le site d'aide de Mailchimp en français : http://kb.mailchimp.com/fr/
      Tu y trouveras peut-être une réponse à ta question.

      Pour aligner tes cases, il faut remplacer les valeurs de width par des pourcentages.
      Pour les codes CSS suivants :

      #mc_embed_signup .mc-field-group input {

      Et :

      #mc_embed_signup .button {

      Remplace la ligne commençant par width par :

      width: 100%;

      Pour les codes CSS suivants :

      #mc_embed_signup .mc-field-group {

      Et :

      #mc_embed_signup .clear {

      Remplace width par :

      width: 25%;

      Pour finir, trouve ton code CSS commençant par :

      #mc_embed_signup h2 {

      Remplace la ligne commençant par width par :

      width: 23%;

      Pour changer le contour des cases Nom et E-mail quand on les remplit, il faut utiliser outline.
      Ajoute le code suivant :

      #mc_embed_signup .mc-field-group input:focus, #mc_embed_signup .mc-field-group input:active {
      outline: #000000;
      }

      A la fin des codes CSS de ton formulaire d'inscription.

      Remplace #000000 par le code couleur de ton choix.
      Si tu souhaites supprimer ce contour, alors remplace #000000 par none comme ceci :

      outline: none;

      Et voilà ;)

      Supprimer
  31. Bonsoir Catherine,
    Merci pour ce tuto, clair et très très bien expliqué.
    Je viens de créer mon widget Newsletter sur mon blog.
    Sur mailchimp j'ai bien réussi à enlever mon adresse postale partout sauf pour la page "Profile update e-mail send" car là je ne peux rien faire, je ne peux pas enlever ni éditer le texte de cette page pour enlever le fameux *|HTML:LIST_ADDRESS_HTML|* Comment faire ? ca m'ennuie de laisser mon adresse postale. Un grand merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Lisa,
      Normalement on est obligé de préciser une adresse postale sur les newsletters. C'est peut-être pour ça qu'il est impossible de supprimer l'adresse sur cette page.
      Je viens de vérifier et je ne peux pas la changer non plus.

      Supprimer
  32. Pourrais-tu faire la même chose mais avec les formulaire d'inscription Blogger ?

    RépondreSupprimer
  33. Hello Catherine.
    Merci beaucoup pour tous ces tutos qui sont à la fois très utiles et très bien construits.

    J'ai essayé d'appliquer celui-ci à mon blog et je rencontre un soucis : je n'arrive pas à modifier l'apparence de la barre de saisie. Aucun soucis pour modifier celle du bouton. Au début j'ai pensé avoir oublié d'ouvrir ou de fermer un {} ou alors avoir eu un soucis en copiant mais j'ai bien .mc-field-group input {... } comme dans ton exemple.

    Si tu as une piste je suis preneuse ! J'aurais aimé que mon bloc d'inscription à la newsletter soit sur le même modèle que mon bloc de recherche.

    RépondreSupprimer
    Réponses
    1. Bonjour Audrey,
      Le problème vient d'une petite différence avec le code HTML de ton formulaire. Utilise ce code CSS à la place (je n'ai pas remis les commentaires entre /* et */ mais tu peux les remettre si tu le souhaites) :

      #mc_embed_signup input {
      background-color: #eeeeee;
      border-style: solid;
      border-width: 1px;
      border-color: #dddddd;
      border-radius: 0px !important;
      padding: 5px 10px 5px 10px !important;
      width: 98.5% !important;
      box-sizing: border-box;
      font-family: 'Molengo', sans-serif !important;
      font-size: 12px !important;
      font-weight: normal;
      letter-spacing: 1px;
      }

      Supprimer
    2. Merci beaucoup !

      Je suis en train de me former un peu plus proprement au langage HTML/CSS mais pour le moment j'ai encore pas mal de zones d'ombre. En tout cas, ça fonctionne bien comme ça, je me doutais que le soucis venais de là, sans comprendre pourquoi ^^

      Supprimer
  34. Bonjour Catherine !
    Sur le template que j'ai téléchargé, il y a déjà un encart pour s'inscrire à la newsletter dans mon pied de page, mais il ne marche pas car il n'est pas relié à mailchimp... J'aimerais garder exactement cette présentation mais en le reliant à mailchimp, tu pense que c'est possible?
    (J'ai essayé de créer un nouvel encart avec ton tutoriel mais je ne suis pas arrivé à faire exactement la même mise en page... Je n'arrive pas à mettre sur la même ligne horizontale l'image, l'encart pour l'adresse et le bouton s'inscrire...)

    Merci encore milles fois pour ton aide.
    www.wildamanda.com

    RépondreSupprimer
    Réponses
    1. Bonjour Amanda,
      Oui c'est tout à fait possible. Pour que l'image et le formulaire soient bien sur la même ligne, alors colles le code de ton formulaire dans le contenant nommé form, entre les lignes en gras ci-dessous :

      <div class="form">
      <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(" https:="" feedburner.google.com="" fb="" a="" mailverify?uri="hu7e3sjhf0e6udnabv997c5kf0'," 'popupwindow',="" 'scrollbars="yes,width=550,height=520');return" true'="" target="popupwindow">
      <input class="email" name="email" placeholder="Adresse email" type="text">
      <input name="uri" type="hidden" value="http://feeds.feedburner.com/WildAmanda">
      <input name="loc" type="hidden" value="en_US">
      <input class="btn" type="submit" value="Je m'inscris!">
      </form>
      </div>

      Ensuite, pour mettre le champ de saisie et le bouton valider sur la même ligne, essaies d'ajouter les codes suivants à la suite des codes CSS pour ton formulaire Mailchimp :

      #mc_embed_signup .button, #mc_embed_signup .mc-field-group input {
      display: inline-block !important;
      }

      #mc_embed_signup .mc-field-group input {
      width: 350px !important;
      }

      Supprimer
  35. Hello !

    Merci pour tous tes tutos, c'est grâce à toi que j'ai réussi à créer le blog que je souhaitais mais aujourd'hui je rencontre un petit problème. Pour l'apparence de ma newsletter, j'ai bien tout copié les codes que tu as donné, mais l'écriture du nom et de l'adresse e-mail s'affiche pas alors que le bouton "S'abonner" s'affiche bien. J'ai recommencé 3 fois pour voir si j'avais oublié quelque chose... mais non... Je sais pas si j'ai très bien expliqué mais je pense que tu le verra... http://jeunetourangelle.blogspot.fr/

    Ce que j'ai mit (copier-coller de toi)

    /* Champs de saisie et texte */
    #mc_embed_signup .mc-field-group input {
    font-family: 'calibri', 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: #666666; /* 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: 'calibri', 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: #666666; /* 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;
    }


    Merci pour ta future réponse et ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour afficher du texte par défaut dans les champs de saisie, il faut les ajouter dans le code HTML du formulaire comme expliqué à la partie Ajouter du texte aux champs de saisie (avant la partie modifier l'apparence des champs de saisie et leur texte) ;)

      Supprimer
    2. Oh oui, j'ai du louper cette partie, désolée :)

      Supprimer
  36. Comme d'habitude, ce tuto est super utile !
    Tout marche parfaitement pour moi, après avoir suivi chaque étape pas à pas.
    Juste une chose cependant : le message demandant de confirmer l'inscription via l'e-mail envoyé apparaît en vert sur mon blog et j'aimerais pouvoir en changer la couleur. Saurais-tu comment faire ? Un grand merci par avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Malou,
      Tu peux modifier la couleur des messages en utilisant ces codes CSS :

      /* Message d'erreur lors de la saisie */
      .mce_inline_error {
      }

      /* Message d'erreur lors de la validation */
      #mce-error-response {
      }

      /* Message de succès lors de la validation */
      #mce-success-response {
      }

      Supprimer
  37. Merci Catherine! j'ai enfin réalisé de beaux changements grâce à toi! je t'avais appelé au secours alors que je ne pouvais pas suivre tes tutos, car mon template ne le permettait pas...
    J'ai changé de template et maintenant ( et grâce à toi) mon blog me ressemble enfin ;)
    merci beaucoup pour ton aide et tes sublimes tutos si bien expliqués :)

    RépondreSupprimer
  38. Merci beaucoup pour ce tutoriel ! Cependant j'ai quelques soucis ...

    - Je trouve mon formulaire bien trop large et j'aimerai le réduire, comment faire ? Et comment faire comme toi et mettre mon écriture sur le côté et mettre une image en fond (ça je ne suis pas sûre de vouloir le faire mais c'est au cas où ça me plaise mieux avec une photo en fond)?

    - Je pense que j'ai supprimé la ligne me permettant d'avoir la marge autour de mon bouton "s'inscrire" (sur lequel j'ai mis "oui"), comment la remettre car je pense que je préfère avec ?

    Merci beaucoup d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Maïlys,
      Pour mon formulaire, j'ai modifié le code HTML. J'ai créé 2 contenants que j'ai mis côte à côte. Je pourrai en faire un tutoriel pour expliquer comment faire ;)

      Pour la largeur du formulaire, tu devrais pouvoir le réduire avec ce code CSS :

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

      Ajoute la ligne :

      width: 100% !important; /* Largeur du formulaire */

      Avant le signe }

      Comme ceci :

      #mc_embed_signup form {
      display: block;
      position: relative;
      text-align: left;
      padding: 0;
      width: 100% !important; /* Largeur du formulaire */
      }

      Tu peux réduire le pourcentage pour réduire la largeur du formulaire. Tu peux même utiliser un nombre en pixels si tu préfères, par exemple 200px.

      Pour rajouter une marge autour du bouton valider, il faut retrouver ton code CSS qui commence par :

      /* Bouton valider */
      #mc_embed_signup .button {

      Dans ce code tu devrais avoir une ligne commençant par margin.
      Si tu le trouves, alors remplace la valeur de cette ligne par ceci, par exemple :

      margin: 10px 0 5px 0;

      A noter que les valeur de cette ligne sont dans l'ordre suivant : en haut, à droite, en bas, à gauche.

      Si tu ne trouves pas la ligne commençant par margin, rajoutes-la avant le signe } de ton code CSS.

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger