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

Ajouter le formulaire de contact Blogger DANS une page
Enfin un nouveau tutoriel ! Cela fait un bail, mais c'est pour une bonne cause. Je vous prépare pleins de nouveautés pour 2016 : refonte du blog, lancement de mon site professionnel, et création de nouveaux contenus rien que pour vous ! Retrouvez plus d'infos à ce sujet ici ;)

Revenons à nos moutons : ajouter un formulaire de contact dans une page !

Hop c'est parti pour les explications...

Sommaire

  1. Faire une sauvegarde de votre thème
  2. Le formulaire de contact Blogger
  3. Ajouter le gadget Formulaire de contact
    1. Couper le code du gadget dans le thème
    2. Déplacer le formulaire de contact
    3. Coller le nouveau code dans la page
  4. Personnaliser les textes du formulaire
    1. Modifier les titres des champs de saisie
    2. Ajouter un texte par défaut dans les champs de saisie
    3. Modifier le texte du bouton de validation
  5. Modifier l'apparence du formulaire
    1. Modifier la largeur du formulaire
    2. Centrer le formulaire sur la page
    3. Modifier l'apparence des titres des champs de saisie
    4. Modifier l'apparence des champs de saisie
      1. Ajouter une marge entre le texte et les bords du champ
      2. Changer le fond des champs de saisie
      3. Modifier la bordure des champs de saisie
      4. Modifier l'espace entre les champs de saisie
      5. Modifier l'apparence du texte des champs de saisie
    5. Modifier l'apparence du bouton valider
      1. Modifier la largeur du bouton valider
      2. Modifier le fond du bouton valider
      3. Modifier l'arrondi des bords du bouton valider
      4. Modifier la bordure du bouton valider
      5. Modifier la marge autour du texte du bouton valider
      6. Modifier le texte du bouton valider
    6. Modifier l'apparence du bouton valider au survol de la souris
      1. Changer l'apparence du bouton
  6. Dernières remarques

Faire une sauvegarde de votre thème

Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Ajouter le formulaire de contact Blogger DANS une page

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

>> Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Le formulaire de contact Blogger

Nous allons utiliser le gadget Formulaire de contact fourni par Blogger. Il est directement associé à l'adresse e-mail que vous utilisez sur Blogger, et simple d'utilisation.

Nous allons l'ajouter à notre blog, puis déplacer le contenu du gadget sur une page.

Ajouter le gadget Formulaire de contact

Couper le code du gadget dans le thème

Allez sur la page Mise en page à partir de votre tableau de bord. Cliquez sur Ajouter un gadget dans votre barre latérale, par exemple :

Ajouter le formulaire de contact Blogger DANS une page

Dans la fenêtre qui s'ouvre cliquez sur l'onglet Plus de gadgets sur la gauche, puis sur Formulaire de contact :

Ajouter le formulaire de contact Blogger DANS une page

Cliquez ensuite sur Enregistrer. Le titre de ce gadget n'apparaîtra pas, il n'est pas important.

Ajouter le formulaire de contact Blogger DANS une page

Déplacez ensuite votre gadget à la fin de votre barre latérale, juste au cas où.

Ajouter le formulaire de contact Blogger DANS une page

Cliquez sur Enregistrer la disposition en haut de la page.

Attention : Ne supprimez jamais ce gadget ! Sinon votre formulaire ne marchera pas !

Déplacer le formulaire de contact

Pour déplacer le formulaire de contact, nous allons supprimer le contenu à l'intérieur du gadget que nous venons d'ajouter, puis coller un nouveau code dans notre page.

Cliquez sur Modèle dans le menu à gauche de l'écran, puis sur Modifier le code HTML :

Ajouter le formulaire de contact Blogger DANS une page

Cliquez sur Accéder au widget en haut de la boîte de code. Une liste de gadgets apparaît. Cliquez sur le gadget ContactForm qui à la plus grand nombre à la fin. Ce sera 1 si vous n'avez qu'un seul gadget ContactForm. Si vous en avez déjà ajouté un avant, alors ce nombre peut être 2, 3, etc.
Dans mon exemple, j'avais déjà un gadget formulaire de contact, donc celui qui m'intéresse est le gadget nommé ContactForm2 :

Ajouter le formulaire de contact Blogger DANS une page

Comme mon gadget se trouve dans la barre latérale, il se trouve en bas du code de mon thème.
Cliquez sur le triangle noir à gauche de la ligne contenant le nom de votre gadget (dans mon cas : ContactForm2), pour ouvrir le gadget :

Ajouter le formulaire de contact Blogger DANS une page

Cliquez ensuite sur le triangle noir à gauche de la ligne contenant id='main' qui vient d'apparaître. S'il n'y a pas de triangle noir, alors passez à l'étape suivante.

Ajouter le formulaire de contact Blogger DANS une page

Sélectionnez tout le code qui se trouve entre la ligne :
<b:includable id='main'>
et :
</b:includable>
Comme ceci :

Ajouter le formulaire de contact Blogger DANS une page

Attention à bien surligner que ce qui est montré dans cette image, rien de plus, rien de moins !

Supprimez ce code. Vous devrez obtenir ceci :

Ajouter le formulaire de contact Blogger DANS une page

Enregistrez en cliquant sur le bouton Enregistrer le modèle en haut de la page.

Coller le nouveau code dans la page

Maintenant, allez sur la page sur laquelle vous voulez ajouter votre formulaire de contact, ou créez une nouvelle page de contact.

Sur la page de création/modification, cliquez sur le bouton HTML en haut à gauche de la page :


Collez, là où vous voulez qu'apparaîsse le formulaire, le code HTML suivant :
<div class="widget ContactForm" id="ContactFormX">
<div class="contact-form-widget">
<div class="form">
<form class="contact-form" name="contact-form">
Votre nom *<br />
<input class="contact-form-name" id="ContactFormX_contact-form-name" name="name" placeholder="" size="30" type="text" value="" />
        <br />Votre e-mail *<br />
<input class="contact-form-email" id="ContactFormX_contact-form-email" name="email" placeholder="" size="30" type="text" value="" />
          <br />Votre message *<br />
<textarea class="contact-form-email-message" cols="25" id="ContactFormX_contact-form-email-message" name="email-message" placeholder="" rows="5"></textarea>

        <input class="contact-form-button contact-form-button-submit" id="ContactFormX_contact-form-submit" type="button" value="Envoyer" />
        <br />
<div class="contact-form-error-message" id="ContactFormX_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactFormX_contact-form-success-message">
</div>
</form>
</div>
</div>
</div>
Attention ! Remplacez tous les X par le nombre de votre formulaire de contact.
Dans mon exemple, mon formulaire est ContactForm2, je remplace donc les X par 2.

Cette étape est très importante pour le fonctionnement du formulaire.
Le nom du formulaire doit correspondre !


Voilà, vous avez ajouté votre formulaire de contact à votre page ! Passons maintenant à la personnalisation :)

Personnaliser les textes du formulaire

Modifier les titres des champs de saisie

En bleu ci-dessous vous trouverez les titres des champs de saisie, qui se trouvent au-dessus des champs. Vous pouvez remplacer ces textes par ce que vous voulez. Vous pouvez également les supprimer si vous le souhaitez :

Ajouter le formulaire de contact Blogger DANS une page

Ajouter un texte par défaut dans les champs de saisie

Vous pouvez ajouter un texte à l'intérieur des champs de saisie, qui disparaîtra quand on entre du texte dans le champ. Pour cela repérez les termes :
placeholder=""

Ajouter le formulaire de contact Blogger DANS une page

Ajoutez le texte que vous voulez faire apparaître entre les "", comme par exemple :
placeholder="Votre nom"

Modifier le texte du bouton de validation

Vous pouvez remplacer le texte qui est affiché sur le bouton de validation, en remplaçant le terme Envoyer :

Ajouter le formulaire de contact Blogger DANS une page

Remplacez ce texte par ce que vous souhaitez.

Modifier l'apparence du formulaire

Pour modifier l'apparence du formulaire de contact, nous allons utiliser du code CSS.
Enregistrez votre page, ou publiez-là : les pages n'apparaissent pas dans le flux d'articles ;)

Cliquez ensuite sur Modèle puis sur Modifier le code HTML :

Ajouter le formulaire de contact Blogger DANS une page

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin>. si vous ne le trouvez pas passez à l'étape suivante.

Ajouter le formulaire de contact Blogger DANS une page

Cliquez dans la boîte de code, puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Une boîte de recherche doit apparaître dans la boîte de code. Si elle apparaît en haut de la page web, cliquez bien dans la boîte de code et recommencez.

Dans la boîte de recherche collez :
]]></b:skin>
Et appuyez sur Entrer.

C'est juste au-dessus de cette ligne que nous allons coller tous les codes CSS qui suivent ;)

Ajouter le formulaire de contact Blogger DANS une page

Pour l'instant le formulaire ressemble à ceci :

Ajouter le formulaire de contact Blogger DANS une page

Modifier la largeur du formulaire

Pour modifier la largeur du formulaire nous allons utiliser les codes CSS suivants :
#ContactForm2 .contact-form-widget {
    max-width: 400px !important;   /* Largeur du formulaire */
}

#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
}
Collez ces codes juste avant la ligne :
]]></b:skin>
Comme ceci :
#ContactForm2 .contact-form-widget {
    max-width: 400px !important;   /* Largeur du formulaire */
}

#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
}

]]></b:skin>

Attention ! Remplacez 2 dans ContactForm2 par le numéro de votre formulaire de contact !

Remplacez 400px dans le code suivant par la largeur souhaitée pour votre formulaire :
#ContactForm2 .contact-form-widget {
    max-width: 400px !important;   /* Largeur du formulaire */
}
Pour que votre formulaire prenne 100% de la largeur de la zone de la page, remplacez 400px par 100%, comme ceci :
#ContactForm2 .contact-form-widget {
    max-width: 100% !important;   /* Largeur du formulaire */
}
Ce qui donne :

Ajouter le formulaire de contact Blogger DANS une page

Centrer le formulaire sur la page

Pour centrer le formulaire dans la zone de la page, ajoutez la ligne suivante :
margin: 0 auto;   /* Centre le formulaire sur la page */
Avant le signe } de ce code CSS :
#ContactForm2 .contact-form-widget {
    max-width: 100% !important;   /* Largeur du formulaire */
}
Comme ceci :
#ContactForm2 .contact-form-widget {
    max-width: 100% !important;   /* Largeur du formulaire */
    margin: 0 auto;   /* Centre le formulaire sur la page */
}
Ce qui donne :

Ajouter le formulaire de contact Blogger DANS une page

Modifier l'apparence des titres des champs de saisie

Pour modifier l'apparence des textes qui se trouvent au-dessus des champs des saisie, ajoutez le code CSS suivant à la suite du précédent :
#ContactForm2 .contact-form {
    font-family: 'Open sans', sans-serif;   /* Police du texte */
    font-size: 14px;   /* Taille de la police du texte */
    text-align: left;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
    color: #222222;    /* Couleur du texte */
}
Remplacez chaque élément comme vous le souhaitez :
  • Pour la police vous pouvez utiliser une police Google Fonts, par exemple.
  • Augmentez ou diminuez la taille de la police en variant la valeur en pixels.
  • Modifiez l'alignement du texte comme expliqué dans le commentaire en orange.
  • Modifiez le code de la couleur du texte par celle que vous souhaitez utiliser. Pour trouver le code d'une couleur vous pouvez utiliser le site code-couleur.com

N'oubliez pas de remplacer le nombre 2 par le nombre de votre gadget ! ;)

On obtient :

Ajouter le formulaire de contact Blogger DANS une page

Modifier l'apparence des champs de saisie

Pour modifier l'apparence des champs de saisie retrouvez votre code :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
}
C'est ici que nous allons ajouter les codes pour définir le visuel de ces champs.

Commencez par ajouter la ligne suivante avant le signe } :
height: auto !important;
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

Ajouter une marge entre le texte et les bords du champ

Pour ajouter une marge autour du texte, et le rendre plus lisible et aéré, ajoutez la ligne suivante :
padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
}
Remplacez la valeur 5px par celle de votre choix sachant que chaque valeur correspond dans l'ordre à :
  • la marge au-dessus du texte
  • la marge à droite du texte
  • la marge sous le texte
  • la marge à gauche du texte

On obtient :

Ajouter le formulaire de contact Blogger DANS une page

Changer le fond des champs de saisie

Pour changer la couleur de fond des champs de saisie, rajoutez la ligne suivante avant le signe } :
background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
    background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
}
Remplacez le code de la couleur de fond par celle de votre choix.

On obtient :

Ajouter le formulaire de contact Blogger DANS une page

Modifier la bordure des champs de saisie

Pour modifier la bordure, ajoutez la ligne suivante :
border: 1px solid #CDCDE0 !important;   /* Bordure : épaisseur | style | couleur */
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
    background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
    border: 1px solid #CDCDE0 !important;   /* Bordure : épaisseur | style | couleur */
}
Remplacez :
  • la valeur 1px par l'épaisseur en pixels souhaitée
  • solid par un autre style de bordure si vous le souhaitez : solid = solide ; dashed = pointillé
  • le code de la couleur de la bordure par celle que vous souhaitez

Si vous voulez supprimer la bordure, alors utilisez cette ligne à la place :
border: none !important;   /* Aucune Bordure */
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
    background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
    border: none !important;   /* Aucune Bordure */
}

Si vous voulez avoir des bordures différentes, ou seulement une par exemple, alors il faut préciser dans un premier temps aucune bordure avec la ligne  :
border: none !important;   /* Aucune Bordure */
Suivi des précisions pour les bordures. Pour préciser l'apparence d'une seule bordure, ajoutez just après border :
  • -left pour la bordure de gauche
  • -right pour la bordure de droite
  • -top pour la bordure supérieure
  • -bottom pour la bordure inférieur
Par exemple, je souhaite n'avoir qu'une seule bordure : la bordure inférieur. J'écris donc :
border: none !important;   /* Aucune Bordure */
border-bottom: 1px solid #CDCDE0 !important;   /* Bordure : épaisseur | style | couleur */
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
    background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
    border: none !important;   /* Aucune Bordure */
    border-bottom: 1px solid #CDCDE0 !important;   /* Bordure : épaisseur | style | couleur */
}
Ce qui donne :

Ajouter le formulaire de contact Blogger DANS une page

Modifier l'espace entre les champs de saisie

Le moyen le plus simple d'ajouter de l'espace entre les éléments du formulaire, est d'ajouter une marge sous les champs de saisie. Pour cela, ajoutez la ligne suivante :
margin-bottom: 20px !important;
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
    background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
    border: none !important;   /* Aucune Bordure */
    border-bottom: 1px solid #CDCDE0 !important;   /* Bordure : épaisseur | style | couleur */
    margin-bottom: 20px !important;
}
Modifiez la valeur de 20px par celle que vous souhaitez.

On obtient :

Ajouter le formulaire de contact Blogger DANS une page

Modifier l'apparence du texte des champs de saisie

Pour modifier le texte des champs de saisie, collez les lignes suivantes :
font-family: 'Open sans', sans-serif;   /* Police du texte */
font-size: 14px;   /* Taille de la police du texte */
text-align: left;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
color: #555555;    /* Couleur du texte */
Comme ceci :
#ContactForm2 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte des champs de saisie */
    background: #F9f9f9 !important;   /* Couleur de fond des champs de saisie */
    border: none !important;   /* Aucune Bordure */
    border-bottom: 1px solid #CDCDE0 !important;   /* Bordure : épaisseur | style | couleur */
    margin-bottom: 20px !important;
    font-family: 'Open sans', sans-serif;   /* Police du texte */
    font-size: 14px;   /* Taille de la police du texte */
    text-align: left;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
    color: #555555;    /* Couleur du texte */
}
Remplacez chaque élément comme vous le souhaitez :
  • Pour la police vous pouvez utiliser une police Google Fonts, par exemple.
  • Augmentez ou diminuez la taille de la police en variant la valeur en pixels.
  • Modifiez l'alignement du texte comme expliqué dans le commentaire en orange.
  • Modifiez le code de la couleur du texte par celle que vous souhaitez utiliser. Pour trouver le code d'une couleur vous pouvez utiliser le site code-couleur.com

Attention, c'est normal que le texte par défaut de vos champs de saisie ne prenne pas la couleur que vous avez entré. Cette couleur s'applique au texte que l'on entre dans le champ de saisie :

Ajouter le formulaire de contact Blogger DANS une page

Modifier l'apparence du bouton valider

Pour modifier l'apparence du bouton, collez le code CSS suivant :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
}
Avant la ligne :
]]></b:skin>
Comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
}

]]></b:skin>
C'est dans ce code CSS que nous allons ajouter les lignes pour définir le visuel de notre bouton Valider.

N'oubliez pas de remplacer le nombre 2 par le nombre de votre gadget !

Modifier la largeur du bouton valider

Pour modifier la largeur du bouton valider ajoutez la ligne suivante :
width: 400px !important;   /* Largeur du bouton valider */
Avant le signe } de ce code CSS, comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 400px !important;   /* Largeur du bouton valider */
}
Si vous voulez que le bouton prennent 100% de la largeur du formulaire, remplacez 400px par 100%, comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
}

Pour centrer le bouton, rajoutez :
margin: 0 auto !important;   /* Centre le bouton valider */
Comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
}

Modifier le fond du bouton valider

Pour modifier le fond du bouton valider, rajoutez la ligne :
background: #CDCDE0 !important;   /* Fond du bouton valider */
Avant le signe } comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
}
Modifiez le code de la couleur de fond pour celle de votre choix.

Modifier l'arrondi des bords du bouton valider

Par défaut le bouton valider a les bords légèrement arrondi. Vous pouvez accentuer cet effet ou le supprimer.

Pour modifier l'arrondi, ajoutez les lignes :
-webkit-border-radius: 5px 5px 5px 5px !important;   /* Arrondi des bords du bouton valider */
border-radius: 5px 5px 5px 5px !important;   /* Arrondi des bords du bouton valider */
Avant le signe } du même code CSS.

Remplacez les valeurs 5px par celles de votre choix en sachant qu'elles correspondent dans l'ordre à :
  • l'arrondi en haut à gauche
  • l'arrondi en haut à droite
  • l'arrondi en bas à droite
  • l'arrondi en bas à gauche

Pour supprimer l'arrondi, remplacer les valeurs 5px par 0 comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
    -webkit-border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
}

Modifier la bordure du bouton valider

Pour modifier la bordure par défaut du bouton valider, ajoutez la ligne :
border: 1px solid #9696C5 !important;   /* Bordure du bouton valider : épaisseur | style | couleur */
Avant le signe } comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
    -webkit-border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border: 1px solid #9696C5 !important;   /* Bordure du bouton valider : épaisseur | style | couleur */
}
Remplacez :
  • la valeur 1px par l'épaisseur en pixels souhaitée
  • solid par un autre style de bordure si vous le souhaitez : solid = solide ; dashed = pointillé
  • le code de la couleur de la bordure par celle que vous souhaitez

Si vous voulez supprimer la bordure, alors utilisez cette ligne à la place :
border: none !important;   /* Aucune Bordure */
Comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
    -webkit-border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border: none !important;   /* Aucune Bordure */
}

De même que pour les champs de saisie, si vous voulez avoir des bordures différentes, ou seulement une par exemple, alors il faut préciser dans un premier temps aucune bordure avec la ligne  :
border: none !important;   /* Aucune Bordure */
Suivi des précisions pour les bordures. Pour préciser l'apparence d'une seule bordure, ajoutez just après border :
  • -left pour la bordure de gauche
  • -right pour la bordure de droite
  • -top puor la bordure supérieure
  • -bottom pour la brodure inférieur

Visuellement on obtient :

Ajouter le formulaire de contact Blogger DANS une page

Modifier la marge autour du texte du bouton valider

Pour ajouter une marge autour du texte du bouton valider, ajoutez la ligne suivante :
padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du texte du bouton valider */
Comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
    -webkit-border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border: 1px solid #9696C5 !important;   /* Bordure du bouton valider : épaisseur | style | couleur */
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du bouton valider */
}
Remplacez la valeur 5px par celle de votre choix sachant que chaque valeur correspond dans l'ordre à :
  • la marge au-dessus du texte
  • la marge à droite du texte
  • la marge sous le texte
  • la marge à gauche du texte

Modifier le texte du bouton valider

Comme pour le texte des champs de saisie, ajoutez les lignes :
font-family: 'Open sans', sans-serif !important;   /* Police du texte */
font-size: 13px !important;   /* Taille de la police du texte */
text-align: center !important;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
color: #484886 !important;    /* Couleur du texte */
Comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
    -webkit-border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border: 1px solid #9696C5 !important;   /* Bordure du bouton valider : épaisseur | style | couleur */
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du bouton valider */
    font-family: 'Open sans', sans-serif !important;   /* Police du texte */
    font-size: 13px !important;   /* Taille de la police du texte */
    text-align: center !important;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
    color: #484886 !important;    /* Couleur du texte */
}
Remplacez chaque élément comme vous le souhaitez :
  • Pour la police vous pouvez utiliser une police Google Fonts, par exemple.
  • Augmentez ou diminuez la taille de la police en variant la valeur en pixels.
  • Modifiez l'alignement du texte comme expliqué dans le commentaire en orange.
  • Modifiez le code de la couleur du texte par celle que vous souhaitez utiliser. Pour trouver le code d'une couleur vous pouvez utiliser le site code-couleur.com

Vous pouvez, si vous le voulez, ajouter également les lignes suivantes :
font-weight: normal !important;   /* Graisse du texte : normal = normal | bold = gras */
text-transform: uppercase !important;   /* Transformation du texte : uppercase = majuscules | lowercase = minuscules | initial = normal */
letter-spacing: 2px !important;   /* Espace entre les caractères du texte */
Comme ceci :
#ContactForm2 .contact-form-button-submit {
    height: auto !important;
    width: 100% !important;   /* Largeur du bouton valider */
    margin: 0 auto !important;   /* Centre le bouton valider */
    background: #CDCDE0 !important;   /* Fond du bouton valider */
    -webkit-border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border-radius: 0 !important;   /* Arrondi des bords du bouton valider */
    border: 1px solid #9696C5 !important;   /* Bordure du bouton valider : épaisseur | style | couleur */
    padding: 5px 5px 5px 5px !important;   /* Marge au-dessus - à droite - en-dessous- à gauche du bouton valider */
    font-family: 'Open sans', sans-serif !important;   /* Police du texte */
    font-size: 13px !important;   /* Taille de la police du texte */
    text-align: center !important;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
    color: #484886 !important;    /* Couleur du texte */
    font-weight: normal !important;   /* Graisse du texte : normal = normal | bold = gras */
    text-transform: uppercase !important;   /* Transformation du texte : uppercase = majuscules | lowercase = minuscules | initial = normal */
    letter-spacing: 2px !important;   /* Espace entre les caractères du texte */
}
Ce qui donne :

Ajouter le formulaire de contact Blogger DANS une page

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

Maintenant on va modifier l'apparence du bouton valider, quand on le survol avec la souris.

Tout d'abord il faut spécifier l'apparence du curseur. Par défaut le curseur ne change pas quand on le survol avec la souris, il faut changer ceci pour que l'on comprenne que c'est un "lien".
Collez le code CSS suivant :
#ContactForm2 .contact-form-button-submit:hover {
    cursor: pointer;
}
Avant la ligne :
]]></b:skin>
Comme ceci :
#ContactForm2 .contact-form-button-submit:hover {
    cursor: pointer;
}

]]></b:skin>

N'oubliez pas de remplacer le nombre 2 par le nombre de votre gadget !

Changer l'apparence du bouton

A vous de décider maintenant ce que vous voulez changer en survolant le bouton avec la souris.

Voulez-vous changer le fond, la bordure, la couleur du texte ? Spécifiez ce que vous voulez changer dans le code CSS ci-dessus.

Par exemple, si je souhaite modifier la couleur du fond, j'ajoute la ligne :
background: #ffffff !important;
Avant le signe } comme ceci :
#ContactForm2 .contact-form-button-submit:hover {
    cursor: pointer;
    background: #ffffff !important;
}

N'oubliez pas de remplacer le nombre 2 par le nombre de votre gadget !

Ce qui donne :

Ajouter le formulaire de contact Blogger DANS une page

Basez-vous sur les éléments du code CSS du bouton quand il n'est pas survolé par la souris, et n'ajoutez que les paramètres que vous voulez changer dans ce nouveau code ;)

Sauvegardez, et voilà vous avez maintenant un joli formulaire de contact dans votre page ! ;)

Dernières remarques

  1. Ne supprimez pas le gadget Formulaire de contact dans Mise en Page ! Sinon il ne marchera plus !
  2. Assurez-vous d'avoir bien remplacé tous les 2 dans ContactForm2 par le nombre de votre formulaire de contact ! Vérifiez dans la partie HTML et dans tous les codes CSS de ce tutoriel !

Autres articles

177 commentaires:

  1. Encore un super tuto qui a dû te prendre un temps pas possible ! Merci pour toutes ces petites astuces et ces petits bonus glissés entre deux articles ! Je viens de faire mon joli formulaire de contact sur mon blog grâce à toi ! Sais-tu comment modifier l'adresse mail de destination?
    Bon week-end à toi !

    RépondreSupprimer
    Réponses
    1. Merci :)
      Je ne crois pas qu'on puisse modifier l'adresse email. Le formulaire de contact est relié à ton compte Blogger. Tu peux néanmoins essayer d'ajouter une autre adresse email en ajoutant un administrateur à ton blog.
      Va dans Paramètres > Basique. Sous Autorisations clique sur Ajouter auteurs. Ajoute l'adresse email sur laquelle tu souhaites recevoir les notifications de message. Il te faudra accepter l'invitation à partir de cette adresse email. Puis modifier le statut d'auteur en administrateur en te connectant avec ton adresse email de base.

      Supprimer
  2. Merci merci merci ! grâce à toi j'ai un formulaire de contact au TOP

    RépondreSupprimer
  3. Par contre, j'ai voulu faire un test mais quand j'appuie sur "envoyer" il ne se passe rien :/ aie

    RépondreSupprimer
  4. Ah non c'est bon désolée j'avais oublié de remplacer un X... vicieux ahah

    RépondreSupprimer
  5. Bonsoir,
    Je rencontre un soucis avec le codage d'un menu je vous ai laissé un commentaire sous un des articles en question. Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai répondu à ton commentaire le 2 Mars ;)
      http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html?showComment=1456934134981#c7919585256040158050

      Supprimer
  6. Génial cet article ! Mais je n'arrive pas à modifier la taille et l'aspect après :/

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      J'ai trouvé une erreur dans ton code CSS : il manque un signe } pour fermer le code CSS du pied d'article. Du coup, tout ce qui suit cette erreur n'est pas ou mal pris en compte par le navigateur.

      Retrouve la ligne :

      /* Rectifie l'alignement centré des boutons de partage */

      Ajoute un signe } juste avant comme ceci :

      }
      /* Rectifie l'alignement centré des boutons de partage */

      Si ça ne règle pas le problème, alors il faut vérifier tout ton code CSS pour voir s'il ne manque pas un signe : ; } { /* ou */

      Supprimer
  7. Bonjour et merci pour ce tutoriel.

    Je souhaiterai juste savoir comment masquer le formulaire de contact (widget) que nous avons ajouté depuis "mise en page".

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Normalement il ne devrait pas s'afficher sur ton blog si tu as bien supprimé le code dans le code HTML de ton thème. Mais il reste affiché dans Mise en page, c'est normal, sinon le formulaire ne marchera pas ;)

      Supprimer
  8. Bonjour Catherine,

    Encore un fabuleux tuto merci :))))

    Comme toujours j'ai un bug lol, j'ai pourtant tout suivi à la lettre mais mes modifications n'ont été prise en compte que sur la ligne "votre nom" et sur le bouton "envoyer".
    Ma page ici : http://www.mamasycabeaute.com/p/contact.html

    Je n'arrive pas à voir d'où vient l'erreur :/ Peut-tu m'aider stp ???

    Merci <3

    Bonne après midi.
    Bizzzz Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Il y a une ligne du code CSS qui comprend 3 fois le nom du gadget, et donc le numéro du gadget :

      #ContactForm1 .contact-form-name, #ContactForm2 .contact-form-email, #ContactForm2 .contact-form-email-message {

      Tu as simplement oublié de remplacer les 2 autres "2" par un "1" ;)

      Supprimer
    2. Bonjour Catherine, ma sauveuse plutôt ;)

      Nikel ça fonctionne, merci beaucoup <3
      Bizzzz

      Supprimer
  9. Bonjour, merci pour ce tutoriel !
    Je rencontre cependant un petit problème : malgré avoir vérifié plusieurs fois si j'avais suivi toutes tes consignes, aucun changement ne s'effectue quand je tape les codes et que j'enregistre. Mon formulaire reste tel quel ! Je ne comprends pas ce que j'ai mal fait. Pourrais tu m'aider ?
    Je te mets le lien de mon blog ( il faut aller dans l'onglet contact du menu pour arriver à ma page de contact ): http://luquilit.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient de 2 petites erreurs dans ton code CSS. Il y a des signes en trop, et des signes manquants. Il faut toujours faire attention aux signes : ; { } /* et */ car un oubli ou un signe en trop, et tout ce qui suit l'erreur peut ne pas être pris en compte, ou mal pris en compte.

      Retrouve cette ligne :

      /* Apparence des titres de la barre latérale de droite */

      Tu devrais trouver 2 signes } avant ce code, comme ceci :

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
      }
      }/* Apparence des titres de la barre latérale de droite */

      Supprimes-en un, comme ceci :

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
      }
      /* Apparence des titres de la barre latérale de droite */

      Ensuite, retrouve cette ligne :

      /* Contenant de la barre de cookies */

      Le code qui précède cette ligne n'est pas fermé : il manque le signe }
      Ajoute-le comme ceci :

      }
      /* Contenant de la barre de cookies */

      Ce qui donne :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: Pacifico;
      font-size: 14px;
      text-transform: uppercase;
      color: #D678E5;
      text-align: center;
      border-bottom: dotted;
      border-bottom-width: 1px;
      border-bottom-color: #F798DB;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }
      /* Contenant de la barre de cookies */
      .cookie-choices-info, #cookieChoiceInfo {
      bottom: 0 !important;
      top: auto !important;
      background-color: #FA77E9 !important;
      }

      Et voilà ;)

      Supprimer
    2. Excuse moi de ne pas t'avoir remercié plus tôt, je n'avais pas vu ta réponse ! Tu me sauves la vie encore une fois ;)
      Bisous.

      Supprimer
  10. Bonjour ! J'ai découvert ce blog il y a quelques semaines &... j'hallucine. Mille mercis pour tous ces tuto' ! Mais genre vraiment merci, merci ! C'est clair, c'est net, c'est précis, c'est du boulot, alors encore merci (oui c'est bon, j'arrête :D)

    RépondreSupprimer
  11. Bonjour
    Merci pour ce tuto! je vais l'appliquer dès maintenant.
    Par ailleurs, comment faire pour avoir 3 articles collés les uns a coté des autres en page d'accueil qui occupent toute la surface de la page ?
    Merci d'avance

    Manon.

    RépondreSupprimer
    Réponses
    1. Bonjour Manon,
      Pour les articles en miniatures tu peux suivre ce tutoriel. Ensuite il faut cacher ta barre latérale sur l'index avec ce code CSS :

      #sidebar-right-1 {
      display: none;
      }

      .main-inner .columns {
      padding-left: 0px;
      padding-right: 0 !important;
      }

      A coller juste après les codes CSS de l'affichage des articles en miniature, avant le code suivant :

      </style>

      Supprimer
  12. Super Catherine, ma page Contact est bien plus jolie maintenant :) Merciiii ! J'adore tes tutos ils sont supers !!!

    RépondreSupprimer
  13. Aaaaaah merci pour le tuto, je ne sais pas comment j'aurais fait sans vous et votre blog !
    J'ai pas mal avancé sur mon design...Grâce à vous!

    Votre blog est vraiment top ! C'est devenu mon livre de chevet depuis un mois.

    RépondreSupprimer
  14. Bonjour ! Merci pour ce tuto, le formulaire migre bien vers la page mais je ne reçois aucun message lorsque quelqu'un me contact, saurais tu pourquoi?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies bien que tu as remplacé tous les X du code HTML par ton numéro de gadget.
      De plus, vérifies que tu n'as pas supprimé le gadget formulaire de contact dans Mise en page. Sans le gadget dans Mise en page, le formulaire ne fonctionnera pas ;)

      Supprimer
    2. Ah c'est bizarre, tout me semble correct mais je ne reçois toujours pas les messages. J'ai pourtant bien mis mon adresse mail en tant qu'administrateur...

      Supprimer
    3. J'ai pourtant bien tout vérifier et tout semble correct... ça doit être un problème lié à mon adresse e-mail parce que même si j'installe un formulaire de contact des gadgets blogger, sans le déplacer, il ne fonctionne pas aussi...

      Supprimer
    4. Cela peut venir de ton adresse email ou de ton thème car les thèmes des sites ThemeXpose, SoraTemplates, BloggerTempaltes, etc. sont pleins d'erreurs :/

      Supprimer
  15. Ton tuto est juste génial !! Merci à toi. Mais je pense que mon côté "miss catastrophe" m'a suivi dans le blogging. Je pense avoir effectuer chaque démarche conformément à tes indications, pourtant je me retrouve avec le formulaire standard dans ma page. J'ai bien vérifié s'il manquait des : ; / * etc, mais je ne vois rien ...

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Peux-tu me donner le lien de la page de contact pour que je puisse voir d'où peut venir le problème ?

      Supprimer
  16. Au top, comme toujours !

    RépondreSupprimer
  17. Merci pour tous ces tutoriels ! Je suis amoureuse de mon blog maintenant aha ! Et formation gratuite en informatique au passage ! ;)

    Pourrais-tu montré comment faire pour mettre un beau gadget avec les articles les plus visités ? Ce serait juste trop bien car si on met le gadget tout simple et recommandé par blogger il gâche tout le style du blog tellement il est laid..

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      L'idée est noté sur ma liste de tutoriels à faire ;)

      Supprimer
  18. J'ai découvert votre blog il y a quelques temps et wooow ça m'aide tellement ! Merci beaucoup beaucoup !
    J'aurais juste une petite question, je viens d'ajouter mon formulaire, mais je souhaiterai qu'il soit centré dans la page, et je ne sais pas où modifier ça.. :/

    Le lien de ma page de contact : http://laurenegrisot.blogspot.fr/p/blog-page.html

    Bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour Laurène,
      Le problème ne vient pas du formulaire mais de ton thème. Ta page ne prend pas la largeur de la zone de ton blog. Les thèmes des sites comme SoraTemplates, ThemeXpose, ou autres, sont pleins d'erreurs.

      Pour régler ce problème cherche le code CSS suivant :

      .main-wrapper{width:auto;margin:0}

      Remplace cette ligne par :

      .main-wrapper{margin:0}

      Puis cherche :

      #content {
      background: #fff;
      float: left;
      padding:10px 20px 20px 0;
      position: relative;
      width: auto;
      }

      Remplace la ligne :

      width: auto;

      Par :

      width: 100%;

      Supprimer
  19. Bonsoir,

    Merci beaucoup pour ce tutoriel ! Il est très bien détaillé et facile à comprendre.
    Malheureusement, je rencontre un petit problème (faut croire que j'ai loupé quelque chose...).
    Ma page "Contact" est créée, je peux même l'afficher afin de voir ce que cela donne, mais en allant sur mon blog, je ne peux pas cliquer sur mon onglet en retrouvant ce fameux formulaire.

    Pouvez-vous me secourir ?? :)

    Bonne fin de soirée !

    Blog : http://cotefille.blogspot.fr/
    Lien page contact : http://cotefille.blogspot.fr/p/contact_1.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le lien "Contact" de ton menu renvoie vers une recherche de libellé "Contact" : http://cotefille.blogspot.fr/search/label/Contact
      Il faut remplacer l'adresse URL de ce lien dans le code HTML de ton menu par l'adresse URL de ta page de contact ;)

      Supprimer
  20. Bonsoir Catherine !

    Tout d'abord je m'excuse de poster cette question n'importe où, mais je n'ai pas trouvé de tutoriel relatif à mon problème :/
    Alor voilà, c'est tout con, mais sur la page principale de mon blog, lorsque l'on clique sur mon image d'accueil (le "Pas d'ethique" est un gadget htlm) on est bien redirigé sur celle-ci, sauf que ça nous ouvre une nouvelle fenêtre !
    Ma question est la suivante : comment faire pour que, lorsque que l'on clique sur mon titre de blog, la redirection vers la page d'accueil se fait directement à partir de la page déjà ouverte, et non dans un nouvel onglet ?

    J'espère que je n'ai pas trop été confuse
    Merci beaucoup si vous prenez le temps de me répondre :)
    http://pasdethique.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonsoir Elo,
      Ouvre ton gadget HTML qui contient l'image de ton en-tête. Tu devrais avoir :

      <div class="separator" style="clear: both; text-align: center;"> <a href="http://pasdethique.blogspot.fr/" target="_blank">
      <img border="0" height="227" src="http://2.bp.blogspot.com/-63HT9_ABjyU/Vp6Juj9aqVI/AAAAAAAAALs/UoM9M2Js4iI/s640/Titre%2B1.jpg" width="997">></a></div>

      Il suffit de supprimer :

      target="_blank"

      Qui se trouve dans le code HTML du lien de l'image (juste après l'adresse URL de ton blog). Ce petit bout de code permet d'ouvrir le lien dans une nouvelle fenêtre ;)

      Supprimer
    2. Merci mille fois, ça a successfully fonctionné !
      Bonne continuation :)

      Supprimer
  21. Bonjour,
    j'ai suivi ton tutoriel à la lettre, mais l'aspect du formulaire ne change pas. Peux-tu m'aider?

    Abby
    https://baguelle.blogspot.be/

    RépondreSupprimer
    Réponses
    1. Bonjour Abby,
      As-tu bien vérifié que tu as bien changé tous les X du code donné par le numéro de ton gadget ?
      Il faut vérifier les codes HTML et les codes CSS ;)

      Supprimer
  22. Merci pour ce tutoriel très bien expliqué !

    RépondreSupprimer
  23. Hello,

    super tutoriel comme toujours. J'ai tout suivi à la lettre mais malheureusement il y a un soucis, le bouton envoyer ne ressemble pas du tout à ce que j'ai mis comme code, et je ne trouve pas l'erreur

    http://carolebenteyn.blogspot.fr

    Merci d'avance :)
    Carole

    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Carole,
      Aucun de tes codes CSS pour ton formulaire de contact n'est pris en compte. Le problème vient du 1er code CSS qui n'est pas fermé (il manque le signe } à la fin du code). Du coup, tous les codes qui suivent cette erreur ne sont pas pris en compte.
      Retrouve cette ligne :

      #ContactForm1 .contact-form {

      Ajoute un signe } juste avant cette ligne comme ceci :

      }
      #ContactForm1 .contact-form {

      Ce qui donne :

      #ContactForm1 .contact-form-widget {
      max-width: 100% !important; /* Largeur du formulaire */
      margin: 0 auto; /* Centre le formulaire sur la page */
      }
      #ContactForm1 .contact-form {

      Tes codes devront maintenant être pris en compte ;)

      Supprimer
  24. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  25. coucou !

    Désolée de poster ce commentaire ici, mais je n'ai pas pu commenter dans les articles correspondants aux barres de navigation...
    Sais-tu pourquoi mes liens se mettent les uns en dessous des autres dans la barre de navigation? :s http://shirleytravalaya.blogspot.fr

    Désolée pour le dérangement

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le blog à été supprimé :/ As-tu réglé le problème ?

      Supprimer
  26. Thomas L08 mai, 2016

    merci pour cet excellent tuto ! j'ai une question pour mon blog, si j'ajuste là largeur à 1280px il reste toujours une bordure qui m'oblige à tout déplacer à -30px à chaque fois, comment pourrais-je l'enlever?

    RépondreSupprimer
    Réponses
    1. Bonjour Thomas,
      Peux-tu me donner le lien de ton blog ?

      Supprimer
  27. Au top ! Merci beaucoup ! J'ai appris que mes formulaires de contact ne fonctionnaient pas car je les avais supprimé sur la mise en page. Merci beaucoup pour ces explications simples et claires.

    RépondreSupprimer
  28. Bonjour,

    j'aimerais savoir s'il y avait possibilité d'ajouter un filtre anti spam dans le formulaire de la page contact.

    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne crois pas que cela soit possible avec le gadget de Blogger.
      Je te conseil pour ça d'utiliser une autre méthode, formulaires Google, ou autre.

      Supprimer
  29. Bonjour, j'ai modifié tout ce que je voulais. Mais rien ne change, seul les données html du formulaire que j'ai mis sur une page du blog fonctionne. Mais quand je modifie celle du modèle en mettant vos codes, je n'ai rien qui bouge. La largeur ne change pas que je modifie soit sur la page, soit sur le modèle rien ne se passe. Les écriture ça marges, les marges aussi mais pas pour agrandir les cases. Je ne peux également rien modifier sur le bouton Valider. D'où est-ce que ça peut venir svp ?

    RépondreSupprimer
    Réponses
    1. Bonjour Amélie,
      Vérifies que tu as bien changé tous les X des codes CSS et HTML par le numéro de ton gadget ;)

      Supprimer
  30. Bonjour!

    Un ENORME merci pour tout tes tutos qui m'ont était super utiles! Je suis entrain de refaire et peaufiner mon blog grâce à toi.

    Seulement, j'ai essayé de m'envoyer deux messages par ce formulaire et je ne reçois rien. Il me semble avoir modifié tout les ContactForm2 en ContactForm1 (pour mon cas). As-tu une solution miracle ?

    Encore milles merci ♥

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien conservé le gadget dans Mise en Page ?

      Supprimer
  31. Bonjour, et merci pour tout tes tutos ! Ca m'aide beaucoup hihi. Seul soucis, je n'arrive pas à changer la police du bouton envoyer. J'ai pourtant tout fait comme il fallait et j'ai vérifié les ContactFormX. J'utilise une police déjà présente sur blogger (syncopate), j'ai suivi les instructions venant de ton lien pour les polices google font. Je ne vois pas où je me suis trompée ... ='(

    Voici le lien de ma page de contacte :
    http://helisma.blogspot.com/p/contact.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réglé le problème car je vois bien cette police sur ton bouton Envoyer ;)

      Supprimer
  32. Bonjour! Me concernant, malgré la suppression du code, le formulaire de contact ne disparait pas de la barre latérale :/ une idée du pourquoi du comment?? merci beaucoup en tout cas pour tes supers conseils :)

    RépondreSupprimer
    Réponses
    1. Ce n'est pas normal, car sans code le formulaire du gadget ne s'affiche pas. Néanmoins, tu peux cacher le formulaire du gadget avec le code CSS suivant :

      aside #ContactForm1 {
      display: none;
      }

      Colle ce code CSS avant la ligne :

      ]]></b:skin>

      Supprimer
  33. Coucou comment fais-tu pour ensuite "cacher" le formulaire de contact de la colonne de droite? J'ai réussi a le mettre dans ma page "contact" de ma barre navigation mais ca m'embête de lavoir aussi sur le coté..; merci :)

    RépondreSupprimer
    Réponses
    1. Ce n'est pas normal, car sans code le formulaire du gadget ne s'affiche pas. Néanmoins, tu peux cacher le formulaire du gadget avec le code CSS suivant :

      aside #ContactForm1 {
      display: none;
      }

      Colle ce code CSS avant la ligne :

      ]]>

      Supprimer
    2. Colle ce code CSS avant la ligne :

      ]]></b:skin>

      Supprimer
  34. Un grand merci pour ce tutoriel. Il m'a été très utile.
    Claires et précises, tes explications sont parfaites.
    Moi qui ne comprend rien au HTML, j'ai réussi du 1er coup !

    RépondreSupprimer
  35. Bonsoir, désolé de vous déranger. J'ai tout fais comme il fallait, mais rien de se modifie, et j'ai tout vérifier mes codes.. Le formulaire s'affiche, mais rien ne se modifie.. (j'en suis qu'à la largeur du formulaire pour l'instant..).

    Pourriez-vous me dire d'où ça vient, ou qu'est-ce qu'y ne va pas dans mes codes?

    Merci beaucoup bonne soirée! :)

    http://iamalexisd.blogspot.fr - http://iamalexisd.blogspot.fr/p/contact.html (la page de contact).

    RépondreSupprimer
    Réponses
    1. Bonjour Alexis,
      Je vois une erreur dans ton code CSS. Un de tes codes n'est pas fermé, il manque le signe }. Tout ce qui suit cette erreur est mal, ou pas, pris en compte. Trouve la ligne :

      /* Comments

      Ajoute un signe } avant cette ligne comme ceci :

      }
      /* Comments

      Sauvegarde.
      Ensuite, je ne trouve pas les codes CSS pour modifier l'apparence de ton formulaire dans ton thème. Tout ce que je trouve c'est :

      #ContactForm1 .contact-form-widget {
      max-width: 400px !important; /* Largeur du formulaire */
      margin: 0 auto; /* Centre le formulaire sur la page */
      }
      #ContactForm1 .contact-form-name, #ContactForm1 .contact-form-email, #ContactForm1 .contact-form-email-message {
      max-width: 100% !important;
      width: 100% !important;
      }

      Il manque le reste des codes CSS ;)

      Supprimer
    2. Pour les codes CSS, il n'y a que ça en effet! Je dois à mon tour y modifier :)
      L'erreur que j'ai modifié à l'air d'avoir tout corriger ce que j'avais perdu! Merci beaucoup tu m'as sauvé! :)

      Supprimer
  36. Bonjour Catherine! Encore un tuto que j'ai suivi à la lettre! Grâce à toi, le design de mon blog a considérablement changé! J'ai évidemment, un petit souci. Lorsque je publie ma page et que je clique dessus pour la visualiser, je tombe sur l'accueil de mon blog et non ma page.... Comme si elle n'existait pas... Je ne comprends pas...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Est-ce que le problème apparaît en cliquant dans le lien de ton menu, ou sur le bouton Aperçu sur la page de création/modification de la page ?

      Supprimer
  37. Bonjour,

    J'ai réussi à personnaliser le formulaire, je pense avoir changé tous les X ou 2 en ContactForm1, le widget est toujours existant dans mise en page mais je ne reçois pas les messages...

    Merci d'avance,
    Benjamin.

    http://rhetcomm.blogspot.fr/p/contact.html

    RépondreSupprimer
    Réponses
    1. Bonjour Benjamin,
      Je n'ai pas accès à ton blog, seuls les lecteurs peuvent le voir. Envoie-moie une invitation à l'adresse suivante : contact@catherinesurr.fr

      Supprimer
  38. J'ai basculé le blog en public :)

    RépondreSupprimer
    Réponses
    1. Bonjour Benjamin,
      C'est vraiment bizarre que tu ne reçois rien. Si le gadget est bien présent dans mise en page tu devrais bien recevoir les messages.
      J'ai juste remarqué un détail mais je ne sais pas si ça va changer quelques chose. Va sur ta page de contact, en mode HTML. Retrouve ceci dans le code HTML de ton formulaire :

      <div class="separator" style="clear: both; text-align: center;">
      <br></div>

      Et supprime-le.

      Dans le code HTML de ton thème, vérifies que tu as bien laissé :

      <b:includable id='main'>

      et :

      </b:includable>

      Dans le code du gadget.

      Supprimer
  39. Cela ne semble pas marcher... Je t'ai envoyé une invitation sur contact@catherinesurr.fr pour gérer le blog si jamais tu veux aller voir ;)

    Merci d'avance :)

    RépondreSupprimer
  40. C'est bon ça marche !

    Je ne sais pas pourquoi mais il m'envoie les messages sur une autre adresse... Heureusement que j'y suis allé faire un tour au hasard !

    Encore merci !

    RépondreSupprimer
  41. Heeey je suis du maroc je viens de decouvrir ton joli blog MErciiiiiiiiiiiiiii bcp bcp bcp pour ces informations J'ai réussi à créer et personnaliser mon formulaire....mais j'ai un problème .quand je fait un test un message d'erreur dit : A valid email address is required. et j'ai tout essayer vérifier les erreurs entrer bcp des adresses maiis j'ai encore le prb :/ tu peux m'aider ?!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog, ou de ta page de contact avec le formulaire pour que je puisse voir le problème ?

      Supprimer
  42. Encore merci pour tous ces tutos qui nous aident beaucoup :) Je peux enfin avoir un blog digne de ce nom ! Mais pour changer, j'ai encore un problème. J'ai suivi à la lettre tes indications mais quand je passe mon curseur sur "Envoyer" il ne change pas de couleur, hors c'est ce que j'avais codé. De plus, mon bouton "Envoyer" est collé au champs "Message" mais je ne retrouve pas la marge que je dois modifier dans le code HTLM pour y remédier :/ Pourrais-tu m'aider ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a une erreur dans ton code CSS. Un commentaire n'est pas fermé, du coup cela cause des problèmes de lecture du code pour le navigateur, qui ne prend pas en compte le code CSS qui suit l'erreur. Voici ce que tu as :

      #ContactForm1 .contact-form-button-submit {
      height: auto !important;
      width: 400px !important; /* Largeur du bouton valider */
      margin: 0 auto !important; /* Centre le bouton valider */
      background: #F49AF5 !important; /* Fond du bouton valider */
      -webkit-border-radius: 0 !important; /* Arrondi des bords du bouton valider */
      border-radius: 0 !important; /* Arrondi des bords du bouton valider */
      border: 1px solid #D06EC6 !important; /* Bordure du bouton valider : épaisseur | style | couleur */
      padding: 5px 5px 5px 5px !important; /* Marge au-dessus - à droite - en-dessous- à gauche du texte du bouton valider */
      font-family: 'Verdana', sans-serif !important; /* Police du texte */
      font-size: 13px !important; /* Taille de la police du texte */
      text-align: center !important; /* Alignement du texte : left = à gauche | center = centré | right = à droite */
      color: #ffffff !important; /* Couleur du texte */
      font-weight: normal !important; /* Graisse du texte : normal = normal | bold = gras */
      text-transform: uppercase !important; /* Transformation du texte : uppercase = majuscules | lowercase = minuscules | initial = normal */
      letter-spacing: 2px !important; /* Espace entre les caractères du texte *
      }
      #ContactForm1 .contact-form-button-submit:hover {
      cursor: pointer;
      background: #ffffff !important;
      }

      Il manque le signe / à la fin de cette ligne :

      letter-spacing: 2px !important; /* Espace entre les caractères du texte *

      Rajoute ce signe comme ceci :

      letter-spacing: 2px !important; /* Espace entre les caractères du texte */

      Et voilà ;)

      Supprimer
    2. Merci beaucoup je ne sais pas comment j'ai pu ne pas le voir :o Merci encore d'avoir pris le temps de me répondre :)

      Supprimer
  43. Bonjour,
    Super tutoriel, très clair et avec les screenshots c'est parfait.
    Merci pour le temps gagné.
    Adrien

    RépondreSupprimer
  44. Merci beaucoup pour ce tuto qui a du te prendre un temps incroyable, grace à toi j'ai quelque chose de minim et qui me plait =D Merci Merci Merci

    RépondreSupprimer
  45. Hello ! Mon nouveau template me posait un gros problème : les champs de saisies du formulaire de contact sont noirs et, quoique je fasse, il le restent. Donc, on ne voyait pas le texte du message qu'on envoyait. Gênant ... La nuit porte conseil et, ce matin, j'ai décidé de changer la couleur du texte. Grâce à toi, j'ai un résultat qui est très satisfaisant. Mille mercis !!!!

    RépondreSupprimer
  46. Bonjour Catherine, j'ai essayé de faire ce tuto mais je n'y suis pas arrivée, le formulaire ne disparaît pas sur ma page principale de mon blog et ne se modifie pas avec le code CSS.
    Est-ce que tu pourrais m'aider.
    Merci d'avance,
    Lunatia.

    Ps: l"IRL de mon blog est https://leblogdelunatia.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien supprimé le code à l'intérieur du gadget ?
      Pour l'apparence du formulaire, il y a des erreurs dans tes codes CSS. Un oubli de signe : ; /* */ { ou } et tout ce qui suit l'erreur est mal ou pas pris en compte. De même avec un signe en trop.
      J'ai trouvé un erreur dans le code :

      .blog-pager-older-link, .home-link, .blog-pager-newer-link {
      background-color: transparent; /* Supprime le fond */
      padding: 5px;
      font-size: 18px; /* Taille de la police des liens */
      font-weight: normal; /* Style des liens : normal = normal | bold = gras
      }
      #blog-pager a {
      color: #2A2A2A important!; /* Couleur des liens */
      }

      Il manque */ à la fin du commentaire à la ligne :

      font-weight: normal; /* Style des liens : normal = normal | bold = gras

      Rajoute-le comme ceci :

      font-weight: normal; /* Style des liens : normal = normal | bold = gras */

      Si en réglant cette erreur cela ne change rien, c'est qu'il y a une autre erreur dans ton code. Vérifie tous les codes CSS qui suivent.

      Supprimer
    2. J'ai bien vérifié mais ça ne marche toujours pas. Je pense que l'erreur vient d'ailleurs...
      J'ai du trafiquer quelque chose où je ne sais pas quoi dans le code HTLM :/

      Supprimer
    3. Le code HTML de ton formulaire semble correct, je pense qu'il doit encore y avoir des erreurs dans ton code CSS, par exemple j'ai trouvé ceci :

      h2.date-header {
      margin-top: 40px; /* Espace au-dessus de la date */
      margin-bottom: 50px;important!; /* Espace en-dessous de la date */
      text-align: center;important!; /* Alignement de la date : center = centré left = | à gauche | right = à droite */
      position: relative;
      display: block;
      z-index: 0;
      width: 100%;
      }

      Les 2 lignes suivantes ont une erreur :

      margin-bottom: 50px;important!; /* Espace en-dessous de la date */
      text-align: center;important!; /* Alignement de la date : center = centré left = | à gauche | right = à droite */

      Tu as important!; après le ; à chaque ligne or tu ne devrais avoir qu'un seul ;
      De plus, il faut écrire !important et non important!

      Remplace ces 2 lignes par :

      margin-bottom: 50px !important; /* Espace en-dessous de la date */
      text-align: center !important; /* Alignement de la date : center = centré left = | à gauche | right = à droite */

      Supprimer
  47. Bonjour Catherine, j'ai ENCORE bien vérifié, cette fois-ci minutieusement ^^;
    Et le problème persiste... Je ne sais pas si c'est moi qui vérifie très mal ou si le problème vient d'autre part car j'ai également essayé ton tuto pour la barre de cookies de blogger et je n'y suis pas arrivée :/
    Voilà, j'espère que tu m'aideras à trouver une solution, car ce n'est pas avec le peu de mes connaissances en programmation que j'y arriverais.
    En tous cas je te remercie pour la énième fois pour tes tutos, car c'est grâce à toi que j'ai pu réaliser un blog aussi beau ;-).
    Merci d'avance,
    ~Lunatia~

    RépondreSupprimer
    Réponses
    1. Bonjour Lunatia,
      En allant voir ta page de contact je vois que tu as réussi à trouver le problème. Le code CSS de ton formulaire à bien été pris en compte ;)

      Supprimer
  48. Salut Catherine,
    Merci pour ce super travail.
    Tout fonctionne parfaitement sauf que lorsque je m'envoie un mail de test rien ne fonctionne.
    J'avais déja suivi un autre tuto et le pb est le même.
    Je ne vois pas ce qui pèche.

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. As-tu bien conservé le gadget de contact dans la Mise en page ? Si tu le supprimes, le formulaire ne fonctionnera pas.
      Si tu ne l'as pas supprimé, alors vérifie ton adresse e-mail dans les paramètres du blog.
      Vérifies également tes spams car les e-mails sont envoyés avec une adresse Blogger.

      Supprimer
  49. j'ai déja fait ces vérifications.
    jene comprends pas trop ou je fais une erreur.
    En tout cas merci pour le tuto et tes réponses aux messages.

    RépondreSupprimer
    Réponses
    1. voici un lien de la page si ça peux aider

      https://derrierelacolline.blogspot.com/p/contact.html

      Supprimer
    2. Le code du formulaire semble pourtant correct. Tu peux essayer de supprimer le formulaire de ta page de contact, de supprimer le gadget dans Mise en page, et de recommencer.

      Supprimer
  50. Bonjour Catherine,

    D'abord merci pour tes conseils.

    j'ai appliqué les instructions du tutoriel. Quand je fais aperçu sur la Page du formulaire de contact , je reçois bien le formulaire.

    Par contre quand je vais sur le blog, je ne trouve pas le formulaire de contact.

    As-tu une idée de ce qui se passe?

    Merci d'avance de ton aide.

    RépondreSupprimer
    Réponses
    1. Bonjour Patrick,
      Peux-tu me donner le lien de ta page de contact sur laquelle tu as ajouté le formulaire ?

      Supprimer
  51. Merci énormément pour cet article qui me sauve!! Explications au top, j'ai tout compris ! merci!!

    RépondreSupprimer
  52. Bonjour,
    tout d'abord je voulais dire merci pour tous les tutoriels car ils m'aident beaucoup! Cependant j'ai un petit problème avec celui-ci, je voudrais que mon formulaire de contact soi centrer sur ma page et il ne bouge absolument pas alors que j'ai copié coller le code... Je ne vois pas d'où viens l'erreur.

    http://citadelleimaginaire.blogspot.be/

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      Je vois que tu as résolu ton problème ;)

      Supprimer
    2. Oui, en chipotant un peu pour centrer le texte en même temps que le cadre, le problème s'est résolu! :D

      Supprimer
  53. Des tutoriels au top et hyper bien expliqués. Milles Merci
    J'ai suivi à la lettre, chaque étape du tuto mais je garde encore le formulaire de base dans ma page.
    J'ai même vérifié s'il manquait des caractères spéciaux pour ouvrir et fermer chaque balise.
    Je t'avoue être perdue :S J'ai même un bug avec mon bouton envoyer qui se place sur la droite du formulaire.
    Voici l'URL de ma page :) http://www.larubriquedelylia.com/p/me-contacter_8.html

    HELP ME PLEASE

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as ajouté un commentaire dans le code CSS :

      <!-- MISE EN PAGE DE LA PAGE DE CONTACT - FORMULAIRE DE CONTACT -->

      Or ceci est un commentaire HTML. Un commentaire CSS s'écrit :

      /* MISE EN PAGE DE LA PAGE DE CONTACT - FORMULAIRE DE CONTACT */

      Les signes > et < ne sont pas compatibles avec le CSS. Le problème d'apparence vient de là, car tout ce qui suit cette ligne n'est donc pas pris en compte ;)

      Petite remarque, certains bugs peuvent venir de ton thème car les thèmes des sites ThemeXpose, SoraTemplates, etc., sont pleins d'erreurs.

      Supprimer
  54. j'ai voulu faire un test mais quand j'appuie sur "envoyer" il ne se passe rien :/...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifie bien que tu as modifié tous les X dans le code HTML par ceux du nom de ton gadget de Formulaire de Contact, sinon il ne sera pas associé au gadget.

      Supprimer
  55. Bonsoir Catherine
    Je te souhaite avant tout une très bonne et heureuse année pour 2017 qu'elle t'apporte la santé et du travail.Un grand merci pour tes tutos! j'ai réussi à installer " le formulaire de contact" mais dans le widget il n"y a que le "contactForm1" et je ne peux pas modifier le texte " votre nom votre mail etc"
    Quelle est la marche à suivre pour que cela fonctionne sur le blog
    " http://sampieromodels.blogspot.fr/"
    Merci d'avance
    jo

    RépondreSupprimer
    Réponses
    1. Bonjour Joseph,
      Merci, tous mes vœux de bonheur pour la bonne année également :)
      Pour ce qui est du gadget formulaire de contact, pour le modifier tu peux suivre les instructions du tutoriel en supprimant le code du gadget, mais au lieu de coller le nouveau code du formulaire dans une page, tu peux le coller entre les lignes du gadget :

      <b:includable id='main'>

      et :

      </b:includable>
      Tu pourras ainsi modifier le contenu du gadget comme tu voudras ;)

      Supprimer
  56. Bonjour Catherine !
    Tout d'abord je voudrais te remercier pour tous tes magnifiques tutos qui me sont bien utiles !
    J'ai un petit problème car j'aimerais que mon formulaire de contact apparaisse dans une catégorie de ma barre de navigation seulement je ne sais pas comment faire peut-tu m'aider?
    J'aimerais aussi ajouter mes liens de réseaux sociaux si c'est possible bien sûr !

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Merci ^^
      Souhaites-tu qu'il apparaisse dans le menu ou alors sur la page de recherche de ton libellé (en cliquant sur le lien de ton menu) ?

      Supprimer
  57. Bonjour Catherine !

    Merci pour ce tutoriel très bien expliqué, je me suis bien amusée en le mettant en oeuvre sur mon blog !
    J'aurais cependant une petite question, si tu as un peu de temps à m'accorder bien sûr !

    Il n'y a aucun problème avec le formulaire, il marche parfaitement bien. Le problème vient plutôt de la page en soi. J'ai effectivement désactivé les commentaires sur la page en question pour que seul le formulaire y apparaisse, mais je vois toujours en bas à droite du formulaire la mention "0 Mots doux".. Aurais-tu un moyen de la faire disparaître sur cette page ? J'espère que ma question n'est pas trop bête !

    Merci d'avance ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui tu peux cacher le pied d'article sur toutes les pages statiques (créés sous Pages) avec un code conditionnel. Ajoute ce code :

      <!-- Affichage sur Pages -->
      <b:if cond='data:blog.pageType == "static_page"'>
      <style type="text/css">
      .post-footer {
      display: none;
      }
      </style>
      </b:if>

      Avant la ligne suivante dans ton code :

      </body>

      Si tu souhaites cacher le pied d'article seulement sur ta page de contact, alors colle :

      <style type="text/css">
      .post-footer {
      display: none;
      }
      </style>

      Dans le code HTML de ta page, après le code du formulaire de contact par exemple.

      Supprimer
  58. Super article j'ai enfin un formulaire de contact et je peux cacher mon mail ^^
    Bon par contre je n'ai pas encore réussi les modifs avec le CSS.

    RépondreSupprimer
  59. Bonjour !
    J'avais laissé un commentaire sur cet article hier, et au final j'ai réussi à résoudre mon problème en utilisant les conditional tag, j'espère que je n'ai pas fais de bêtises en bidouillant tout de même. Et j'espère également que tu verras ce commentaire en même temps que celui d'hier ! :)
    J'ai cependant une autre question, qui n'a rien à voir avec le design du blog ^^. Je me demandais si le fait d'avoir un blog nous imposait des contraintes juridiques ? (les mentions légales sont-elles obligatoires, doit-on laisser le message "fourni par blogger" dans le pied de page, mon logo doit-il être fait avec une écriture dont je détiens la licence, etc.).

    Encore merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ce sont de très bonnes questions ! Effectivement, il y a bien des contraintes juridiques imposées à tout site web, dont les blogs. Tu en as cités quelques uns : mentions légales, les attributions (fourni par blogger ou qui à fait le design du blog, les éléments graphiques) qui peuvent être dans les mentions légales, le logo et les autres éléments graphiques (photos, illustrations) dont tu dois avoir les droits de publication sur ton blog. A noter que les photos et polices libres de droits qui sont souvent gratuits ne posent pas de problème. Attention toutes les polices gratuites ne sont pas libre de droits !
      Tu me donnes un idée d'article, car je pense que c'est un point très important que beaucoup de blogueurs ignorent ! :)

      Supprimer
    2. Hello !

      Oui je me suis penchée un peu plus sur la question du coup. En plus étant étudiante en droit, ce serait un peu un comble que je ne respecte pas les obligations légales concernant la propriété d'un site web..
      Effectivement, j'ai vu que les mentions légales étaient obligatoires, et que s'il ne s'agit que d'un blog personnel, on a le choix de mettre ou non notre nom, mais dans tous les cas, il faut citer l'hébergeur du site. Je suis d'accord, ce serait vraiment cool que tu fasses un article sur le sujet, tu pourrais par exemple donner une rédaction "type" pour les mentions légales, qui ne sont pas toujours facile à rédiger, mais ce n'est qu'une idée :)
      J'ai également appris - n'hésite pas à me corriger si je me trompe - qu'il fallait déclarer son site web à la CNIL à partir du moment où il est possible de laisser des commentaires sur le blog, ou encore lorsqu'il est possible de contacter le propriétaire du blog via un formulaire de contact, et ce, même si le blog n'a qu'un usage personnel pour son propriétaire.
      En parlant de police d'écriture, mon logo est fait avec une police d'écriture gratuite, que j'ai téléchargée en libre accès sur internet. J'ai justement regardé les droits d'auteur et il est précisé que je peux utiliser cette police d'écriture pour un usage personnel uniquement. Est-ce que cela signifie que je peux l'utiliser pour mon logo comme je le fais, du moment que mon blog n'est pas monétisé ? Il faudra que je change pour une écriture payante (avec achat d'une licence) si, un jour, je décide de le faire monétiser, je me trompe ?

      J'aurais également une autre question qui n'a rien à voir, si tu as le temps de me répondre bien évidemment. Je viens d'acheter un nom de domaine pour mon blog, je l'ai paramétré sur Blogger donc tout est en place. Seulement, j'aurais aimé activer le protocole HTTPS sur mon blog, je trouve que cela "rassure" plus les gens lorsqu'ils voient qu'ils sont sur un site sécurisé. Cependant, dans mes paramètres, il est écrit "Avertissement : Le protocole HTTPS n'est actuellement pas disponible pour les blog de domaines personnalisés". J'aurais donc voulu savoir s'il existait un moyen de "contourner" cela.

      Merci beaucoup pour tes réponses en tout cas ! Et encore merci pour tous tes tutoriels, grâce à toi, mon blog est fin prêt !

      Passe une bonne journée,

      Beslys

      Supprimer
    3. Bonjour Beslys,
      Un modèle type de mentions légales est effectivement une bonne idée ! En attendant il existe un générateur de mentions légales gratuit, mais pas tout à fait adapté aux blogueurs (il y a des choses inutiles qui ne correspondent pas aux blogueurs).

      Pour ce qui est de la CNIL j'ai regardé ça à l'époque, et il y a justement des particularités pour les blogs. Tu dois te déclarer à la CNIL si tu récolte des informations personnelles. L'adresse e-mail ou le prénom n'entrent pas dans cette catégorie, donc si tu utilises seulement les commentaires ou un formulaire de contact qui ne demande que le prénom et l'adresse e-mail tu n'es pas obligée de te déclarer à la CNIL. Par contre, si tu récolte l'adresse personnelle par exemple, oui tu es obligée de le déclarer. La déclaration se fait de manière rapide, simple et gratuite sur leur site ;)

      Pour la police de ton logo, ce qui est considéré usage personnelle c'est quand tu l'utilises pour toi. Tant que tu ne vend pas quelque chose (un produit, un livre, etc.) qui contient cette police, ou que tu ne redistribue pas le fichier de la police (même de manière gratuite), alors c'est bon ;)

      Et pour le https pour les domaines personnalisés je t'avoue ne pas m'être penché sur le sujet. J'ai décidé de garder mon nom blogspot.fr sur le blog (pour montrer que mon blog à été créé sur Blogger) donc je n'ai pas eu de problème. Pour mon site (catherinesurr.fr) j'ai activé un certificat SSL chez mon hébergeur qui permet d'avoir le https justement. Mais comme ici le blog est hébergé sur Google, je ne sais pas si c'est applicable dans ton cas :/

      Supprimer
  60. Bonjour Catherine !

    Merci pour cette réponse complète :)

    Merci beaucoup pour le générateur ! Même s'il n'est pas tout à fait adapté, ça fera l'affaire en attendant, et puis il vaut mieux en mettre plus que pas assez comme on dit ! :)

    Pour la CNIL effectivement apparemment il y a une dérogation pour les blogueurs, mais je n'avais pas compris la subtilité jusqu'à ce que je lise ton commentaire alors je t'en remercie !

    Pour ce qui est de la police d'écriture, si j'ai bien compris, même monétisé, je peux utiliser la police sur mon blog sans problème car je ne le vend pas à proprement parlé.

    Je pense que ce n'est pas possible d'avoir le protocole https sur mon site en étant hébergée par blogger malheureusement oui.. Mais justement en parlant de ça je pense que je pourrais te donner une seconde idée d'article ; tu pourrais par exemple expliquer comment acheter un nom de domaine et comment choisir/acheter son hébergement, passer de blogger à WordPress.org, etc. Je suis sûre que même si ton blog est axé sur la plateforme blogger, ça pourrait intéresser beaucoup de personnes puisque j'avais entendu dire que pour développer son site en le rendant le plus personnalisable possible, il fallait à un moment donné passer sur une autre plateforme.

    Gros bisous et encore merci de prendre le temps de me répondre !

    Beslys

    RépondreSupprimer
  61. Coucou Catherine,
    Un énorme merci pour ta réponse et encore plus pour ton blog qui m'aide beaucoup :-)
    J'ai tout bien installé en suivant tes conseils, mais je ne sais pas pourquoi le bouton "envoyer" dans ma page de contact reste en bleu, j'ai pourtant tout suivi à la lettre et j'ai réussi à changer la taille du formulaire, la couleur etc mais le bouton "envoyer" reste en bleu...
    Autre chose, j'aimerais changer le formulaire de commentaires, agrandir la taille du formulaire (le mettre plus large), et permettre aux gens de mettre leur nom, leur adresse mail et leur site au lieu de ce que j'ai actuellement, mais je ne sais pas du tout comment faire, j'ai beau à chercher je ne trouve rien, pourrais-tu m'aider ?

    Voici le lien de mon blog comme tu m'as demandé : www.monbeautyguide.com

    Merci mille fois et merci pour ton temps <3
    Bonne journée !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il n'est pas possible de modifier le formulaire de commentaire sur Blogger car il est chargé à partir de Blogger et ne fait pas vraiment partie du blog en soi.
      As-tu réglé le problème de ton bouton Envoyer ? Car en allant sur ton blog je le vois en rose :)

      Supprimer
  62. Bonjour Catherine, un énorme merci pour ce tuto.
    Je ne sais si tu fais encore "le suivi" pour le formulaire de contact, mais j'ai un souci dans l'affichage. J'ai suivi pas à pas tes conseils (je ne pense pas avoir oublié des étapes) mais aucune des modifications apportées au formulaire n'apparait quand la page contact s'affiche :-(
    Encore merci pour tout
    I.

    RépondreSupprimer
    Réponses
    1. Bonjour Ilaria,
      Peux-tu me donner le lien de la page de contact que je puisse voir d'où peut venir le problème ?
      En regardant rapidement ton blog je ne vois pas les codes CSS qui définissent l'apparence du formulaire :/

      Supprimer
    2. Merci Catherine pour ta réponse. Le site dans lequel j'ai essayé d'installer la page contact est actuellement offline. c'est www.ilariafatone.com Je pourrais t'inclure parmi les bloggeurs autorisés pour que tu puisses avoir accès au backoffice, mais il me faut ton mail ... merci pour ton aide. i.

      Supprimer
    3. Bonjour Ilaria,
      Mon mail est : contact@catherinesurr.fr

      Supprimer
  63. Bonjour,

    Merci pour ce tuto !!
    J'ai fais un test sur mon blog, mais je ne reçois pas les infos comme "nom" "email" ou "comment m'avez vous connu", je ne reçois que le message !
    Que dois-je faire ?

    http://www.lisahoshi-photographie.com/p/contacter.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Normalement la mise en pages des e-mails est comme ceci :

      Le message en premier

      Cordialement,
      Le nom | L'e-mail

      Remarque : Cet e-mail a été envoyé via le gadget Formulaire de contact disponible à l'adresse https://tonblog.blogspot.fr.

      Supprimer
    2. Merci mais est-il possible de rajouter des infos comme "Votre ville" "Comment m'avez-vous trouver" ?
      J'ai tenté de compléter le code dans la même logique que pour "Votre nom", ect, mais cela ne fonctionne pas. Je me demande si cela est possible :D

      Supprimer
    3. Bonjour,
      Malheureusement non ce n'est pas possible. Le gadget Blogger ne propose que les champs Nom (ou Prénom), E-mali et Message ;)

      Supprimer
  64. Bonjour Catherine,
    Merci encore pour ce super tuto.
    Tout a fonctionné à merveille, sauf que l'on voit toujours les contours du gadget sur la barre latérale... J'ai essayé avec le code :

    aside #ContactForm1 {
    display: none;
    }
    avant la ligne : ]]>

    Mais rien ne change.
    Merci d'avance <3
    http://wild--amanda.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient simplement de ton thème. Comme c'est un thème tiers, les codes sont un peu différents.
      Enlève le aside avant le code, car le contenant de ta barre latérale n'est pas aside ;)

      Supprimer
    2. Merci beaucoup pour ta réponse rapide, en effet ça marche !

      Supprimer
    3. En fait ça fait bien disparaitre l'encadré sur la page d'accueil, mais ça fait également disparaitre mon formulaire de contact... :/
      Merci,

      Supprimer
    4. Effectivement,
      L'erreur vient de moi ^^'
      Utilise ce code CSS :

      #sidebar #ContactForm1 {
      display: none;
      }

      Supprimer
    5. Super, merci beaucoup !!

      Supprimer
  65. Bonjour Catherine,
    Merci pour ton super blog qui est une mine de trésor.
    Jusqu'ici j'ai réussi à tout faire mais là je bloque. J'ai bien suivi ton tuto ainsi que les commentaires mais impossible de faire disparaitre le formulaire de ma page d'accueil/
    J'ai essayé avec
    aside #ContactForm1 {
    display: none;
    }

    Et avec

    #sidebar #ContactForm1 {
    display: none;
    }

    Mais ça ne change rien. Merci pour ton aide précieuse
    http://lesvoyagesextraordinairesdelea.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Sophia,
      Comme ton gadget est dans ton pied de page et non la barre latérale, ces codes CSS ne fonctionneront pas. Utilise celui-ci à la place :

      footer #ContactForm1 {
      display: none;
      }

      Supprimer
  66. Salut Catherine,

    Je suis en pleine construction de mon future blog et avant de commencer à poster des articles je m'occupe des pages clés comme la page contact. J'ai donc crée grâce à ton tuto un formulaire de contact avec un design qui fonctionnait jusqu'au moment ou j'ai retiré les bordures sur les images. A partir de la le design de mon formulaire de s'affichait plus...

    Pourrais tu m'aider?

    Le lien de la page ou le formulaire apparait et celui ci: http://afrenchtraveler.blogspot.com.au/p/contact.html

    Normalement je t'ai ajoutée aux lecteurs du blog

    PS: Habitant en Australie et à cause du décalage horaire il se peut que je réponde pas tout de suite...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si l'apparence de ton formulaire a disparu en modifiant du code CSS, alors tu as dû faire une erreur dans ton code CSS. Un oubli d'un des signes suivants, ou un signe en trop, et tout ce qui suit cette" erreur n'est pas pris en compte par le navigateur :

      { : ; } /* */

      Vérifies tous tes codes CSS pour voir s'il ne manque pas un signe, ou s'il n'y en a pas un en trop ;)

      Supprimer
    2. Merci beaucoup, je vais y jeter un oeil ;)

      Mon menu déroulant à également subis des modifications, serait-ce le même type de problème?

      Supprimer
    3. Bonjour,
      Oui c'est possible. S'il y a une erreur dans les codes CSS qui précèdent ceux de tes menus déroulants, alors ça peut expliquer ce changement ;)

      Supprimer
  67. Super tuto qui viens de me filer un sacré coup de pouce ! Je viens de découvrir ton blog qui est une véritable mine d'or.

    Malheureusement, il doit y avoir un couac quelque part chez moi, car si le formulaire s'affiche bien sur la page de contact, impossible de saisir des informations dans les différents champs. Je n'arrive pas à trouver d'où provient le le problème. Une idée peut-être ?
    https://blogabricolage.blogspot.com

    Merci d'avance pour ton aide.

    RépondreSupprimer
    Réponses
    1. Bonjour Malou,
      As-tu réglé le problème ? Car je viens de tester et je peux bien remplir les champs ;)

      Supprimer
  68. Bonjour Catherine, je tiens tout d'abord à vous remercier sincèrement pour tout le travail que vous fournissez. Je suis très heureuse de pouvoir bidouiller mon blog et de voir son évolution grâce à vous. Je rencontre aujourd'hui un problème, le gadget formulaire de contact ne s'affiche nulle part...Vous savez certainement d'où peut venir le problème, j'espère que vous pourrez m'aider. Bien à vous.

    RépondreSupprimer
    Réponses
    1. Bonjour Floria,
      Peux-tu me donner le lien de ton blog pour que je puisses voir le problème ? :)

      Supprimer
    2. Alors j'ai réussi à mettre le formulaire sur ma page d'accueil et dans le menu de ma version mobile, cependant je rencontre un problème, il y a un grand espace entre mon en-tête et mon diaporama et mes titres d'articles ne sont plus centrés sur la version mobile.

      L'adresse de mon blog: https://floriateazeanne.blogspot.com/

      Supprimer
    3. Bonjour Floria,
      Alors en fait ce n'est pas un grand espace, c'est simplement les images du diaporama qui sont limités à la largeur du diaporama. Comme ils ne font pas la même taille (proportionnellement) en hauteur, cela laisse une zone blanche. Pour régler ce problème ajoutes le code CSS suivant :

      .mobile .owl-carousel .owl-item .img img {
      width: auto;
      max-width: 200%;
      height: 100%;
      }

      Avant la ligne :

      ]]>&lt:/b:skin>

      Maintenant tu peux rectifier la hauteur de ton diaporama sur mobile car il est très grand. Ajoutes le code suivant :

      .mobile .owl-carousel, .owl-item .img {
      height: 300px;
      position: relative;
      }

      A la suite du précédent.

      Ensuite, je te conseil de modifier la taille des titres du diaporama, ainsi que la largeur de la zone de texte pour que cela soit plus lisible. Ajoutes :

      .mobile .owl-item .item .info {
      width: 60%;
      }

      .mobile .owl-item h3.rptitle a {
      font-size: 16px;
      }

      Toujours à la suite des codes précédents.

      Pour l'alignement des titres de tes articles, ajoutes :

      h3.mobile-index-title.entry-title {
      margin: 0 auto !important;
      }

      Toujours avant :

      ]]></b:skin>

      Supprimer
    4. Un million de mercis à toi !! ça a marché !! Tu es géniale !! Merci de m'avoir répondu. Je suis ravie !!! Douce soirée à toi

      Supprimer
  69. Bonsoir Catherine,

    Tout d'abord bravo pour votre blog qui m'aide vraiment à faire mon design/mise en page :) j'ai bien suivi les étapes pour introduire le formulaire de contact dans une page, cependant je n'ai pas compris/réussis à le masquer de la mise en page dans la barre latérale ... Ai je loupé une étape?

    Merci d'avance :)
    Marie

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      As-tu réussi à cacher le formulaire dans la barre latérale ? Car je ne le vois pas dans ta barre latérale ;)

      Supprimer
  70. Bonjour,

    Tout d'abord un grand merci pour ce site, n'étant pas un "pro" de l'informatique je le trouve assez clair, relire tout de même plusieurs fois et surtout comprendre avant de se lancer.
    Bravo pour le tutoriel concernant l'introduction d'un formulaire de contact que j'ai, enfin, réussi à mettre dans mon blog.
    Je partage ce site.
    Merci
    Franck

    RépondreSupprimer
  71. Re bonjour,
    Je n'arrive pas a centre le bouton "envoyer" dans le formulaire, alors qu'il me semble faire correctement les modifications ! Pourriez vous m'apporter votre aide.
    Cordialement

    RépondreSupprimer
    Réponses
    1. Bonjour Franck,
      Peux-tu me donner le lien de ta page qui comporte le formulaire de contact ? Pour que je puisses voir d'où peut venir le problème :)

      Supprimer
  72. Bonjour,
    Désolé de vous contacter à nouveau, mais après plusieurs essais et relecture de votre tutoriel j'ai enfin réussi à centrer dans le formulaire le bouton "envoyer".
    Encore merci pour votre site.
    Bien à vous
    Franck

    RépondreSupprimer
  73. Bonjour, j'ai suivi toutes vos indications, mais quand je vais voir mon formulaire, il n'a pas changer d'apparence. Pourtant il semble avoir changer tout les 2 par 1.
    Merci d'avance pour votre réponse :p

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ta page comportant le formulaire de contact ?

      Supprimer
  74. Voilà,
    http://alissandbooks.blogspot.ch/p/me-contacter_1.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as une erreur dans le code CSS qui précède les codes CSS de ton formulaire de contact. C'est pour cela qu'il ne sont pas pris en compte.
      Si des codes CSS ne sont pas pris en compte vérifie toujours que dans ces codes CSS, ou dans ceux qui les précèdent, il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Retrouve ce code :

      .column-right-inner h2 {
      font-family: Coming Soon;
      font-size: 12px;
      text-transform: uppercase;
      color: #000000;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      #ContactForm1 .contact-form-widget {
      max-width: 400px !important; /* Largeur du formulaire */
      margin: 0 auto; /* Centre le formulaire sur la page */
      }

      Le code avant celui qui commence par #ContactForm1 .contact-form-widget { n'est pas fermé : il manque le signe }. Tout ce qui suit cette erreur n'est pas pris en compte.

      Ajoute un signe } avant la ligne :

      #ContactForm1 .contact-form-widget {

      Comme ceci :

      .column-right-inner h2 {
      font-family: Coming Soon;
      font-size: 12px;
      text-transform: uppercase;
      color: #000000;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }
      #ContactForm1 .contact-form-widget {
      max-width: 400px !important; /* Largeur du formulaire */
      margin: 0 auto; /* Centre le formulaire sur la page */
      }

      Supprimer
    2. Oh génial !! Merci infiniment ♥

      Supprimer
  75. Salut à toi et encore merci pour ce super tuto !! Je n'arrive pas à centrer ou bouger mon formulaire sur https://iulilie.blogspot.fr/p/contact.html pourtant j'ai mis exactement comme toi. J'espère que tu pourras m'éclairer. Bonne continuation pour ton blog :)

    #ContactForm1 .contact-form-widget {
    max-width: 100% !important; /* Largeur du formulaire */
    margin: 0 auto; /* Centre le formulaire sur la page */
    }

    #ContactForm1 .contact-form-name, #ContactForm1 .contact-form-email, #ContactForm1 .contact-form-email-message {
    max-width: 100% !important;
    width: 100% !important;
    }

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réglé le problème ? Car le formulaire et bien centré ;)

      Supprimer
  76. Bonjour,

    J'avais installé un contact form il y a plusieurs mois. Tout fonctionnait correctement, jusqu'à ce que je remarque qu'il était impossible d'envoyer un message lorsqu'on utilisait ce contact form sur mobile (tout fonctionnait sur ordinateur). J'ai donc refait toutes les étapes de ce tutoriel, mais j'ai le même problème: la version ordinateur fonctionne mais pas celle sur mobile.
    Auriez-vous une idée du problème ?
    Bien à vous,
    Antoine (www.raspberrylipstick.com)

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      J'ai testé mon propre formulaire de contact et il marche correctement sur mobile.
      Essaye de chercher le nom de ton gadget dans le code HTML de ton thème et d'ajouter un code pour l'activer sur mobile.
      Tout d'abord retrouve le nom de ton gadget. Ensuite cherches le code suivant dans ton thème :

      <b:widget id='ContactForm1'

      Avec le nom de ton gadget à la place de ContactForm1.
      Ajoutes ceci à la suite :

      mobile='yes'

      Comme ceci :

      <b:widget id='ContactForm1' mobile='yes'

      Sauvegardes et test à nouveau le formulaire sur mobile.

      Supprimer
    2. Bonjour,

      Merci pour votre réponse. J'ai ajouté mobile='yes' à la suite cependant cela ne change rien. Il fonctionne sur ordinateur mais pas sur mobile.

      Bien à vous,
      Antoine

      Supprimer
    3. Bonjour Antoine,
      As-tu activé la version Personnaliser sur mobile ?
      Vas dans Thème. Cliques sur le rouage sous l'aperçu de la version mobile. Sélectionne Personnaliser dans la liste de thèmes mobile et sauvegardes. Peut-être que le problème peut venir de là.

      Supprimer
  77. Merci ENORMEMENT ! J'ai juste un dernier problème : j'ai créé mon formulaire et j'ai fait un essai (remplir mon formulaire en allant sur mon blog pour voir s'il marchait), il marque que le message a été envoyé, mais où est-ce que je vois les messages qu'on m'envoie ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Les message sont envoyés à l'adresse de ton compte email associé à ton compte Blogger. C'est celui qui se trouve dans Paramètres > Basique, à la partie Autorisations.
      Vérifie que les message ne sont pas dans tes spams ;)

      Supprimer
  78. Bonjour,
    Merci bcp pour ce tuto.
    J'ai une question, y a t il une possibilité pour intégrer la fonction pièce jointe au formulaire de contact sur Blogger?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement non ce n'est pas possible avec le formulaire de contact proposé par Blogger. On ne peut pas ajouter de champs ni de pièces jointes :/

      Supprimer
  79. Bonjour

    Merci pour ce tuto. Je l'ai fait et ça marche très bien sauf que le formulaire de contact s'affiche sur ma page d'accueil comme un article. J'ai créer un onglet contact. Je fais comment pour relier la page contact à cet onglet. merci d'avance de votre réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux créer une page et non un article pour ta page contact. Dans ton tableau de bord cliques sur Pages puis sur Nouvelle page. Ajoutes ici le code de ton formulaire de contact.
      Les pages ne s'affichent pas dans le flux d'articles.

      Pour associer ton lien à ta page contact, retournes sur Pages à partir de ton tableau de bord, survoles le nom de ta page et cliques sur Afficher qui s'affiche sous le nom de la page. Copies l'adresse url dans la barre d'adresse de ton navigateur. Ensuite remplace l'URL de ton lien par celui-ci ;)

      Supprimer
    2. Hello ! J'ai sûrement trouvé la réponse à mon problème (ma page ne s'affiche pas) avec ce commentaire mais je n'arrive pas du tout à comprendre quelle URL je dois remplacer avec l'adresse de mon navigateur ... Merci d'avance pour ta réponse. :)

      Supprimer
    3. Bonjour Maïlys,
      Si tu as créé une page (et non un article) pour Contact, alors il ne s'affichera pas dans le flux d'articles du blog. C'est l'avantage des pages statiques. Vérifies simplement qu'elle est bien publiée.
      Il faut ensuite créer un lien dans ton menu qui renvoie vers ta page contact. L'adresse url de ta page contact peut être trouvé en allant dans Pages à partir de ton tableau de bord. Survoles le nom de ta page et cliques sur Afficher qui s'affiche sous le nom de la page. Copies l'adresse url dans la barre d'adresse de ton navigateur. Ajoutes cette adresse url dans le code du lien contact de ton menu ;)

      Supprimer
  80. Bonjour j'ai un soucis tout fonction correctement sauf que lorsque je change la police elle ne change pas ( mais j'ai deja eu ce souci sur plusieurs gadget ) et que j'ai du rentrer le CSS directement dans le code HTML de ma page mais bon ca fonctionne !! Mon réel souci est que lorsque je clique sur envoyer le message part bien mais je me retrouve avec le visuel de l'ancien formulaire !!! J'aimerais que le formulaire rester comme je l'ai configurer ou au pire qu'il disparaisse et qu'il y est marque seulement message envoyer !! en tout cas merci pour tout !!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si quand tu modifies le code CSS cela ne change rien, il peut y avoir un erreur dans ton code CSS. Vérifies qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Vérifies le code CSS que tu viens de modifier, et les codes CSS qui le précède.

      Le formulaire ne devrait pas changer d'apparence. J'ai remarqué que tu as collé les codes CSS dans la page, il faut les coller dans ton thème avant la ligne :

      ]]>/</b:skin>

      Supprimer
  81. Coucou, je viens d'essayer 4 fois, et à chaque fois ma page de contact s'affiche vide au final, je ne sais pas du tout ce que je n'ai pas réussit, et je t'avouerais que je ne comprend, pas, j'ai fait tout bien comme indiqué sur ton tuto... Je suis une grande débutante, et je ne sais même pas si le lien que je vais te mettre est le bon : https://www.blogger.com/blogger.g?blogID=6258349270934107698#templatehtml voilà, j’espère de tout cœur que tu pourra m'aider, car je t'avoue que je suis assez désemparée...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le lien dans ton menu n'est pas bon, il renvoie à une recherche de libellés qui affiche tous les articles associé à un libellé :

      http://laptitevieduneblonde.blogspot.fr/search/label/contact

      Ici le libellé que tu as entré est contact.

      Si tu as créé une page (et non un article) pour Contact, alors il faut trouver l'adresse URL de cette page qui doit ressembler à :

      http://laptitevieduneblonde.blogspot.fr/p/contact

      Pour trouver l'adresse de ta page vas dans ton tableau de bord Blogger, cliques sur Pages à gauche de l'écran. Survoles le nom de la page avec la souris et cliques sur Afficher qui s'affiche en-dessous de la page. Elle s'ouvrira alors dans ton navigateur. Tu peux simplement copier l'adresse url de la barre d'adresse de ton navigateur.
      Remplaces ensuite l'adresse url du lien contact de ton menu par l'adresse url que tu viens de copier.

      Remarque : vérifies que ta page Contact est bien publiée et non en brouillon ;)

      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