Tutorial - Créer vos formulaires
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 enregisterez 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 pret a 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 a 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éfinis 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 (parametrage)
En haut de votre formulaire, un certains nombre de champs cachés vont vous permettre de parametrer votre formulaire : a quel 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.
<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 cripter les adresses suivant une certaine convention, pour éviter cela, ou au moins compliquer la tache à ces robots fouinneurs :
Cette adresse criptée doit être ajoutée dans un "input" de type hidden, dont l’attribut name est "to".
<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 peu aider dans le classement des courriels reçus.
<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 ou il a remplit le formulaire, pour lui confirmer que son email est bien partit 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 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 a 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 a ajouter les balises html nécessaire à 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 a 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 a envoyer en y insérant les données remplies par le visiteur la ou vous souhaitez les voir aparaitre.
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_?&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 tutorial vous permettra de construire votre formulaire. Utilisez le forum ci-dessous pour nous envoyer un lien vers vos réalisations !!
[1] et c’est un logiciel libre bien entendu !
[2] post ou get, référez vous a un manuel php pour plus d’informations
[3] = caché en anglais ;-)
[4] la balise <br/>permet de faire le retour à la ligne
