Comment ajouter un formulaire de contact (contacter nous) a Blogger?

Ajout d'un formulaire de contact dans Blogger est une tâche fastidieuse car il ne supporte pas les plugins comme WordPress.

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

Mais aujourd'hui, vous allez apprendre à ajouter des contacts officiels page dans Blogger.

Partie 1: Ajout de la gadget de contact:

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

Étape 1:

Visitez blogger.com et connectez-vous à votre compte. Si vous utilisez plusieurs blogs, vous devez choisir le blog souhaité dans la liste.

Étape 2:

Cliquez sur Mise en page de la barre latérale gauche pour obtenir une option pour ajouter des gadgets.

Étape 3:

 Vous pouvez voir un lien Ajouter un gadget sur le panneau principal sur le côté droit. En cliquant dessus, vous accédez à une liste de gadgets.

Étape 4:

Ensuite, choisissez Plus de gadgets sur le côté gauche. Maintenant, vous verrez le formulaire de contact. Il suffit d'ajouter la même chose.

Partie 2: Masquer le gadget:

Maintenant, vous allez apprendre à masquer le gadget de contact.

Étape 1:

Nous devons jouer avec la section des modèles ici. Cliquez sur Modèles dans le menu de gauche.

Étape 2: 

Ensuite, cliquez sur Modifier le HTML et vous recevrez le code entier de votre blog dans un grand champ.

Étape 3:

recherchez]]> </ b: skin> et placez le code suivant juste avant.

/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;}

Ensuite, cliquez sur Enregistrer pour conserver les modifications.

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

Partie - 3: Ajout d'un formulaire de contact à une page:

Vous obtiendrez le code personnalisé personnalisé de contact blogger ici pour être ajouté à être affiché sur une page séparée.

Étape 1:

Allez dans Pages et cliquez sur Nouvelle page.

Étape 2: 

collez le code suivant dans l'éditeur de publication HTML après avoir supprimé tout ce qu'il contenait.

Enregistrez le modèle puis allez dans Pages pour créer une nouvelle page de contact si vous n'en avez pas encore. Dans l'éditeur de page, passez en mode HTML et collez ce qui suit:

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>

Étape 3:

Ajoutez un titre (comme Contactez-nous), puis modifiez les paramètres donné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 transmis au courrier électronique de l'administrateur. Si le blog a plus d'un admin, tous les obtiendrez.