Formulaire de contact de widget

Widget Formulaire de contact réactif - Le formulaire de contact ou Contactez-nous est l'un des nombreux widgets importants qui doivent exister sur chaque page de site Web, y compris les sites de blogueurs. Les widgets de formulaire de contact sont des intermédiaires reliant les visiteurs aux gestionnaires de site. Les formulaires de contact (formulaires de contact) sont généralement utilisés pour envoyer message sous forme de critiques, suggestions, commandes de publicités et autres. En outre, ce formulaire de contact fonctionne également comme un filtre anti-spam ou un programme malveillant pouvant être envoyé par des visiteurs coquins au gestionnaire du site de messagerie.

La plate-forme blogger fournit en fait des widgets de formulaire de contact pour les sites de blog, mais l'affichage du formulaire de contact fourni est toujours très simple. Le gestionnaire de site "par défaut" doit personnaliser le style du formulaire de contact lui-même avec quelques ajouts css pour le rendre plus élégant.

Comment créer une page de formulaire de contact Blogger

1. Connectez-vous à Blogger et créez une nouvelle page "page".
2. Dans le coin supérieur gauche de l'éditeur de page, cliquez sur le mode html au lieu de composer.
3. Copiez et collez le script de formulaire de contact blogger ci-dessous, puis appuyez sur le bouton Publier.
4. N'oubliez pas de créer un titre sur votre page de formulaire de contact.

Les tutoriels sont plus faciles à appliquer par quiconque car ce script de formulaire de contact de blogueur avait auparavant été ajusté et conçu pour être facilement installé sur la page statique de ce dernier.

Spécification du widget de formulaire de contact

• 100% réactif et mobile friendly
• Aspect simple et élégant + facile à appliquer
• Notification prête d'envoi de messages (message de réussite, message d'échec et message de saisie)

Formulaire de contact de script (combinaison de scripts css, html et java)

<style scoped = "" type = "text / css">
#stlb {margin: auto; max-width: 100%;}
# ContactForm1_contact-form-name, # ContactForm1_contact-form-email {width: 100%; height: auto; margin: 5px 0; padding: 15px 0; background: #fff; color: # 444; frontière: solide 1px rgb (213) , 216, 220);}
# ContactForm1_contact-form-email-message {width: 100%; height: 200px; margin: 5px 0; padding: 15px 0; background: #fff; color: # 444; border: 1px solid rgb (213, 216, 220) ;}
# ContactForm1_contact-form-submit {float: right; background: # 404040; marge: auto; alignement vertical: milieu; curseur: pointeur; remplissage: 12px 20px; taille de la police: 14px; alignement du texte: centre; espacement des lettres : .5px; border: 0; width: 100%; max-width: 140px; border-radius: 3px; color: #fff; police-weight: 500; transition: toutes les facilités .2}
# ContactForm1_contact-form-submit: hover {background: # 00BE98;}
# ContactForm1_contact-form-error-message, # ContactForm1_contact-form-success-message {width: 100%; margin-top: 0px; background: # 404040; color: #fff; taille de la police: 13px; fonte-weight: 600 ; border-radius: 3px}
</ style>

<form id = "stlb" name = "contact-form">
<input id = "ContactForm1_contact-form-name" name = "name" espace réservé = "Name *" size = "30" type = "text" value = "" />
<input id = "ContactForm1_contact-form-email" name = "email" placeholder = "Email *" size = "30" type = "text" value = "" />
<textarea cols = "25" id = "ContactForm1_contact-form-email-message" name = "email-message" placeholder = "" rows = "5"> </ textarea>
<input id = "ContactForm1_contact-form-submit" type = "button" value = "Envoyer un message" />
<div style = "max-width: 222px; text-align: center; width: 100%;">
<div id = "ContactForm1_contact-form-error-message" ">
</ div>
<div id = "ContactForm1_contact-form-success-message">
</ div>
</ div>
</ form>
<script src = "https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
// <! [CDATA [
if } _WidgetManager._Init ('// www.blogger.com/rearrange?blogID\x3d7234936860206777062','//atomuu.blogspot.com','7234936860206777062');
_WidgetManager._RegisterWidget ('_ ContactFormView', nouveau _WidgetInfo ('ContactForm1', 'footer1', null, document.getElementById ('ContactForm1'), {'contactFormMessageSendingMsg': '<span style = "padding: 5px"> S ... . </ span> ',' contactFormMessageSentMsg ':' <span style = "padding: 5px 10px"> Votre message a été envoyé avec succès. Merci de nous avoir contacté </ span> ',' contactFormMessageNotSentMsg ':' <span style = "padding: 5px 10px"> Impossible d'envoyer le message. Veuillez réessayer ultérieurement. </ span> ',' contactFormInvalidEmailMsg ':' <span style = "padding: 5px 10px"> Une adresse email valide est requise. </ span > ',' contactFormEmptyMessageMsg ':' <span style = "padding: 5px 10px"> Le champ du message ne peut pas être vide. </ span> ',' title ':' Formulaire de contact ',' blogId ':' 7234936860206777062 ',' contactFormNameMsg ':' Nom ',' contactFormEmailMsg ':' Email ',' contactFormMessageMsg ':' Message ',' contactFormSendMsg ':' Envoyer ',' submitUrl ':' https://www.blogger.com/contact-form.do '},' display ModeFull '));
//]]>
</ script>

Les instructions

• Veuillez modifier le code marqué en gras rouge avec l'ID du site blogger et l'URL du site respectif.
• Modifiez également le message de notification texte indiqué en bleu si nécessaire.
• Placez tous les scripts de formulaire de contact css, html et java sur une seule page, comme décrit dans les étapes ci-dessus.
• Voir l'exemple de formulaire d'affichage "display" sur ce lien [Formulaire de contact de démonstration]

Remarque: votre code d'identification Blogger est visible dans la barre supérieure du navigateur, comme dans l'exemple suivant.

https://draft.blogger.com/blogger.g?blogID=7234936860206777062#editor/

Terminé, j'espère que ce tutoriel peut vous aider à créer une page "contactez-nous" sur votre site de blogueur. Suivez ce site de messagerie pour recevoir des notifications de nos derniers articles.