Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Accueil
Pages
tutoriel

Créer une page de contact facilement sur Blogger

5 min read


Blogger a agrandi sa liste de gadgets, en ajoutant un nouveau "Formulaire de contact", qui comme son nom l'indique, permettra à vos visiteurs de vous envoyer un message via ce formulaire.

Dans cet article, je vais vous proposer un tutoriel (en 3 étapes) pour intégrer ce widget dans une page "contact" (statique), avec quelques modifications sur l'aspect de ce formulaire, car Blogger ne vous permettra d'afficher ce widget que dans une barre latérale ou en bas du blog.


Etape 1: Ajouter le widget à votre blog.

Connectez vous à votre blog, choisissez "Mise en page" > "Ajouter un gadget".
Sur la fenêtre ouverte, il y a une sidebar à gauche (Voire photo ci-dessous). Choisissez "Plus de gadgets", puis "Formulaire de contact".


Vous aurez bel et bien le formulaire de contact dans votre barre latérale, mais pas de panique, on va  l'éliminer dans la 3ème étape.


Etape 2: Créer la page.

Connectez vous à votre blog, choisissez "Pages", puis cliquez sur "Nouvelle Page" puis "Page Blanche".
Après choisissez comme titre de page "Contact" ou "Page de contact" etc.
A gauche, appuyez sur "HTML" (à droite de "Rédiger"), puis collez le code ci-dessous:
<div id="contact_wrap"><h3>Formulaire de contact</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Nom" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Envoyer" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form></div><style type="text/css">/* Menyembunyikan elemen dalam postingan */#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style></div>
Cliquez sur "Publier" en orange pour enregistrer la page.


Etape 3: Appliquer le CSS.

Pour modifier l'aspect de formulaire et supprimer le widget de la barre latérale, il faut ajouter du CSS.
Il existe 2 modèles: Modèle clair et modèle sombre. (Cliquez dessus pour voire la démo).
Connectez vous à votre blog et choisissez "Modèle", puis "Modifier le code HTML".
Grâce à la touche "Ctrl" et "F", cherchez " /b:skin ", et juste avant, collez le code correspondant au modèle qui vous a plu, ou qui v mieux avec votre modèle.

Code du modèle clair:
#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC1wh3uI0A6xlouRwT583FF0S6yhrRTKE2sJAab7r98e1t5D4y5gxJOBHv4l3c7cXeq0RIayWvTY3o1YUkVZfjzuCTLy1pqxX0qZze7N5Ykuu6-uxSReZIdXm9UJeXWTfrUEtQif7Y1sM/s1600/user.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiarScTPnoyyOwTjF087XZj1A5Bz4GaYCEoK9bmE3yCLNh6kymdcIz1BsxTT5xf4pe0mESaekmBf_upd_sX4WJnbQ8ideACG9s8JWL9dN-awWDdJEW3-AfWaSVWinucPBEo6qzrC4XbXRw/s1600/pen.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTNZCMLEPtUSUDXxNlt_BxyfV_CD5hutH6GP7FEshqbMyNiIALhyphenhyphen1ZhyphenhyphenPmk_gVfLr7nVBzHzI0f_dE6mJqXE52te2gfU3g2ro61NFFye1oF0vCMEXHjuy4ALqL9opnp7Cfc6JSfoY7yA/s1600/msg2.png)no-repeat 10px 10px; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}

Code du modèle sombre:
#ContactForm1{display:none;} #contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border: #600 solid 1px;border-bottom: #420000 solid 1px;background-color:#983738;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);}#contact_wrap h3{color: #fff;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #3b5931;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;background-color: #659156;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #000 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #000;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC1wh3uI0A6xlouRwT583FF0S6yhrRTKE2sJAab7r98e1t5D4y5gxJOBHv4l3c7cXeq0RIayWvTY3o1YUkVZfjzuCTLy1pqxX0qZze7N5Ykuu6-uxSReZIdXm9UJeXWTfrUEtQif7Y1sM/s1600/user.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiarScTPnoyyOwTjF087XZj1A5Bz4GaYCEoK9bmE3yCLNh6kymdcIz1BsxTT5xf4pe0mESaekmBf_upd_sX4WJnbQ8ideACG9s8JWL9dN-awWDdJEW3-AfWaSVWinucPBEo6qzrC4XbXRw/s1600/pen.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmLgYhFc6St2VBiVrgDPwNvdjhctvCKJr99im7qmk8Dl584V9LlgRL3dE5D3w1UuVp6VD6S_hhJz3FmvqE_-h82luNzWAWMcmitxKgoTZUgnoj4QXXV5eoYh2YEOhT_HIG9UwLghmd5Q/s1600/msg.png)no-repeat 10px 10px; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #659156;border:1px solid #333;}#ContactForm1_contact-form-submit:hover {background:#5d894d;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}
Enregistrez le modèle et c'est bon ;-)
Si vous avez un problème lors de l'intégration, n'hésitez pas à laissez un commentaire ci-dessous. 

Ces posts pourraient vous intéresser

48 commentaires

  1. second ago
    Merci beaucoup ! ça m'a été très utile :)
    1. second ago
      Ravi que ça vous a été utile.
      Si tu veux encore le personnaliser, je peux aider ;-)
    2. L'Echauguette de Donzy
      Ce commentaire a été supprimé par l'auteur.
    3. second ago
      Mon blog : http://lechauguette.blogspot.fr
      J''ai commis une erreur en voulant modifier le formulaire de contact et je me retrouve avec un code HTLM AU DESSUS de la page de titre et je n'arrive pasz à m'en débérasser ???
      Merci pour ton aide si possible
      Sergio
  2. second ago
    Bonjour,
    je n'arrive pas a comprendre comment appliquer le CSS
    Je ne trouve pas /b:skin
    1. second ago
      j'ai le meme probleme !
  3. second ago
    Merci beaucoup ça fonctionne parfaitement.
  4. second ago
    Ca ne marche absolument pas du tout :(
  5. second ago
    Bonjour, je devrais préciser ce qui ne marche pas , n'est-ce pas .. Bon, déjà je vous remercie pour l'article car il permet d’avoir une page de contact jolie et bien pratique. Le hic est que, devant la jolie page de contacte, j'ai fait des essais en envoyant des mails (le formulaire fut entièrement rempli) mais aucun mail n'arrive. Avec une autre page de contacte (qui elle était bien moche) cela fonctionnait.
  6. second ago
    Merci mille fois, ça marche du tonnerre :) !
  7. second ago
    Oh non, finalement, quand on clique sur "envoyer" le message ne s'envoie pas.. :( Saurais-tu pourquoi ?
    Merci beaucoup !
  8. second ago
    Merci! Tuto simple et efficace: j'ai essayé le formulaire et il fonctionne parfaitement!
  9. second ago
    Du premier coup ça marche. Merci beaucoup.
  10. second ago
    Bonjour,

    J'apprécie tout le travail fait pour nous sortir du pétrin et nous inspirer... Ceci dit j'ai un petit soucis avec le formulaire de contact. J'ai copié vos code et tout fonctionne nickel mais quand je fais un test, et que je clique sur "envoyer" rien ne se passe... Une idée du problème???
  11. second ago
    Bonjour,
    Juste quelques précisions :
    1 Cela ne marche pas si on supprime le gadget à partir de la mise en page. Dans ce cas le message n'est pas envoyé
    2 le code de l'étape 3 doit être placé avant la balise de fermeture et non avant " /b:skin " sinon on obtient une erreur lors de l'enregistrement du code HTML
    3 Pour ma part je voulais seulement masquer le gadget dans la sidebar j'ai donc seulement collé #ContactForm1{display:none;} dans le code.
    Merci beaucoup pour ce tuto
  12. second ago
    Après avoir cherché pendant... a peu près 1H je suis enfin tombée sur ce blog qui a expliqué très clairement et simplement ce que je souhaitais réaliser! Merci pour ce post qui (j'espère) aidera beaucoup d'autres personnes!
  13. second ago
    Merci c'est super bien vu !! :)
    Dans le code html à coller sur la page contact y a un /div de trop (le dernier ...)
  14. second ago
    Fonctionne :)
  15. second ago
    Merci de cet article, j'ai maintenant ma petite page et en plus dans les bonnes couleurs.
  16. second ago
    Merci beaucoup ! Grâce à cet article, j'ai ma page de contact (et sans trop galérer en plus :) )
  17. second ago
    merci.... mais problème... je ne reçoit pas de mail ? donc fonctionne pas
    de plus erreur dans votre explication il faut coller le code avant et non /b:skin
    merci si vous avez la solution à nos problème....
    1. second ago
      avant les deux flèche... < /b:skin > j'ai écris juste mais le message ne passe pas bizard
    2. second ago
      Milles excuse j'ai reçut le mail donc tuto nikel tous va bien... sauf l'erreur < /b:skin > au lieux de /b:skin ....

      merci
  18. second ago
    Merci Tuto simple et efficace: j'ai essayé le formulaire et il fonctionne parfaitement
  19. second ago
    ça serait plus utile de une capture d'écran du formulaire de contact pour plus pousser les utilisateurs à l'installer mais sinon il existe la méthode facile celle de Foxyform ^^
  20. second ago
    Bonjour, merci pour ce tuto, j'ai réussi du premier coup (fierté !) !
    J'aimerais apprendre à personnaliser ce formulaire de contact (surtout au niveau des couleurs), auriez-vous des conseils ?
  21. second ago
    Merci, ça m'a beaucoup aidé !!! :)
  22. second ago
    Merci juste ce que je cherchais!
  23. second ago
    Bonjour,
    Sur mon blog http://www.erhabenmaya.com
    ce tuto ne fonctionne pas.
    Le formulaire n'est pas envoyé.
    Cordialement.
  24. second ago
    Excellent! c'est au TOP!
  25. second ago
    Juste super!! :) Merci!
  26. second ago
    Super tuto, ça marche impec !
    J'ai une petite question : a quelle endroit du code peut on modifier la couleur du bandeau bleu de la version claire ?
  27. second ago
    C'est possible d'aligner la boite du formulaire à gauche ?
  28. second ago
    Pour ceux ou cela ne marche pas aller voir sur ce site les codes HTML sont en entier

    http://www.allbloggertricks.com/2013/08/awesome-contact-form-widget-for-blogger.html
  29. second ago
    ça marche très bien merci mais je souhaiterais le formulaire simple, l'original.
    Comment s'y prende svp ?
    Merci
  30. second ago
    Merci pour chaque publication.
    Ils sont très importants après !!!
    Félicitations et vont de plus.
    Gracias
    baiser
  31. second ago
    Merci pour cette démonstration ! C'est vrai que si on ne met pas le gadget installé, l'envoie ne se fait pas ! Félicitations !
  32. second ago
    Bonjour,
    Je voudrais savoir comment procéder si je veux rajouter une case comme "SUJET" ( pour préciser le sujet de la demande de contact). Est ce que le CSS sera toujours pris en compte?
  33. second ago
    Bonjour, sur quel mail recoit ton les messages ?
    Merci
    1. second ago
      Avez vous reçu une réponse à ce message ? j'ai le même problème..
  34. second ago
    Bonjour, sur quel mail recoit ton les messages ?
    Merci
  35. second ago
    Bonjour!
    J'aimerai effectivement modifier le formulaire de contact basique mais sans créer une page (car mon blog ne contient pas de pages). J'aimerai juste un bouton "contact" tout en bas de mon blog, au dessus du copyright. Est ce que c'est possible? Merci pour votre aide!
  36. second ago
    Bonjour!
    J'aimerai effectivement modifier le formulaire de contact basique mais sans créer une page (car mon blog ne contient pas de pages). J'aimerai juste un bouton "contact" tout en bas de mon blog, au dessus du copyright. Est ce que c'est possible? Merci pour votre aide!
  37. second ago
    Très utile comme formulaire.. Merci..
  38. second ago
    Hello, j'aimerais rajouter des informations supplémentaires à saisir par l'utilisateur ainsi que d'assurer la sécurité par une vérification ( type image ou code ). Existe il un formulaire pour ce faire? Merci.
  39. second ago
    Olala j'ai essayé et là cest le drame. Je n'ai plus le formulaire de contact sur la page d'accueil et en plus ça m'a déglingé des trucs ... Quand je veux remettre un formulaire ça me dit :" Il est possible que certains gadgets auxquels des développeurs tiers ont participé ne soient pas compatibles avec HTTPS". Un peu la panique... Pouvez vous m'aider?
  40. second ago
    Bonjour, mon seul roble est que le mail ne part pas. En fait quand j'envoie le mail, rien ne se passe.