mardi 23 septembre 2014

Blogger - Blogspot : Créer une page de contact séparée



Il y'a peu de temps, Blogger a finalement développé et sorti un widget permettant à vos visiteurs de vous contacter par email. Si ce widget est tout ce qu'il y'a de plus utile, il doit néanmoins être placé comme un gadget, sur toutes vos pages (excepté si vous modifiez le code de sorte qu'il ne s'affiche que sur des pages précises (voir Afficher des widgets ou des codes sur les types de pages de votre choix sur Blogspot). Le plus courant et le moins envahissant, toutefois, consiste à afficher ce formulaire de contact sur une page de contact dédiée et séparée.

Pour ce faire, la manipulation promet d'être un peu longue : nous allons ajouter le widget de contact, puis bloquer son affichage sur l'ensemble de votre blog, et ajouter à une page blanche, en mode HTML, le code qui permettra de faire appel au widget devenu invisible.

1. Ajouter le Widget

Rien de plus simple, puisqu'il faut faut seulement charger le widget en question sur votre mise en page. Le widget est encore, à l'heure ou j'écris ces lignes, dans le second onglet "afficher plus de widget", il est toutefois bel et bien créé par Blogger, l'équipe de développeurs officiels.

2. Créer une page de contact

Vous pouvez désormais créer une page statique vide, dans laquelle vous collerez, en mode HTML, le code ci-dessous : 

<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>


N'oubliez pas, à cette étape, de sélectionner dans les options, l'interprétation du code html (plutôt que l'affichage littéral, si celui-ci est par défaut). Profitez en pour annuler l'affichage du formulaire de commentaires de cette page, puisque celle-ci n'aura vraisemblablement pas besoin d'être commentée.

3. Modifier le code HTML du template

C'est maintenant la partie la plus dure. Entrez dans votre template en sélectionnant l'onglet modèle, puis demandez à modifier le code HTML.

Sautez jusqu'au widget de contact (ContactForm1) et étirez-le (expand). Vous allez devoir tout simplement effacer le code correspondant à la fonctionnalité du widget (sans pour autant effacer le widget proprement dit), effacez alors tout ce qui se trouve dans la zone grisée ci-dessous.


Si vous n'êtes pas sûr de ce que vous faites, vous pouvez tout simplement le rendre inactif en l'insérant entre des balises :
<!-- code à effacer -->.
Il vous restera alors un code de la forme :


Ce code est quand même essentiel à conserver, puisqu'il indique au moteur de blog que ce widget est utilisé et actif. Si vous l'effacez, le formulaire de votre page de contact ne fonctionnera plus.

Ne vous reste plus qu'à sauvegarder le template. Profitez-en pour insérer un lien, par exemple dans votre barre de navigation, vers votre page de contact!


Source : Bloggerplugins

26 commentaires:

  1. Ravi d'avoir été utile, mam'zelle :)

    RépondreSupprimer
  2. Merci beaucoup pour vos commentaires ! ;)

    RépondreSupprimer
  3. Juste parfait =) Peut-on faire la même chose pour la newsletter ?

    RépondreSupprimer
  4. En effet, selon le même principe, il est possible de personnaliser vos blogs en affichant des widgets spécifiques sur des pages qui leur sont consacrées :)

    RépondreSupprimer
  5. Bonjour,
    Eh bien moi j'ai un problème...
    Le formulaire ne s'"affiche plus sur la page d'accueil, mai il ne s'affiche pas non plus dans ma page de contact ! J'ai dû oublier une étape...
    Peux-tu me conseiller ?
    Merci

    RépondreSupprimer
  6. Bonjour!
    Ne sachant pas où trouver votre page de contact pour jeter un oeil à son code source, le seul conseil que je puisse donner est alors d'effacer le widget complètement et de recommencer depuis le début ce tutoriel. Il est possible que vous ayez raté l'étape du copier-coller dans la page statique, en mode html. ou que vous ayez découpé trop de lignes dans l'étape 3. Si vraiment rien ne s'affiche, c'est, il semble, que votre code html ne soit pas enregistré correctement. A vérifier en retrouvant les lignes html du widget (étape 2) lorsque vous affichez votre code source (visionnez votre page de contact, clic droit --> afficher la source)

    RépondreSupprimer
  7. bonjour
    merci pour ce tuto qui fonctionne parfaitement !... sur PC..
    En effet, il semblerait que depuis la version mobile, il soit impossible d'envoyer un mail. La page de contact s'affiche sans problème mais le bouton "Send" semble inactif.... Testé avec 2 mobiles différents...
    Pourtant, depuis un pc, cela fonctionne...
    Une idée ?
    Merci beaucoup !

    RépondreSupprimer
  8. Bonsoir! Honnêtement, je ne sais pas, mais j'ai ma petite idée. Il faut savoir que l'internet mobile est tout sauf de l'internet. Les contrats de vos opérateurs contiennent généralement des clauses, le genre écrit en petit entre deux lignes, qui interdisent certains usage de l'internet, comme le streaming, la VOip, le peer-to-peer... Des protocoles de communications sont ainsi bloqués quel u'en soit l'usage, fut-il parfaitement légal, mais qui pourrait rentrer en concurrence avec la téléphonie classique (tel que justement, la VOip).

    De plus, ces mêmes opérateurs ont tous fait le choix de faire fonctionner vos mobile derrière un NAT, une passerelle derrière laquelle se trouvent vos mobiles, et qui les relie à internet. Cette modification de la nature même du mode de transmission fait que si vos mobiles peuvent joindre facilement internet, ce sont en réalité les NAT qui y sont connectés, pas les mobiles. Ce que cela change, c'est que l'internet, peut, lui, appeler uniquement vos NAT : en réalité, vos mobiles ne sont pas, à proprement parler, connectés à internet, ils sont seulement connectés à une passerelle, qui elle, est connectée à internet. Et vos mobiles n'ont pas une adresse ip unique.

    Autrement dit, de nombreux logiciels fonctionnant sur l'unicité de votre ip (comme c'est le cas, normalement, pour un ordinateur unique relié à internet) ne fonctionnent pas avec les mobiles, de même que certains protocoles de communication, peut-être, comme celui qu'utilise Google et le gadget dont nous faisons la présentation ici.

    Cela dit, outre ces considérations techniques, le problèmes peut venir d'autres facteurs : puisque vos mobiles partagent leur ip avec des milliers d'utilisateurs, certains d'entre eux, indélicats, peuvent donner une mauvaise réputation à votre ip : un paramètre dont google et d'autres services se servent pour bloquer péremptoirement certains type de communication comme les emails.

    Autre possibilité, de simples erreurs dans les css de vos sites ; un -webkit-user-select sélectionnant "none" dans la partie css correspondant à votre style mobile peut interdire la sélection ou l'usage du bouton d'envoi (dans ce cas, le passer en "auto").

    Je penche pour cette dernière hypothèse, n'hésitez pas à jeter un coup d'oeil à vos feuilles de style css!

    RépondreSupprimer
  9. Mille merci , qui aurait dit qu'un jour j'allais toucher à un code html

    RépondreSupprimer
  10. Bonsoir miss! Une fois le nez dedans, tout cela n'est pas aussi compliqué qu'on pourrait le croire de prime abord, alors bon courage pour la suite des améliorations que tu apporteras à tes sites ;)

    RépondreSupprimer
  11. super merci est-il possible de changer de destinataire ?

    RépondreSupprimer
  12. Bonsoir merci pour le code est ce que vous pouvez me dire qui est le destinataire du message ? Je regarde dans la boîte de mail du propriétaire et je ne reçois rien

    RépondreSupprimer
  13. wow ! merci j'ai réussi grace à vous...et pourtant, j'avais jamais mis les mains sous le capot avant !
    en revanche, ce formulaire est en anglais, y a t'il un moyen de remplacer your name/your email/your message par leur traduction ? (je sais, je fais ma difficile ;-) )

    RépondreSupprimer
  14. Bonsoir Cédric, Thierry et Kat, désolé pour le retard de la réponse!

    Il n'est pas possible de changer de destinataire : celui-ci est forcément le propriétaire du blog (ou les propriétaires du blogs). Thierry, si vous ne recevez pas de message dans la boîte mail du propriétaire du blog, inspecter les spams, mais il y'a sûrement une erreur dans la recopie du code, ou bien l'un des éléments javascript de votre page est susceptible d'interférer avec votre code.

    Kat, comme vous pouvez le voir sur notre page de contact, il est tout à fait possible de changer les intitulés, trouvez les dans votre code (vous pouvez effectuer une recherche via votre navigateur pour plus de facilité, il suffit alors de remplacer par ce que vous désirez inscrire.

    Bon courage à tous!

    RépondreSupprimer
  15. hello ! et merci pour la réponse !
    J'avais réussi à la trouver comme une grande ! comme quoi parfois, on cherche compliqué au lieu de faire simple.
    J'ai donc bien mon formulaire, en un exemple unique, sur la page que j'ai choisie, et en français... c'est un bon début, hein ?


    Mais j'ai voulu le tester, et le message ne s'envoie pas... je me retourne encore vers vous du coup... ;-)
    si vous aviez une idée du pourquoi-comment !

    Merci !

    RépondreSupprimer
  16. Bon, pour finir, j'ai tout effacé et repris à zéro la procédure, et c'est tout bon ! un grand merci pour votre blog qui est une vraie ressource :-)

    RépondreSupprimer
  17. Mais y'a pas d'quoi, miss gourmandise ;) Bonne cuisine!

    RépondreSupprimer
  18. Merci ça a fonctionné du premier coup! Super claires les explications!

    RépondreSupprimer
  19. Bonsoir, j'ai réussi à faire les démarches mais sur la page je touve pas les titres (nom, mail, texte), y'a t'il une solution svp ?

    RépondreSupprimer
  20. http://bmacompta.blogspot.com/p/blog-page.html

    RépondreSupprimer
  21. Bonjour! le texte est bien là, si vous surlignez votre page de contact, vous les verrez. Ce n'est qu'un tout petit problème de colorisation : votre texte et votre fond de page sont exactement de la même couleur grise :) ça arrive même aux meilleurs d'entre nous! ^^

    RépondreSupprimer
    Réponses
    1. ok, j'ai changé la couleur et ca marche, merci beacoup.

      Supprimer
  22. Bonjour,
    Merci pour vos explications très claires...
    Chez moi il subsiste une trace du widget "Contact" dans la sidebar : sur ce blog de test il a été inséré tout en haut et il reste le rectangle blanc: voyez - vous comment l'éviter?

    http://nag-a-drouz-test.blogspot.fr/

    RépondreSupprimer
  23. Il semble y avoir un reste du code automatique inséré avec le widget de contactform. cherchez le code correspondant à celui que l'on voit dans la dernière partie de l'article ci dessus et assurez vous que rien ne subsiste hors ce qui est noté ici ;)

    RépondreSupprimer