Parmi les nouveaux widgets de Blogger figure le widget formulaire de contact. Dans cette article on vous proposera d'ajouter ce formulaire et de mettre en avant ce widget sur une page statique nommée Contact.
Voici un exemple de cette page que vous pouvez réaliser à la fin de ce tutoriel
Premiere étape
Ajouter un formulaire de contact dans la section mise en page de blogger ou il y a "ajouter un widget"
Dirigez vous dans la section mise en page de votre blog puis ajouter un widget qui est formulaire de contact.
Deuxième étape
Après cliquer sur modifier le code HTML dans la section thème ensuite cliquer comme sur l'image suivante:
Une fois vous avez cliqueur sur l'icone suivant la flèche cliquez sur ContactForm1, après sélectionner le code qui se trouve juste après contact form comme sur l'image suivante:
Sélectionner le code qui débute de id=main jusqu'a <b:includable> une fois que vous l'avez sélectionné effacez tout ce qui se trouve dedans.
C'est à dire effacez tout ce qui se trouve entre <b:includable id='main'>
et </b:includable>.
Troisième étape:
C'est la dernière étape de la création de la page de contact.
Créez une page ayant pour nom Contact ou bien Contactez-Nous ensuite se mettre dans le mode affichage HTML après ajouter ce code:
-----------------------------------------------Début du code----------------------------------------------------------
<style>
.cnmufourm {
background: #ddd;background: -moz-linear-gradient(top,#ddd,#fff);background: -webkit-linear-gradient(top,#ddd,#fff);
margin: 10px auto;
padding: 20px 20px 20px 30px;
text-align: center;
width:80%;
max-width:600px;
-webkit-padding-end:20px;
border:2px solid #777;
}
.contact-form-widget {
max-width: 100%;
width: 100%;
height:100%;
}
.contact-form-name,.contact-form-email,.contact-form-email-message {
border: 1px solid #BBBBBB;
color: #605F5F;
max-width: 100%;
padding: 3px 5px 5px;
width: 100%;
font-size:16px;
height:40px;
font-family: tahoma;
text-align:left;
}
.contact-form-email-message {
margin-bottom:15px;
min-height:150px
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
border: 1px solid #8F8F8F;
color:#000;
}
.contact-form-button-submit {
background: #F68B00;background: -moz-linear-gradient(top,#FBB74B,#FA6400);background: -webkit-linear-gradient(top,#FBB74B,#FA6400);
border:0;
color:#000;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
}
.contact-form-button-submit:hover {
background:#EC992C;
border:0;
color:#000;
}
#ContactForm1_contact-form-submit2 {
background: #000;background: -moz-linear-gradient(top,#6F6F6E,#000);background: -webkit-linear-gradient(top,#6F6F6E,#000);
box-shadow: 0 0 1px 0 #000;
color:#fff;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
border:0;
}
#ContactForm1_contact-form-submit2:hover {
background:#424242;
box-shadow: 0 0 1px 0 #000;
color:#fff;
border:0;
}
</style>
<div class="cnmufourm">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == "") {this.value = "Nom";}" onfocus="if (this.value == "Nom") {this.value = "";}" size="30" type="text" value="Nom" />
<p></p>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "Email";}" onfocus="if (this.value == "Email") {this.value = "";}" size="30" type="text" value="Email" />
<p></p>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Message";}" onfocus="if (this.value == "Message") {this.value = "";}" value="Message"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit CNMU-button-color" id="ContactForm1_contact-form-submit" type="button" value="Envoyer" />
<input class="contact-form-button contact-form-button-submit CNMU-button-color" id="ContactForm1_contact-form-submit2" type="reset" value="Effacer" />
<p></p>
<div style="max-width: 222px; text-align: center; 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>
</div>
-----------------------------------------------fin du code----------------------------------------------------------
Conclusion
Ce tutoriel est simple mais en suivant les étapes au-dessus, j'espere que ce tutoriel vous a plu
Bonne chance à tous !
Aucun commentaire:
Enregistrer un commentaire
Ajouter votre commentaire ici