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

Créer une page de contact facilement sur Blogger



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. 

48 commentaires

  1. Merci beaucoup ! ça m'a été très utile :)
    1. 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. 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. Bonjour,
    je n'arrive pas a comprendre comment appliquer le CSS
    Je ne trouve pas /b:skin
    1. j'ai le meme probleme !
  3. Merci beaucoup ça fonctionne parfaitement.
  4. Ca ne marche absolument pas du tout :(
  5. 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. Merci mille fois, ça marche du tonnerre :) !
  7. Oh non, finalement, quand on clique sur "envoyer" le message ne s'envoie pas.. :( Saurais-tu pourquoi ?
    Merci beaucoup !
  8. Merci! Tuto simple et efficace: j'ai essayé le formulaire et il fonctionne parfaitement!
  9. Du premier coup ça marche. Merci beaucoup.
  10. 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. 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. 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. Merci c'est super bien vu !! :)
    Dans le code html à coller sur la page contact y a un /div de trop (le dernier ...)
  14. Fonctionne :)
  15. Merci de cet article, j'ai maintenant ma petite page et en plus dans les bonnes couleurs.
  16. Merci beaucoup ! Grâce à cet article, j'ai ma page de contact (et sans trop galérer en plus :) )
  17. 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. avant les deux flèche... < /b:skin > j'ai écris juste mais le message ne passe pas bizard
    2. 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. Merci Tuto simple et efficace: j'ai essayé le formulaire et il fonctionne parfaitement
  19. ç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. 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. Merci, ça m'a beaucoup aidé !!! :)
  22. Merci juste ce que je cherchais!
  23. Bonjour,
    Sur mon blog http://www.erhabenmaya.com
    ce tuto ne fonctionne pas.
    Le formulaire n'est pas envoyé.
    Cordialement.
  24. Excellent! c'est au TOP!
  25. Juste super!! :) Merci!
  26. 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. C'est possible d'aligner la boite du formulaire à gauche ?
  28. 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. ça marche très bien merci mais je souhaiterais le formulaire simple, l'original.
    Comment s'y prende svp ?
    Merci
  30. Merci pour chaque publication.
    Ils sont très importants après !!!
    Félicitations et vont de plus.
    Gracias
    baiser
  31. 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. 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. Bonjour, sur quel mail recoit ton les messages ?
    Merci
    1. Avez vous reçu une réponse à ce message ? j'ai le même problème..
  34. Bonjour, sur quel mail recoit ton les messages ?
    Merci
  35. 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. 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. Très utile comme formulaire.. Merci..
  38. 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. 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. Bonjour, mon seul roble est que le mail ne part pas. En fait quand j'envoie le mail, rien ne se passe.