davidtouvet.com

Vous connaissez Google Docs?

• si oui, lisez ce qui suit car vous allez découvrir une nouvelle fonction du tableur de cette suite bureautique en ligne
• si non, prenez le temps de vous intéresser à ce sujet car les fonctionnalités proposées par l’ensemble des outils / services de Google Docs sont vraiment bien ficelées et permettent dans bien des cas d’accomplir beaucoup plus facilement et efficacement des tâches collaboratives

On connaissait Google Docs et son fameux tableur (le truc qui ressemble à Excel), on savait comment “partager” des documents pour y travailler à plusieurs mais là, on passe la vitesse supérieure. Depuis ce matin je n’arrête pas de tomber sur la même info, notamment grâce au commentaire d’un lecteur de ce blog, ce qui fait que je vais la bloguer pour la retenir et la proposer à ceux qui ne la connaîtrait pas encore.

Google Docs ajoute dans son tableur une possibilité de créer des formulaires en ligne avec un outil certes encore très basique (lire les critiques notamment de Nicolas sur son blog Internet, webmarketing et autres futilités) mais qui se révèle très simple à utiliser et permet rapidement de récolter une liste de réponses qui pourront être traitées “à la excel” dans Google Docs ou alors exportées pour être traitées par d’autres outils statistiques. Bref, la classe! Voici en gros comment ça fonctionne et vous trouverez des liens en fin d’article pour plus de screenshots et d’explications:

• vous ouvrez un compte Gmail pour avoir un compte Google et accéder à Google Docs (c’est la première chose à faire si vous ne l’avez pas déjà faite)
• vous créez un feuille de calcul
• dans l’onglet “partager” vous sélectionnez “inviter des personnes à remplir un formulaire”
• un outil très convivial (ceux qui ont déjà construit un formulaire comprendront…) vous permettra de construire votre formulaire en ajoutant des questions de type
  • texte
  • texte de paragraphe
  • choix multiple
  • cases à cocher
  • sélectionner dans la liste
• vous sélectionnez ensuite les personnes qui vont devoir le remplir (ces personnes ne doivent pas nécessairement avoir un compte Google, ce qui est bien pensé, non?)
• ces personnes recevront un email les invitant à répondre DIRECTEMENT dans le mail à ce formulaire ou pour les anti-format-html (si si j’en connais encore) à cliquer sur un lien pour y répondre en ligne
• on peut leur permettre de voir les réponses des autres ou non
• en ouvrant à nouveau votre feuille de calcul, vous retrouverez toutes les réponses envoyées, bien sagement rangées dans un tableau

Voici quelques liens pour en savoir plus:

• l’annonce officielle de Google: Stop sharing spreadsheets, start collecting information
• des bons tutoriels: Formulaires en ligne avec Google Documents et Créer un questionnaire en ligne sur Google Docs
• un petit widget Google à ajouter dans votre Google Home: Google Docs: forms list
• et une astuce trouvée sur cet article permettant d’intégrer un formulaire sur n’importe quelle page web (c’est tout con mais fallait y penser):

En fait pour intégrer le formulaire :
- cliquer sur le doc concerné
- cliquer sur partager en haut à droite
- acceder au formulaire en ligne
- depuis votre navigateur, afficher le code source
- là de “<”form”>” à “<”/form”>” vous avez le code du formulaire, précédé du stytle css à intégrer dans votre propre feuille.
Vous pouvez aussi modifier l’affichage à votre guise, tant que vous respecter l’architecture du formulaire.

Bref, que du bon, et c’est exactement l’outil que je recherchais pour l’intégrer à moostic car les questionnaires de Moodle (tests) restent dans une logique de notations et les champs de réponses sont nommés “solutions” ce qui n’est pas du tout adapté dans bien des cas.

WP-ContactForm est un plugin très sympathique puisqu’il permet d’ajouter rapidement et simplement un formulaire de contact où l’on désire sur WordPress (capture d’écran des options du plugin).

Bon je l’avoue, ce titre est vraiment mauvais… En gros, quand on entre une fois quelque chose dans un champ de formulaire dans Firefox, par exemple une URL, Firefox propose dès les premières lettres tapées, les entrées correspondantes. Ok, on le savait. Mais quand on fait une faute ou quand par exemple, une URL n’est plus valide, on aimerait bien pouvoir les effacer de la mémoire de Firefox, sans passer par les Options et tout effacer d’un coup…

Rien de plus simple, mon collègue a trouvé la combine, il suffit de sélectionner avec les flèches du clavier l’entrée en question et de taper au clavier “maj+effacer” (shift+delete).

Frédéric CAVAZZA publie sur son site FredCavazza.net un tutoriel permettant de réaliser des formulaires plus simples:

Remplir un formulaire en ligne n’est pas une tâche facile. Trop compliqués ou trop intimidant, les formulaires sont la hantise des utilisateurs. Il existe cependant un certain nombre d’actions possibles pour faciliter la lecture à l’écran, diminuer les sources d’erreurs possibles et les rendre plus simples d’utilisation.

J’y ai retrouvé avec plaisir la balise <fieldset> découverte la semaine passée et permettant de regrouper des éléments similaires, ainsi que d’autres actions à entreprendre:

1. Grouper les éléments similaires
2. Améliorer la lisibilité
3. Aligner les intitulés et les champs
4. Utiliser des intitulés intuitifs
5. Répartir les éléments d’un menu déroulant en sous-groupes
6. Bien signaler les champs obligatoires
7. Fournir de l’aide contextuelle
8. Positionner le curseur dans le premier champ
9. Paramétrer les raccourcis clavier
10. Mettre en valeur le champ en cours d’utilisation
11. Contrôles de surface
12. Contrôles côté serveur

Ce tutoriel est très convivial et agréable à consulter. Néanmoins, on pourrait améliorer son ergonomie en signalant à chaque étape qu’il faut aller consulter la source de la page web pour découvrir les détails de la programmation du formulaire. En ne lisant que la phrase introduisant chaque étape on reste sur notre faim car les détails et la mise en pratique des actions à entreprendre sont en fait décrits dans le code HTML de chaque page. On peut également déplorer que le code des premières étapes contient déjà des éléments que l’auteur expliquera au cours d’étapes ultérieurs.

Si l’on voulait être parfait, il faudrait proposer à chaque étape de télécharger le code du formulaire correspondant uniquement à l’action décrite et le faire évoluer lors de la présentation de nouvelles actions et non pas seulement à la fin comme précisé par l’auteur: “Pour télécharger les fichiers sources, ça se passe ici : SimplifiezVosFormulaires.zip”.

Normalement, le résultat d’un formulaire s’ouvre dans la fenêtre courante. On sait que pour l’ouvrir dans une nouvelle fenêtre on peut rajouter l’attribut target=”_blank” dans la balise <form>. Cependant, il peut être parfois utile d’ouvrir le résultat d’un formulaire dans un pop-up. Il faut pour cela utiliser cette astuce en javascript:

<form method=”post” action=”resultat.html” target=”popup” onsubmit=”javascript:window.open(”,’popup’,'width=600,height=600,top=’+((sc
reen.height-600)/2)+’,left=’+((screen.width-600)/2)+’,scrollbars=1,location=
1,status=1,resizable=1′);”>

Les paramètres de la fonction “window.open” peuvent être réglés différemment pour afficher un pop-up plus ou moins grand. Si l’on désire afficher un pop-up au centre de l’écran, il faut veiller à ce que les paramètres soient identiques.

Pour vérifier si certains champs d’un formulaire ont bien été remplis, on peut utiliser cette petite fonction javascript très facile à implémenter:

A placer entre les balises <head> et </head>:

<SCRIPT LANGUAGE=”JavaScript”>
function verification(valeur)
{
if(valeur.email.value == “”)
alert(’Merci de bien vouloir saisir votre email !’);
else
valeur.submit();
}
</SCRIPT>

On peut bien sûr ajouter des tests sur d’autres champs dans cette fonction.

Exemple d’utilisation dans un formulaire:

<form>
<input type=”text” name=”nom” size=30>
<input type=”button” value=”envoyer” onclick=”verification(this.form)”>
</form>

Voici quelques ressources permettant de concevoir de bons formulaires HTML:

• “Comprendre les formulaires HTML“: bonnes explications pour débutant.
• “Les formulaires HTML” du site “CommentCaMarche.net“: permet d’en savoir un peu plus sur les attributs des différentes balises.
• “Les formulaires“: ressource apportant un éclairage nouveau sur des balises peu utilisées: “fieldset”, “legend” et “optgroup”.
• “Les formulaires” de “l’Altruiste” vient compléter le tout.

(Mise à jour 20041120) Pour ceux qui aimeraient mixer un peu de Javascript avec les formulaires (notons qu’il faudra toujours veiller à valider les données du formulaire du côté serveur dans le cas où l’utilisateur aurait désactivé le Javascript):

• (Mise à jour 20040919) : tutorial montrant comment le javascript entre également en ligne de compte pour gérer des formulaires.
• Javascript enhanced form

Avec Spip, “si vous voulez avoir un bouton “ok”, vous ne devez pas utiliser le #FORMULAIRE_RECHERCHE et coder votre propre formulaire.”