Outils pour utilisateurs

Outils du site


dwcms:ressources:form:contact

Formulaires : contact

Généralement, si le besoin est là, un site possède un formulaire de contact. Il s'agit presque d'un ingrédient incontournable du site dédié à un professionnel.

Sur cette capture, vous apercevez un bouton "Créer" pour ajouter un nouveau formulaire de contact (un seul suffit, je vous explique après) et une liste de formulaires de contact portant chacun un nom.

Si un formulaire est sur plusieurs pages pas besoin de le créer pour chaque page, c'est une évolution par rapport à un état de fait dépassé que j'ai mentionné en début de documentation (allusion à Powerpoint, Word, de vieux et actuels CMS, etc). Il en ira de même pour tous vos ingrédients, notamment les images. Imaginez le gain de temps de configuration, le gain de place sur le serveur et le gain de temps de chargement pour les visiteurs du site. Ces visiteurs, s'ils rencontrent de nouveau l'image sur une autre page, il s'agira de la même image que leurs navigateurs auront en cache et non d'une copie qu'il faudra elle aussi demander auprès du serveur. "Et voilà".

Les boutons dans la colonne action (clé à molette) :

  • le bouton vert ou orange avec deux flèches permet d'activer/désactiver l'élément. Vert avec la petite icône "OK" ⇒ actif.
  • Le petit œil "Lire" permet de voir les détails de l’élément.
  • Le petit carré avec un crayon "Mise à jour" de ces mêmes détails.
  • La poubelle "Supprimer" (après confirmation pour les cliqueurs empressés).
  • Le crayon "Édition" (parfois marqué comme associer), il permet d'éditer les enfants de l’élément.

L'iconographie est la même dans tout l'applicatif.

Le bouton qui nous intéresse est le bouton "Édition" (crayon) qui va nous permettre d'éditer/associer les champs du formulaire. Cliquez !

L'interface

le bouton "Liste" se trouvant dans un composant "sticky" (se colle à un bord de l'écran avant de sortir de la zone visualisée dans le navigateur pour rester accessible à l'usager, sans nécessité d'utiliser l'ascenseur pour le retrouver), il n'est pas là où il devrait être à cause du mode de capture d'écran.

Le bouton "Liste" permet de revenir à la liste des formulaires de contact.

Les actions

Je ne m'attarderais pas sur l'iconographie déjà décrite dans cette même page, les effets sont les mêmes.

Pour créer une nouvelle action, il suffit de la sélectionner dans la liste déroulante puis de cliquer sur le bouton créer qui si vous regardez bien fait visuellement partie de la liste déroulante (il y est donc associé et vous retrouverez cette construction régulièrement dans l'administration, indiquant le même fonctionnement).

Les deux actions qui nous intéressent sont :

Captcha

Il s'agit de la seule action qui aura une influence visible pour les usagers du site. En effet, un "captcha" est un petit dispositif qui lutte contre l'envoi des formulaires par les robots.

Pour faire simple, seul un humain devrait pouvoir effectuer les actions demandées par la partie visuelle de ce dispositif.

Tout formulaire de contact doit posséder son "captcha", en effet, sans, votre boîte e-mail débordera littéralement de courriels non désiré provenant du formulaire du site vous promettant monts et merveilles ainsi que de formidables réductions sur du viagra, etc.

Les risques qui découlent de l'oubli de ce dispositif sont nombreux.

  • Vous perdez votre temps à filtrer manuellement le grain de l'ivraie.
  • Votre messagerie (côté serveur) risque de saturer et vous ne recevrez plus aucun e-mail. Et ce quelle que soit la provenance de l'e-mail (et vous ne savez peut-être pas où aller en ligne pour régler le problème).
  • Simplification : la fréquence effrénée (et le contenu des messages entre l'adresse e-mail du serveur et votre propre adresse e-mail) pourrait entraîner le bannissement de l'adresse e-mail du serveur par votre adresse e-mail. Donc plus de mails de votre formulaire de contact et vous l'avez compris, en refaire un autre ne règle pas le problème. Il faudra alors débourser pour qu'une personne intervienne sur plusieurs points pour pallier le problème… l'adresse quant à elle restera bannie. Sans "captcha", le cycle se répétera.
  • En manipulant tous ces messages, il y a un risque que votre ordinateur finisse par être infecté après tout, c'est l'un des buts de ces "pourriels" (contraction d'usage de poubelle et courriel).

N'oubliez pas sortez couvert pour rester dans le thème cuisine.

N'oubliez pas de mettre un titre (nom) correcte au "captcha" que vous créez, en effet il servira de titre/label sur les pages web où il figurera.

Envoi par e-mail (email)

On distingue 4 champs importants :

Titre : il s'agit d'un nom d'usage qui apporte un soutien visuel dans l'interface (par exemple : personnel, cabinet, secrétariat, etc.) et un support pour des logiciels d'administration de votre administration (ne changez donc pas un titre qui aurait comme valeur "owner").

Sujet : tout bêtement, le sujet de l'e-mail que vous recevrez.

Courriel : l'adresse e-mail à laquelle vous recevrez le contenu du formulaire.

Expéditeur : Attention surtout pas d'adresse e-mail ici (l'adresse e-mail d'expédition est gérée en interne), mais le nom qui couvre cette adresse e-mail. Il s'agit en fait du nom de l'expéditeur (John Doe) et comme il s'agit d'un site, le mieux et de mettre le nom de domaine principal (donc sans la particule du sous-domaine : "www.", "fr.", "edito.", etc), par exemple : Monsite.com

Si vous désirez un système de sauvegarde de vos formulaires, ajoutez une autre action "e-mail" vers une autre adresse. En cas de problème avec votre adresse e-mail principale, vous pourrez consulter votre adresse e-mail secondaire et même renvoyer ces messages de la seconde vers la première (via le bouton transférer de votre messagerie)

Je vous conseille de faire un tour dans la section astuces : messagerie.

Les champs

Le champ "Titre" correspondra au "Label" dans le site. De même, une case à cocher "Obligatoire" rend le champ obligatoire (souvent symbolisé par une petite étoile rouge à côté du champ).

Le champ texte (text)

Pour un texte court, comme le nom d'une personne.

La zone texte (textarea)

Beaucoup plus libre, il prendra beaucoup plus de place en hauteur mais permettra d'insérer dans le formulaire un texte largement plus conséquent, il pourra aussi être redimensionné .

Le champ e-mail (email)

Comme un champ texte, mais spécialisé dans les adresses e-mail, il s'assurera que ce champ contient bien une adresse e-mail bien formée (beaucoup de gens font l'amalgame en parlant d'adresse e-mail valide, alors que seul le fait que le texte corresponde à la forme requise d'une adresse e-mail est testé par ce type de champ), l'adresse n'est pas forcément valide (qu'elle existe bien).

Le champ URL (url)

Il s'agit exactement du principe du champ e-mail transposé à une URL.

Le champ choix (choice)

Il permet de proposer une liste déroulante ou un groupement de case à cocher en fonction des réglages.

Une fois ajouté, vous remarquerez que le bouton "+" accolé d'une petite flèche vers le bas peut être utilisé sur ce champ pour ajouter des options qui sont les valeurs possibles du champ.

Ce bouton "+" permet également dans le cas présent d'ajouter des groupes dans lesquels ranger les options.

Vous remarquerez que dans cette partie d'interface, il y a des boutons de directions supplémentaires qui permettent de monter et descendre ces options.

Groupement (fieldset)

Dans certaines versions de l'administration, il est possible d'utiliser des "groupements" pour faire des regroupements de champs. Ceci se traduit par un liserait entourant un groupe de champs avec une légende en entête.

Les boutons

Il n'existe que deux types de boutons. Le "Titre"/"Nom" de chaque type de bouton correspond au "Label" du bouton dans le site.

Envoi (submit)

Il sert à soumettre le formulaire (un envoi au serveur), ce bouton est nécessaire et le label le plus approprié est "Envoyer".

Effacer (reset)

Il sert à remettre le formulaire dans l'état dans lequel il était lors de son chargement. Ce bouton est facultatif, les labels appropriés sont "Effacer" et "Rétablir".

La suite

dwcms/ressources/form/contact.txt · Dernière modification: 2015/07/18 11:30 (modification externe)