Accéder au contenu principal

Insérer un formulaire de contact - Zbooing : Astuces pour Google Sites

Insérer un formulaire de contact - Zbooing : Astuces pour Google Sites


Insérer un formulaire de contact

publiĂ© le 15 oct. 2009, 22:10 par Zboo Ing   [ mis Ă  jour : 26 fĂ©vr. 2013, 19:30 ]
Laisser son adresse email directement sur internet est aujourd'hui un processus risquĂ©. Vous risquez en effet de rapidement vous retrouver inondĂ© de spams vous proposant des services indĂ©sirables qui vous proposent d'Ă©largir diverses parties de votre anatomie et bien d'autres perspectives rĂ©jouissantes.

Pour Ă©viter cela, vous pouvez mettre en place un formulaire de contact sur votre site : un questionnaire Ă  partir duquel votre lecteur peut directement vous transmettre un message sans pour autant connaĂźtre votre adresse email. Grace Ă  ce tutoriel, vous recevrez par email les messages laissĂ©s par les internautes qui visitent votre site. Cette astuce ne nĂ©cessite pas de compĂ©tences spĂ©ciales en informatique.

Il existe sur internet quantitĂ© de tutoriels pour vous expliquer comment coder un formulaire de contact en html/css/php/javascript mais ils ne sont pas applicable Ă  Google Sites sans utiliser un hĂ©bergeur externe

A ce sujet, certains gadgets proposent Ă©galement des services de formulaire de contact (contact form). Personnellement je vous dĂ©conseille de les utiliser car les emails transitent alors par des serveurs externes, dont vous ne savez rien Ă  priori : rien ne garantit leur fiabilitĂ© ni leur sĂ©curitĂ© :
Vos messages peuvent ĂȘtres perdus sans que vous en sachiez jamais rien. D'autre part, rien ne garantit que les adresses emails ne soient pas stockĂ©es (la votre comme celle des internautes qui vous Ă©crivent) Ă  des fins malhonnĂȘtes (spams, courriers frauduleux etc...). 

L'astuce suivante vous permet de vous passer de ces services puisque vous utilisez uniquement votre Google Sites et une autre application Google Ă  laquelle vous pouvez accĂ©der : Google Drive pour faire transiter votre courrier.


Principe

Google Drive vous offre la possibilitĂ© de crĂ©er des questionnaires (ou pages de formulaire) personnalisables que vous pouvez mettre en ligne. Les rĂ©ponses sont enregistrĂ©es dans une feuille de calcul ou chacune d'entre elle correspond Ă  une nouvelle ligne crĂ©Ă©e automatiquement.

L'astuce consiste donc Ă  crĂ©er un formulaire avec les questions habituelles prĂ©sentes sur un formulaire de contact pour que vous puissiez visualiser les rĂ©ponses non pas sur votre mail mais dans un tableau, puis Ă  insĂ©rer ce questionnaire dans votre Google Sites.

Pour mieux comprendre, vous pouvez visualiser et tester ici : un exemple de formulaire de contact crĂ©Ă© avec Google Drive et la feuille de calcul associĂ©e qui contient les rĂ©ponses.

Création d'un formulaire Google Docs

Rendez vous sur la page Google Drive et identifiez vous. 

Si c'est votre premiĂšre utilisation, vous pouvez configurer l'application pour qu'elle soit en français (en haut Ă  droite, cliquez sur Settings, et sĂ©lectionnez Français dans le champ Choose your language puis cliquez sur Enregistrer).

CrĂ©ez maintenant un nouveau formulaire : dans le menu du haut, cliquez sur CrĂ©er->Formulaire.

Construction du formulaire de contact

Titre : Remplacez le titre par dĂ©faut de votre formulaire Formulaire sans titre par Contact ou Contactez nous...

Informations : (facultatif) Dans le champ qui se situe en dessous du titre, vous pouvez laisser votre adresse, tĂ©lĂ©phone, l'identitĂ© de votre entreprise ou association selon les cas... ou Ă©ventuellement rien du tout.

Champ Nom : (facultatif) par dĂ©faut, deux questions sont dĂ©jĂ  prĂ©sentes, dans la premiĂšre, remplacez simplement, dans le champ IntitulĂ© de la questionExemple 1 de question par Nom puis cliquez sur Terminer.

Champ Email : Ă©ditez la seconde question en positionnant votre souris sur Exemple 2 de question et en cliquant sur Modifier (bouton "crayon"). Remplacez alors Exemple 2 de question par Votre adresse email
Vous pouvez obliger l'utilisateur Ă  remplir ce champ en cochant la case Rendre cette question obligatoire puis cliquez sur Terminer.

Champ Objet : CrĂ©ez une troisiĂšme question en cliquant sur + Ajouter un Ă©lĂ©ment -> Texte. Dans le champ IntitulĂ© de la question, renseignez Objet du message puis cliquez sur Terminer.

Corps du message : CrĂ©ez une nouvelle question en sĂ©lectionnant cette fois + Ajouter un Ă©lĂ©ment -> Texte de paragraphe. Mettez Votre message comme intitulĂ© de la question, cochez Rendre cette question obligatoire (conseillĂ©) et cliquez de nouveau sur Terminer.

Personnalisez le message de confirmation : Cliquez sur Autres actions->Modifier la confirmation.
Remplacez alors le message par dĂ©faut par "Votre message a bien Ă©tĂ© pris en compte, il sera traitĂ© prochainement" ou par une autre phrase de confirmation de votre choix et signez le.

Personnalisez l'apparence de votre formulaire : cliquez sur Theme : plain et sĂ©lectionnez le thĂšme qui s'intĂšgre au mieux Ă  votre site.

Votre formulaire est maintenant terminĂ©, n'oubliez pas de cliquer sur Enregistrer

Utilisation : Vous pouvez tester votre formulaire en cliquant sur l'adresse prĂ©sente en bas de la page de crĂ©ation. 

AprĂšs sa crĂ©ation, votre formulaire est prĂ©sent sous forme de feuille de calcul dans la liste de vos documents Google DocsChaque rĂ©ponse crĂ©e automatiquement une nouvelle ligne. Si vous souhaitez le modifier ultĂ©rieurement ou retrouver son adresse, rendez vous sur la feuille de calcul et cliquez sur Formulaire.

Il ne vous reste maintenant qu'Ă  l'insĂ©rer dans Google Sites

Insertion du formulaire de contact dans Google Sites

  1. Connectez vous à votre Google Sites et naviguez vers la page sur laquelle vous souhaitez intégrer votre formulaire de contact.
  2. Cliquez sur Modifier la page.
  3. Dans le menu d'Ă©dition, cliquez sur InsĂ©rer->Document.
  4. Sous Tous les documents, sĂ©lectionnez Formulaires puis choisissez votre Formulaire de contact et cliquez sur SĂ©lectionner.
  5. ParamĂ©trez votre gadget et cliquez sur Enregistrer.
  6. Enregistrez votre page et visualisez le rĂ©sultat :

Formulaire de contact ‎‎(Exemple)‎‎

Etre prévenu des nouveaux messages par email :

Recevoir des messages depuis votre site, c'est bien mais encore faut il le savoir en temps réÚl. Pour cela, il vous suffit pour celà d'utiliser les fonctionnalités de script de Google Documents. Vous serez alors averti instantanément de tout nouveau message en recevant un email.

  • Connectez vous Ă  Google Documents et ouvrez le formulaire de calcul qui contient les messages en provenance de votre site.
  • Dans le menu supĂ©rieur, sĂ©lectionnez Outils > Script > Ă‰diteur de scripts.
  • Une fenĂȘtre popup s'ouvre alors, dans laquelle vous pouvez Ă©crire votre script.
Le script : remplacez le contenu de la fenĂȘtre par le script suivant : 
function formulaireContactEmail(e) {
  try {
    var recipient = "toto@gmail.com";
    var timestamp = e.values[0];
    var email = e.values[1];
    var objet = e.values[2];
    var message = e.values[3]
    var body = ' <'+email+'> vous a envoyĂ© le message : '+message;
    var bodyHTML1 = '<p>Le '+timestamp+', <a href="mailto:'+email+'">'+email+'</a> vous a envoyĂ© : </p>';
    var bodyHTML2 = '<blockquote>'+message+'</blockquote>';
    var advancedArgs = {htmlBody:bodyHTML1+bodyHTML2 , replyTo:email};
    MailApp.sendEmail(recipient, objet, body, advancedArgs);
  } catch(e){
    MailApp.sendEmail(recipient, "Error - Formulaire de contact", e.message);
  }
}

  • Personnalisez le script en remplaçant toto@gmail.com par votre propre adresse email :
NB : ce code suppose que vous avez crĂ©Ă© votre formulaire de contact en utilisant le tutoriel ci dessus. Le champ email se trouve donc en premiĂšre position, objet en deuxiĂšme et message en troisiĂšme. Si vous avez agencĂ© les champs diffĂ©remment, il vous suffit de remplacer les nombres entre crochet par le numĂ©ro de colonne correspondant. Par exemple si vous avez mis un champ nom en 1er,  email en 2eme, mettez 
var email = e.values[2]; 
var objet = e.values[3];
var message = e.values[4];
  • Une fois que votre code est personnalisĂ©, cliquez sur l'icone enregistrer.  Donnez un nom Ă  votre script (formulaireContactEmail), Ă©ventuellement une description.
  • Il vous reste maintenant Ă  dĂ©finir le dĂ©clencheur de votre script : vous souhaitez en effet qu'il s'exĂ©cute (ie : qu'il vous envoie un email) Ă  chaque fois que vous recevez un email. Cliquez sur DĂ©clencheurs > Current script's triggers...
  • Choisissez le script : formulaireContactEmail, le dĂ©clencheur : From spreadsheet et On form Submit, ce qui correspond Ă  l'envoi d'un email Ă  chaque fois que vous recevez un message. Cliquez ensuite sur Save.
  • Enregistrez de nouveau votre script  . Vous pouvez dĂ©sormais tester votre formulaire de contact.


Commentaires

Posts les plus consultés de ce blog

TOP outils de rĂ©fĂ©rencement gratuits qui valent la peine d'ĂȘtre utilisĂ©s en 2023

Les outils de rĂ©fĂ©rencement gratuits qui valent vraiment la peine d'ĂȘtre utilisĂ©s

Changement de domaine en 2023 : tout ce que vous devez savoir

Chatbot Dialogflow : Tutoriel NoCode NLP pour les spĂ©cialistes du marketing | Landbot

Revenu passif : idées pour gagner de l'argent (en dormant)

Meilleurs outils de rĂ©fĂ©rencement 🛠 organisĂ©e par Saijo George

La toolbox du growth hacker 💎 - Outils - Growthhacking.fr | CommunautĂ© française de growth hacking

Comment signer avec une maison de disques ? Voici notre guide ultime pour 2024

100 outils pour lancer sa startup sans argent (mais pas sans talent)