Un formulaire de contact sur une seule page

25/10/2014

Finie l'utilisation d'un service externe pour ajouter un formulaire de contact sur son blog, il y a maintenant un widget pour ça !
Seul bémol, le widget s'affiche sur toutes les pages du blog, et n'est pas adapté à une utilisation classique.
Vous souhaitez afficher le formulaire de contact uniquement sur une page de votre blog ? Voici comment le faire, en 3 minutes.

Etape 1 : ajouter le widget à votre blog

Dans le menu de Mise en page, ajoutez juste en bas de la zone Articles du blog le widget de formulaire de contact, que vous trouverez dans la section "plus de gadgets".

A ce stade, nous avons un formulaire de contact géré par Blogger, qui fonctionne, et qui s'affiche en bas de toutes les pages. Et ça, c'est plutôt moyen...

Etape 2 : masquer le widget sur toutes les pages

Le widget a été automatiquement nommé par Blogger ContactForm1. Dans le code HTML de votre modèle, juste avant la ligne 

]]></b:skin>

Ajoutez le bloc ci-dessous

#ContactForm1{
display: none;
}

Résumons : on a maintenant un formulaire de contact, mais on ne l'affiche plus du tout sur le blog. Pas exactement ce qu'on souhaite, mais vous verrez qu'on en est proche.

Etape 3 : n'afficher le widget que sur la page de contact

Créez une page Blogger, avec le texte d'introduction de votre choix. Passez au mode d'édition HTML de votre page, et ajoutez le bloc ci-dessous dans votre page :
<style type="text/css">
 #ContactForm1 {
 display: block;
}

#blog-pager, .blog-feeds, .post-footer,  #ContactForm1 .title {
 display: none;
}
</style>
Voilà, le formulaire ne s'affiche que sur cette page (c'est le but de la ligne display:block, et les éléments superflus (pieds de page article, flux, etc. sont masqués sur cette page.
Simple non ?

10 commentaires:

Caftan Marocain 2015 a dit…

Bonne explication bonne continuation

christopheguibert a dit…

Bonjour. la première partie fonctionne bien mais le code à coller sur la page de contact ne fait rien apparaitre. Une idée ?

pinguinalité a dit…

Bonjour
oui, c'est sympa de mettre une page "contact" dédiée et en plus facile a réaliser. je vais le faire manu-militari ;)
par contre, tant que je suis la, j'ai une petite question au sujet des balises h
je viens de lire un article très explicite pour changer les h sur un article et ça fonctionne très bien!
malheureusement, je voudrais avoir une h1 différente pour chaque article et non comme en natif une h1 qui soit toujours la même (celle du blog)
une idée?

Unknown a dit…
Ce commentaire a été supprimé par un administrateur du blog.
Yushi a dit…
Ce commentaire a été supprimé par un administrateur du blog.
Formation Excel a dit…

Merci pour ces infos

Teddy VELAYANDOM a dit…

Génial!!!

CES MEGACELL OUTREACH a dit…

Bonjour et merci pour les informations! Mais le formulaire de contact est positionné trop en bas de la page contact. La question est donc, comment je pourrais le faire remonter tout en haut

tum a dit…

When I open your RSS feed it just gives me a whole lot of strange characters, is the malfunction on my reader?
Hai bisogno di scaricare musica gratis?! Visita questo sito web. Cerchi musica gratis su internet?
Thank you for blogging this, it was quite helpful and told a ton
softtrending

Admin a dit…

Ive been making an attempt to Gain entry to this web site for a while. I used to be utilizing IE then once I tried Firefox, it labored just effective? Just wanted to bring this to your attention. This is actually good blog. I have a bunch myself. I actually admire your design. I know that is off matter however,did you make this Sarah Berger

Enregistrer un commentaire

Contact

Nom

E-mail *

Message *