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

By Tristan L - 20/01/2016 - 36 Commentaires

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".

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.

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.

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.

Ç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 à 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:

Du texte

Ensuite on peut publier la page.

Et ça donne ça:

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.

Étiquettes:

Blogueur Tutoriel blogger Webmaster

Accueil Argent Webmaster

• Suivant
• Précédent

L.Tristan

J'ai 27 ans, je crée des sites depuis 2013 et 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. :)

• Réseaux sociaux:

• Rss
• Facebook
• Twitter
• Google+

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):