Comment ajouter norme formulaire de contact blogueur sur une page statique.

Ajouter formulaire de contact blogueur standard sur la page statique

Découvrez comment ajouter norme formulaire de contact blogueur sur une page statique.

Il y a quelque temps Blogger a lancé un nouveau gadget Formulaire de contact standard.
Son installation est simple et facile à incorporer sans codes ou paramètres additions.
Son fonctionnement est très pratique, et chaque fois que quelqu'un vous envoie un message via le formulaire, le message sera envoyé directement à votre compte Gmail (le même que vous utilisez pour gérer votre blog). Si votre blog a plus d'un metteur en scène, ils ont tous le message.

Dans ce tutoriel, je vais vous montrer comment mettre en œuvre le formulaire de contact standard blogueur, dans une page statique.
Considérez: Ajout de la norme formulaire de contact blogueur sur une page statique.

1. Ajouter formulaire de contact gadget dans la barre latérale

Accéder au tableau de bord Blogger, cliquez sur le menu "Mise en page", puis choisissez l'emplacement pour ajouter plus tard le formulaire dans la barre latérale, puis cliquez sur "Ajouter un gadget".

Enregistrer les modifications.

Si votre intention est de laisser le formulaire de contact que dans la page statique, il est évident que ce serait intéressant que la forme est également apparu dans la barre latérale.
Calme cette forme est temporairement dans la barre latérale, continuez à suivre les étapes du tutoriel, je vais vous enseigner une façon de laisser la forme que sur la page, sans qu'il perde sa fonctionnalité.

2. Ajouter le formulaire de contact sur la page blogger statique:

Créer une page statique, mettez le titre de la page que vous préférez.
Dans le poste de l'éditeur de texte, cliquez sur l'onglet "HTML" et collez le code suivant:
[lock]

<div id="formcontact">
Remplissez les champs ci-dessous pour contacter.
Ne pas oublier de remplir le champ avec votre e-mail pour répondre, le cas échéant.
<span style="font-size: 12px;">Les champs marqués d'un "*" sont obligatoires.</span><br />
<form name="contact-form">
<div>
<b>Nom:</b> *</div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="60" type="text" value="" />
<br />
<div>
<b>E-mail:</b> *</div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="60" type="text" value="" />
<br />
<div>
<b>Message:</b> *</div>
<textarea class="contact-form-email-message" 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="Envoyer" />
<div style="max-width: 450px; text-align: center; width: 100%;">
<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>

[/lock]

Ne changez rien dans le code! coller le code html blogueur page statique Publier la page.

3.Personnaliser le blogueur formulaire de contact standard:

Il est possible d'appliquer une certaine forme de contact de style CSS, par exemple, augmenter la largeur de sorte qu'elle correspond à la largeur d'une page statique.

Accédez au menu "Edit HTML >> >> modèle et rechercher:

]]></b:skin>

A côté de cette balise, vous verrez une petite flèche noire. Cliquez sur ce lien. Maintenant, collez le code suivant juste au-dessus de cette balise.

/*couleur de la forme de fond */

#formcontact{

background:#ffffff; /*---couleur de la forme de fond---*/

max-width: 100%;

margin: 0 auto;

padding: 30px;

}

#formcontact p{   /*---en se référant aux styles de la source des champs---*/

color:#000;

}

.contact-form-name, .contact-form-email, 

.contact-form-email-message, 

.contact-form-button-submit { /*---En ce qui concerne les champs---*/

width: 100%;

max-width: 100%;

margin-bottom: 10px;

color: #f1f1f1;   /*---champs de couleur de police---*/

}
.contact-form-button-submit {  /*-----En ce qui concerne le bouton d'envoi---*/

width: 150px;  /*-----largeur de bouton---*/

height:40px;    /*-----bouton temps---*/

font-size: 18px;   /*-----taille de la police---*/

border-color: #ccc;  /*-----couleur de la bordure---*/

background: #333;   /*-----bouton de couleur de fond---*/

color: #fff;   /*-----font color---*/

}

.contact-form-button-submit:hover {  /*-----mode de vol stationnaire bouton envoyer---*/

border-color: #ccc;  /*-----couleur de la bordure---*/

background: #FF8C00;   /*-----bouton de couleur de fond---*/

color: #fff;   /*-----font color---*/

}
#ContactForm1 {

display: none; /*-----hide gadget de la barre latérale---*/

}

Notez que dans le code ci-dessus, la ligne ci-dessous # ContactForm1 a la commande "display: none", cela permettra d'éliminer l'affichage de la barre latérale du gadget, mais il gardera le fonctionnement des caractéristiques du gadget dans votre page statique.

Tous les extraits de code que vous pouvez modifier sont déjà mis en évidence.

A aimé cet article? partager avec vos amis
Laissez vos commentaires
Si vous avez un problème avec votre interlocuteur de code, nous serons heureux de vous aider