Aléatoire

Menu

Pour recevoir les prochains articles

Abonnez-vous à la newsletter pour recevoir les prochains articles (un email contenant un lien de confirmation vous sera envoyé, nécessaire pour lutter contre le spam) :

Comment créer une page contact sur un blog Blogger

Créer une page contact sur Blogger
Ce tutoriel est dédié aux personnes qui utilisent la plateforme de blogging Blogger (autrement appelé blogspot), et a pour but de montrer comment on peut installer un formulaire contact sur une page.

Il existe plusieurs façons de mettre en place une page contact sur un blog Blogger, dans cet article je vais me contenter de vous présenter le méthode la plus simple pour y arriver.

Voici le résultat que l'on obtient à la fin de ce tutoriel:

Le résultat final (ce blog est moche mais on s'en fiche)

Vous allez voir que c'est assez simple à mettre en place, à condition d'éviter de commettre quelques petites erreurs que je signalerai au cours de cet article, donc prenez le temps de lire l'article dans son ensemble.

1- On ajoute et on positionne le gadget contact


Pour commencer vous devez vous connecter sur Blogger, puis aller dans "Mise en page".

Ensuite, vous ajoutez un gadget "formulaire de contact" dans votre sidebar (barre latérale) en cliquant simplement sur "Ajouter un gadget" puis "Plus de gadget" puis "Formulaire de contact".

Ajouter un gadget formulaire de contact sur Blogger
Un petit plan histoire de gagner du temps

Ensuite, c'est important de mettre le gadget en bas de la sidebar, sinon ça va créer un décalage par la suite.

Glisser le gadget contact Blogger
On fait simplement glisser le gadget en bas de la barre latérale

On clic ensuite sur "Enregistrer la disposition" en haut à droite et on peut passer à l'étape suivante.

2- Créer la page contact


Maintenant on va pouvoir créer la page contact de votre blog.

Pour ce faire, rdv simplement dans "Pages" puis cliquez sur "Nouvelle page". Vous pouvez lui dopnner ensuite le titre que vous voulez.

Créer une page Blogger
On crée la page de contact

Une fois que vous avez votre éditeur de texte sous les yeux, rdv dans la colonne de droite et désactivez les commentaires sur cette futur page. Ce n'est pas indispensable, mais ça fait plus sérieux car avoir un formulaire de commentaire et un formulaire de contact sur la même page ça sert à rien.

Désactiver les commentaires Blogger
Ça fera plus propre

Ensuite, toujours dans votre éditeur de texte, cliquez sur l'onglet "HTML", puis copiez/collez le code suivant:

<div class="ContactForm" id="ContactForm">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p>
Nom
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
<p></p>
E-mail
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" 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="Envoyer">
<p></p>
<div style="text-align: center; max-width: 222px; 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>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=1922719264590044791&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" target="configContactForm1" title="Modifier">
<img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>
</span>
</span>
<div class="clear"></div>
</div>

Normalement ce vous avez sous les yeux actuellement devrait ressembler à ceci:

Code HTML pour une page contact Blogger
Code à insérer pour obtenir un formulaire de contact sur une page Blogger

Important: Désormais, il ne faut plus cliquer sur l'onglet "rédiger" quand vous modifiez votre page contact (ou alors il faut fermer sans sauvegarder!), sinon l'éditeur de texte Blogger cassera le code que l'on vient d'insérer. À l'avenir, si vous souhaitez modifier cette page, assurez-vous que votre éditeur de texte soit déjà en mode "HTML" lorsque vous ouvrirez cette page, pour ce faire il vous faudra ouvrir par exemple un article, comme pour le modifier, cliquer sur "HTML" puis fermer l'article et ensuite vous pourrez revenir sur votre page contact pour y apporter des modifications si vous le souhaitez.

Si on a envie, on peut ajouter une phrase ou un paragraphe sur la page de contact, pour ça on peut directement écrire sur la première ligne:

Ajouter du texte sur la page contact blogspot
Du texte

Ensuite on peut publier la page.

Et ça donne ça:

Double formulaires de contact Blogger
Pas de panique, c'est normal

3- On efface le formulaire de contact qui est en trop


Maintenant il va falloir effacer, ou plutôt cacher, le formulaire de contact qui est présent dans la sidebar car celui-ci est clairement en trop.

Pour ce faire on va utiliser le langage CSS.

Attention: Pour gagner du temps vous serez peut-être tenté de supprimer le gadget "formulaire de contact" dans "mise en page". Ce serait une erreur, car si vous faites ça, le formulaire de contact présent sur la page qui lui est attribuée ne fonctionnera plus, et ne servira donc à rien si ce n'est à décorer.

Donc on va utiliser un petit bout de code CSS comme je le disais, pour ce faire rdv dans: "Modèle" puis "Personnaliser".

On va personnaliser le thème...
Ensuite, rdv dans "Avancé" puis "Ajouter le fichier CSS", puis copiez/collez le code suivant:

.widget.ContactForm {display: none;}

Cliquez ensuite sur "Appliquer au blog" en haut à droite.

On ajoute le petit bout de code et on enregistre

Voila c'est fini.

Là, normalement c'est bon, vous pouvez actualiser votre blog et voir que le formulaire de contact qui était en trop à disparu, il ne vous reste plus qu'à ajouter un lien conduisant vers votre page de contact :).

(maj: Juillet 2016) Personnalisez votre formulaire de contact sur Blogger !


J'ai bien vu que ce tutoriel sur "comment créer une page de contact sur un blog Blogger" a été utile à pas mal de monde d'après les retours que j'ai eu. Donc pour pousser un peu plus loin le sujet j'ai décidé de rédiger et publier un nouvel article auquel vous pouvez accéder dès maintenant en cliquant sur le lien suivant : Personnaliser un formulaire de contact sur un blog Blogger.


Maintenant faites vous-même un essai pour vérifier que votre formulaire de contact fonctionne correctement, pour ça il suffit de vous contacter vous-même et si vous ne recevez pas le message c'est que vous avez peut-être fait un erreur dans ce cas n'hésitez pas à relire cet article.

Si vous rencontrez des problèmes, n'hésitez pas à le signaler dans les commentaires ci-dessous.

Si vous avez réussi à installer une page de contact grâce à ce tutoriel, n'hésitez pas non plus à laisser un petit commentaire en guise de remerciement ça fera toujours plaisir :).

Autre article au sujet de Blogger: Comment installer un nom de domaine OVH sur un blog Blogger.


Tristan

J'ai 24 ans, je suis blogueur professionnel, je m'intéresse à tout ce qui peut me faire gagner de l'argent et je partage mes découvertes ici, sur empocher.net. N'hésitez pas à me contacter si vous avez des questions. :)

Abonnez-vous à la newsletter pour recevoir les prochains articles par email (un email contenant un lien de confirmation vous sera envoyé, nécessaire pour lutter contre le spam):

15 commentaires to ''Comment créer une page contact sur un blog Blogger"

ADD COMMENT
  1. Super ! Après avoir galéré avec plein d'autres tutoriels qui ne fonctionnaient pas, le votre est nickel et tout est très clair ! Merci !

    RépondreSupprimer
    Réponses
    1. C'est génial si cet article à pu vous aider :) merci d'avoir laissé un commentaire

      Supprimer
  2. Ce commentaire a été supprimé par un administrateur du blog.

    RépondreSupprimer
  3. Génial ça m'a simplifié la vie, car j'avais mis en bas de page et non sur le côté le formulaire de contact, et les gens l'utilisaient comme formulaire de commentaires du coup je recevais tout un tas de mails, c'étais hyper énervant en plus, du coup j'ai pu mettre contact en onglet, et je suis enfin tranquille MERCI MERCI

    RépondreSupprimer
    Réponses
    1. Derien c'est super si ça a pu vous aider :) merci pour votre commentaire :-h

      Supprimer
  4. Bonjour,

    Très bien. Merci !

    RépondreSupprimer
  5. dans quelle boite de reception je peut recevoir les messages

    RépondreSupprimer
    Réponses
    1. Bonjour, et bien normalement vous recevrez les messages dans la boite de réception liée à l'email du compte que vous avez utilisé pour créer votre blog.

      Supprimer
  6. Bonjour.
    Merci beaucoup c'est super et çà marche super bien. Super votre site.
    Amicalement.
    Fany de la Réunion

    RépondreSupprimer
  7. Mille mercis !!!!
    Je cherchais comme faire, là c'est parfait, explications claires et efficaces.
    Merci encore ;)

    RépondreSupprimer
  8. @Fany 97440 et @Resp Lire, merci à vous pour les commentaires :)

    RépondreSupprimer
  9. Bonjour

    Merci pour cette astuce, je voudrais savoir s'il est possible d'ajouter un captcha à ce nouveau formulaire de contact ?
    Merci

    RépondreSupprimer
  10. Parfait!! merci beaucoup, tuto super bien expliqué, très simple à suivre
    j'adore le résultat

    RépondreSupprimer
  11. Très cool, ça fonctionne impeccablement, merci !

    RépondreSupprimer

Un avis? Une question? Une suggestion? Autre chose? N'hésitez pas à déposer votre commentaire!

    Fonctionnalités pour les commentaires:
  • Utiliser une émoticone: Voir le code des émoticones
  • Vous pouvez personnaliser votre commentaire avec du langage HTML.
  • Pour ajouter une image, utiliser ce code: [img]URL-de-votre-image[/img]
  • Pour ajouter une vidéo YouTube, déposer juste son lien. Exemple: http://www.youtube.com/watch?v=0x_gnfpL3RM