Comment ajouter un formulaire de contact (page Contactez-nous) dans Blogger?

Publié: 2020-11-10

Ajouter un formulaire de contact dans Blogger est une tâche fastidieuse car il ne prend pas en charge les plugins comme WordPress.

Ce que font la plupart des blogueurs de Blogspot, c'est de demander l'aide de sites tiers (foxyform, jotform, 123contactform, etc.).

Page de formulaire de contact Blogger Mais aujourd'hui, vous allez apprendre comment ajouter une page officielle de contact dans Blogger.

Comme je l'ai dit plus tôt, il est possible de faire insérer des codes tiers dans de nouvelles pages comme une promenade dans le parc. Pourtant, le formulaire de contact officiel est bien meilleur que ceux-là.

Les avantages du formulaire officiel Blogger

Vous recevrez le message dès que l'on l'envoie. Et la délivrabilité est également de 100%.
L'interface simple permet aux visiteurs de vous contacter facilement.
Si vous connaissez le langage CSS (Cascade Style Sheet), il vous sera facile de personnaliser le formulaire à votre guise.
La page entière ne sera pas rechargée pour l'envoi du message.

J'ai divisé ce tutoriel en trois sections, en ajoutant le gadget de contact, en le cachant et en implémentant le code officiel dans une nouvelle page.

Partie 1: Ajout du gadget de contact

Suivez les étapes ci-dessous pour ajouter un gadget Contactez-nous sur votre blog.

Étape 1 : visitez blogger.com et connectez-vous à votre compte. Si vous exécutez plusieurs blogs, vous devez choisir le blog souhaité dans la liste.

Étape 2 : Cliquez sur Disposition dans la barre latérale gauche pour obtenir une option permettant d'ajouter des gadgets.

Étape 3 : Vous pouvez voir un lien Ajouter un gadget sur le panneau principal sur le côté droit. Cliquer dessus vous amènera à une liste de gadgets.

Étape 4 : Ensuite, choisissez Plus de gadgets sur le côté gauche. Maintenant, vous verrez le formulaire de contact . Ajoutez simplement la même chose.

Partie 2: Cacher le gadget

Vous allez maintenant apprendre à masquer le gadget de contact.

Étape 1 : Nous devons jouer avec la section des modèles ici. Alors, cliquez sur Modèles dans le menu de gauche.

Étape 2 : Ensuite, cliquez sur Modifier le HTML et vous recevrez le code complet de votre blog dans un grand champ.

Étape 3 : Recherchez ]]> </ b: skin> et placez le code suivant juste avant.

div # ContactForm1 {
affichage: aucun! important;
}

Cliquez ensuite sur Enregistrer pour conserver les modifications.

Après la troisième étape, vous ne verrez plus le widget Contact sur votre blog.

Partie - 3: Ajouter un formulaire de contact à une page

Vous obtiendrez ici le code du formulaire de contact du blogueur officiel personnalisé à ajouter et à afficher sur une page séparée.

Étape 1 : Accédez à Pages et cliquez sur Nouvelle page.

Étape 2 : collez le code suivant dans l'éditeur de publication HTML après avoir tout supprimé.

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = "contact-form-widget">
<p> Contactez-nous en remplissant le formulaire ci-dessous. </p>
<div class = "form">
<form name = "contact-form">
<p> </p>
Nom
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
Email
<span style = ”font-weight: plus gras;”> * </span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </p>
Message
<span style = ”font-weight: plus gras;”> * </span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarea>
<p> </p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”text-align: center; largeur maximale: 222px; largeur: 100% »>
<p id = "ContactForm1_contact-form-error-message" class = "contact-form-error-message"> </p>
<p id = "ContactForm1_contact-form-success-message" class = "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 title = ”Edit” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″));” href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = ”18 ″ height =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</span>
</span>
<div class = "clear"> </div>
</div>

Étape 3: Ajoutez un titre (comme Contactez-nous), puis modifiez les paramètres indiqués ci-dessous.

Étape 4: Enfin, cliquez sur le bouton Publier. C'est tout.

Les messages envoyés à partir de ce formulaire de contact seront envoyés à l'adresse e-mail de l'administrateur. Si le blog a plus d'un administrateur, tous l'obtiendront.

➜ Autres didacticiels utiles de Blogspot:

Comment ajouter un fichier Robots.txt personnalisé dans Blogger?
Comment soumettre un plan de site Blogger à Google Search Console?

Emballer

J'espère que vous savez maintenant comment ajouter une page de contact dans blogger. Si vous rencontrez des difficultés telles que zéro délivrabilité même après un message de réussite, je vous recommande de réinstaller le widget Contact.

Et oui, si vous avez suffisamment de connaissances dans le traitement des extraits CSS et javascript, vous pouvez continuer à personnaliser la page pour un meilleur attrait visuel.

N'oubliez pas de partager cet article avec vos amis blogueurs.