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 :
Démarrez votre éditeur texte
Cliquez sur "enregistrez sous", et sauvez votre fichier en choississant l’extension .html
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.
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">
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".
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 :
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.
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 !!
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
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.
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-.... Est-ce que cette ligne sert bien à ça ? Sinon, comment rendre obligatoire le remplissage de certains champs ?
A) ne pas mettre de redirection (supprimmer la ligne 
RSS 2.0