Créer vos formulaires

Cet article souhaite vous aider dans la construction d’un formulaire html, qui envoie un email contenant les informations remplies par le visiteur à une adresse donnée. Créer ce type d’outil interactif demande de mettre un peu les mains dans le cambouis (le html), comme on dit par chez nous. Si vous n’avez pas l’habitude du html, ne vous effrayez pas ! Le meilleur moyen d’apprendre est d’essayer, et vous ne risquez pas grand chose à tenter de construire cela. Une fois que vous en aurez réalisé un ou deux, cette démarche sera pour vous un jeu d’enfant.

Pour commencer

Si vous souhaitez commencer à construire un formulaire, le plus simple est de réaliser ce formulaire à l’aide d’un petit éditeur texte. Si vous êtes sous windows, et que vous n’envisagez pas de changer, nous vous recommandons par exemple Notepad++, très fiable [1]

A l’aide de cet éditeur, crééz un nouveau fichier html :

  1. Démarrez votre éditeur texte
  2. Cliquez sur "enregistrez sous", et sauvez votre fichier en choississant l’extension .html
  3. Tout en gardant votre éditeur texte ouvert, ouvrez le fichier créé dans votre navigateur (firefox)

De cette manière, à chaque fois que vous enregistrerez votre fichier (ctrl+s), vous pourrez par la suite rafraichir votre navigateur (f5) pour voir le résultat de votre modification.

Pour s’assurer que vous êtes prêt à démarrer, ajoutez par exemple un titre (<h1>Titre de mon formulaire</h1>) dans votre page et vérifiez qu’il s’affiche bien dans votre navigateur.

Le formulaire

Votre formulaire doit commencer par une balise <form>, qui indique l’adresse du script d’envoi d’email de Cassiopea, la méthode d’envoi [2], et le type d’encodage des données envoyées. Si vous êtes hébergés chez Cassiopea, vous pouvez copier/coller la ligne d’exemple ci-dessous.

<form action="/cgi-cas/formemail.php" method="post" enctype="application/x-www-form-urlencoded">

Votre formulaire se terminera par la balise fermante bien entendu : </form>

Entre ces deux balises, vous allez construire votre formulaire. Il existe plusieurs balises html utiles à cet effet, que nous allons explorer petit à petit. Sur ce sujet ce tutorial n’est pas exhaustif. Nous vous conseillons de faire une recherche sur google pour trouver des récapitulatifs plus complets.

Chacune de ces balises recevra un attribut "name" qui définit le nom de la donnée envoyée.

exemple, pour offrir un champ texte qui permet au visiteur d’écrire son nom, on utilisera le code suivant :

<input type="text" name="votre_nom" />

Ajouter et remplir les champs cachés (paramétrage)

En haut de votre formulaire, un certain nombre de champs cachés vont vous permettre de paramétrer votre formulaire : à quelle adresse email le formulaire doit-il être envoyé, quel est le sujet, vers quelle page est renvoyé le visiteur une fois le formulaire envoyé, etc... Ces champs ne sont généralement pas remplis par le visiteur, et peuvent donc être invisibles. Nous utiliserons donc des balises "hidden" [3]. Des exemples sont fournis ci-dessous.

Exemple, pour le sujet : <input type="hidden" name="subject" value="sujet du mail envoyé" />

L’adresse email du destinataire

Le spam est un fléau qui n’épargne que les plus prudents ! Une adresse email écrite en clair dans une page web, sera très rapidement "sniffée" par de nombreux robots virtuels qui, au service d’humains peu scrupuleux, constituent des bases de données d’adresses email en analysant les pages d’internet. C’est pourquoi le script de Cassiopea demande de crypter les adresses suivant une certaine convention, pour éviter cela, ou au moins compliquer la tâche à ces robots fouineurs :

L’adresse doit être écrite à l’envers, en remplacant le "@" par une "|" et les "." par des "#"
Exemple : jean.claude.van-damme@fullcombat.org devient gro#tabmoclluf|emmad-nav#edualc#naej

Cette adresse cryptée doit être ajoutée dans un "input" de type hidden, dont l’attribut name est "to".

Exemple : <input type="hidden" name="to" value="gro#tabmoclluf|emmad-nav#edualc#naej">

Pour encoder ou décoder facilement vos adresses email, utilisez ce petit formulaire (en anglais).

Le sujet du mail

Bien que le sujet de l’email puisse être laissé au choix du visiteur, le fixer permet de garantir qu’il sera présent et peut aider dans le classement des courriels reçus.

Voici un exemple du sujet déterminé, et caché <input type="hidden" name="subject" value="sujet du mail envoyé" />

Et un autre, à choisir :

<select name="subject">
<option>Question sur les fromages</option>
<option>Proposition de recette</option>
</select>


L’adresse de redirection

Il est préférable de renvoyer l’utilisateur sur une page différente de celle où il a rempli le formulaire, pour lui confirmer que son email est bien parti et éviter les doubles envois.
Il peut s’agir d’un article spip ou de n’importe quelle page html. son adresse doit être indiquée comme "value" d’un input dont l’attribut "name" est "redirect".

<input type="hidden" name="redirect" value="merci.html">

Indiquer l’adresse du template d’envoi

Le script de Cassiopea vous permet de construire un "template" pour mettre en forme le mail envoyé. Il s’agit d’un petit fichier texte, placé sur le serveur, qui indique comment les données remplies par le visiteur doivent s’afficher dans le mail envoyé. Par défaut, si il n’y a pas de template, toutes les variables seront envoyées l’une à la suite de l’autre, dans un format un peu brut.
Pour plus d’infos sur la manière de construire ce fichier, reportez-vous au chapitre sur la construction de votre template

L’adresse du template est indiquée de la manière suivante :

<input type="hidden" name="template" value="custom/style/formulaires/contact.fr.txt">

Construire votre formulaire

La suite du travail consiste à ajouter les balises html nécessaires à la construction de votre formulaire.

Exemple simple de formulaire de contact [4] :

<label class="nom">Votre Nom:</label><br />
<input type="text" class="nom" name="nom" size="40" value=" "><br />
<label class="courriel">Votre email:</label><br />
<input type="text" class="from" name="from" size="40" value=" "><br />
<label class="message">Votre message</label><br />
<textarea rows="5" cols="38" class="message" name="message"></textarea>

Résultat :






Ajouter les boutons de validation

Reste à ajouter les boutons qui vont permettre de valider et d’envoyer les informations au script. Les voici :

<input type="reset" value="Effacer">
<input type="submit" value="Envoyer">

Ajouter un template

Pour réaliser votre template, vous devez créer un fichier texte (à l’aide de votre éditeur, voir ci-dessus), dans lequel vous construisez le texte à envoyer en y insérant les données remplies par le visiteur là ou vous souhaitez les voir apparaitre.

Voici un exemple de template pour le formulaire ci-dessus. Il devrait vous permettre de construire le vôtre.

en résumé

Ci-dessous un exemple de formulaire complet, utilisé sur ce site pour contacter les rédacteurs.

<form action="/cgi-cas/formemail.php" method="post" enctype="application/x-www-form-urlencoded">
<input name="to" value="gro#aepoissac|neir" type="hidden">
<input name="subject" value="[Site: Cassiopea] Message pour Simon" type="hidden">
<input name="template" value="custom/style/formulaires/contact.fr.txt" type="hidden">
<input name="required" value="nom,email,commentaire" type="hidden">
<input name="redirect" value="_Simon_?&amp;confirmation_contact_aut1=oui#include_form_contact_aut1" type="hidden">
<label class="nom">Votre Nom:</label><br>
<input class="nom" name="nom" size="40" value="Simon" type="text"><br>
<label class="courriel">Votre email:</label><br>
<input class="from" name="from" size="40" value="gro#aepoissac|neir" type="text"><br>
<label class="message">Votre message</label><br>
<textarea rows="5" cols="38" class="message" name="message"></textarea><br>
<input value="Effacer" class="spip_bouton form_effacer" type="reset">
<input class="spip_bouton form_envoyer" value="Envoyer" type="submit">
</form>

Résultat :








Pour terminer...

J’espère que ce petit tutoriel vous permettra de construire votre formulaire.
Utilisez le forum ci-dessous pour nous envoyer un lien vers vos réalisations !!

Notes

[1et c’est un logiciel libre bien entendu !

[2post ou get, référez vous a un manuel php pour plus d’informations

[3= caché en anglais ;-)

[4la balise <br/>permet de faire le retour à la ligne

4 Messages

  • > Tutorial - Créer vos formulaires 8 décembre 2005 12:22, par rita

    Merci de corriger mon formulaire.J’aimerais que le message "merci" apparaisse
    et que le formulaire arrive à mon adresse. Que le titre du livre soit mis directement dans l’espace prévu à cet effet.
    Merci de m’aider, je peine depuis plusieurs heures





     




     




     



     

     


     

     

     

    [*Facultatif

    • > Tutorial - Créer vos formulaires 8 décembre 2005 21:46, par Simon

      Bonjour Rita,

      Le problème du titre

      Que veux tu dire par dans l’espace prévu a cet effet ?
      Tu peux utiliser les balises select et option pour faire un menu déroulant avec les différents titres a choisri par le visiteur :

      <select name="titre">
              <option value="Les 3 mousquetaires">Les 3 mousquetaires</option>
              <option value="Bilbo le hobbit">Bilbo le hobbit</option>
              <option value="La gloire de mon père">La gloire de mon père</option>
      </select>

      Pour obtenir :

      Est ce que cela réponds à ta question ?

      afficher merci

      Pour afficher un texte après l’envoi, deux possibilités :
      - A) ne pas mettre de redirection (supprimmer la ligne <input name="redirect" value="42" type="hidden">). Le formulaire renvoie alors à une page blanche affichant "this form has been sent". Il serait possible de l’afficher en francais mais ce n’est pas encore prévu.
      - B) mettre une adresse de redirection vers une brève ou un article caché du site spip, Qui contient le texte de remerciement. Exemple, avec l’article numero 15 :
      <input name="redirect" value="article.php3?&id_article=15" type="hidden">

      Envoi du formulaire a la bonne adresse

      Ton formulaire envoie actuellement le mail à l’adresse : gro#lsbaniargel|smood#atir, soit rita.dooms@legrainabsl.org . C’est donc le nom de domaine qui est mal écrit. La bonne adresse a encoder est donc : gro#lbsaniargel|smood#atir

      Tu trouvera un encodeur/décodeur d’adresses ICI. Il est encore au stade de test.

      Petit conseil au passage

      Lorsque tu demande conseil sur un code html, tu peut entourer ton code html des balises spip <code> pour qu’il s’affiche tel quel (en mode texte). Il s’affichera alors comme ceci.

      <form action="/cgi-cas/formemail.php" method="post" enctype="application/x-www-form-urlencoded">
      <input name="to" value="gro#lsbaniargel|smood#atir" type="hidden">
      <input name="subject" value="[www.legrainasbl.org]" type="hidden">
      <label class="titre">Titre&nbsp;:</label>
      <input class="titre" name="titre" size="40" value="" type="text">
      <label style="display: block;" class="nom">Votre Nom&nbsp;:</label>
      <input class="nom" name="nom" size="40" value="" type="text">
      <label class="premon">Votre Prénom&nbsp;:</label>
      <input class="prenom" name="prenom" size="40" value="" type="text">
      <label class="adresse privee">Votre adresse privée&nbsp;: (Rue, N°, CP Localité) [[Facultatif]]</label>

      <input class="adresse privee" name="adresse privee" size="100" value="" type="text">
      <label class="courriel">Votre courriel * </label>
      <input class="courriel" name="courriel" size="60" value="" type="text">
      <label class="association">Association - Institution&nbsp;: * </label>
      <input class="association" name="association" size="40" value="" type="text"></p>
      <label class="adresse association">Adresse de l'Association - Institution&nbsp;: (Rue, N°, CP, Localité) *  </label>
      <input class="adresse association" name="adresse association" size="100" value="" type="text">
      <label class="courriel">Courriel Association - Institution</label>
      <input class="from" name="from" size="60" value="" type="text">
      <input class="spip_bouton form_envoyer" value="Envoyer" type="submit">
      <input value="Effacer" class="spip_bouton form_effacer" type="reset">
      </form>
    • > Tutorial - Créer vos formulaires 12 décembre 2005 12:59, par Antoine

      Pour encoder et décoder les adresses email pour les formulaires sur les serveurs de Cassiopea, vous pouvez utiliser cette page (en anglais).

    • > Tutorial - Créer vos formulaires 17 mai 2006 23:11, par Marc

      Salut,

      L’exemple dans votre tutoriel comporte une ligne que je suppose destinée à rendre certains champs obligatoires, mais cela n’a pas l’air de marcher dans le formulaire que j’ai créé sur la page http://wb.attac.be/Inscription-a-l-universite-2006.html. Est-ce que cette ligne sert bien à ça ? Sinon, comment rendre obligatoire le remplissage de certains champs ?