CREATION DE FORMULAIRE
 

Le formulaire vous permet de présenter une page de message personnalisée qui vous sera envoyé dans votre boite aux lettres par un visiteur qui navigue sur votre site.

Pour arriver à ce résultat vous devrez créer deux pages.

la première page sera votre formulaire, c'est à dire celle qui sera complétée. Elle sera sauvegardée avec l'extension HTML. (exemple : formu.html)
la deuxième sera celle qui vous sera envoyée avec les réponses c'est ce que l'on appelle le masque. Elle sera sauvegardée avec l'extension EML. (exemple : reponse.eml)
Vous pouvez si vous le désirez faire afficher une page de remerciement une fois que le formulaire a été validé.

Votre formulaire devra également contenir un script cgi qui permettra d'envoyer la réponse dans votre boîte aux lettres. Pour le connaître aller voir l'aide "page perso" de votre fournisseur d'accès.

Procédure de création du formulaire AOL Press :

Dans le menu Format, sélectionner l'option Form.

Saisir le titre du formulaire

Sélectionner l'option POST.

Une barre outil comportant 8 icônes apparait.

Détail de la barre outil formulaire.

Insertion d'un bouton radio (radio) ou case à cocher (check).

Bouton radio ou Case à cocher

Compléter la fenêtre comme suit :

Form Tag : saisir le nom du bouton
Button label : saisir le texte qui apparaîtra dans le formulaire
Value : valeur du bouton
Défaut : cocher la case pour que le bouton radio soit validé par défaut.

Insertion d'une zone de saisie (Text) - Saisie sur une seule ligne.

Zone de texte

Compléter la fenêtre comme suit :

Form Tag : saisir le nom de la zone de saisie
Initial Text : texte qui apparaîtra dans la zone de saisie
    . Text : zone de saisie Text
    . Passeword : zone de saisie mot de passe
Display Size : largeur de la zone
Max Input : nombre maximum de caractères pouvant être saisie.

Zone de saisie texte (TArea) - Saisie sur plusieurs lignes

Zone de texte sur plusieurs lignes

Compléter la fenêtre comme suit :

Form Tag : saisir le nom de la zone de saisie
Rows : indiquer le nombre de ligne de la zone de saisie
Cols : indiquer la largeur de la zone de texte (nb de caractères par ligne)

Zone de liste (SList).

Zone de choix

Compléter la fenêtre comme suit :

Form Tag : saisir le nom de la zone liste
Element : indiquer le nom d'un élément de la liste, puis cliquer sur Add
Select : permet d'indiquer l'élément affiché par défaut

Insertion d'une image (Image).

Compléter la fenêtre comme suit :

Form Tag : indiquer le nom de l'image
Browse : sélectionner le chemin ou se trouve le fichier image

Insérer les boutons Annuler (Reset) ou Confirmer (Submit).

Bouton annuler envoi

Bouton confirmer l'envoi

Button label : texte qui apparaîtra sur le bouton

Une barre outils formulaire existe dans Front Page Express. Si elle n'est pas affichée à l'écran exécuter la procédure suivante pour la faire afficher.

Dans le menu Affichage, sélectionner l'option Affichage barre outil formulaire
Détail de la barre outils formulaires

1er icône : Zone de texte une ligne.

Une fois la zone insérée, cliqer une fois dessus (des petits carrés doivent apparaître)
Rester dessus avec la souris et cliquer sur le bouton gauche (une menu apparaît)
Sélectionner l'option Propriété du champ formulaire.
Détail de la fenêtre :
Nom : nom de la zone texte
Valeur initial : texte qui apparaîtra dans la zone de texte
Mot de passe : pour indiquer si la zone correspond à la saisie d'un texte ou d'un mot de passe.

2ème icône : Zone de texte sur plusieurs lignes.
Une fois la zone insérée, cliquer une fois dessus (des petits carrés doivent apparaître)
Rester dessus avec la souris et cliquer sur le bouton gauche (une menu apparaît)
Sélectionner l'option Propriété du champ formulaire.
Détail de la fenêtre :
Idem que zone de texte sur une ligne.

3ème icône : Case à cocher.

Une fois la case insérée, cliquer une fois dessus (des petits carrés doivent apparaître)
Rester dessus avec la souris et cliquer sur le bouton gauche (une menu apparaît)
Sélectionner l'option Propriété du champ formulaire.
Détail de la fenêtre :
Nom : nom de la case à cocher
Value : valeur du bouton
Etat du bouton : bouton coché initialement ou non
4ème icône : Bouton radio.
Une fois le bouton inséré, cliquer une fois dessus (des petits carrés doivent apparaître)
Rester dessus avec la souris et cliquer sur le bouton gauche (une menu apparaît)
Sélectionner l'option Propriété du champ formulaire.
Détail de la fenêtre :
Idem que bouton à cocher.

5ème icône : Zone de liste.

Une fois la zone insérée, cliquer une fois dessus (des petits carrés doivent apparaître)
Rester dessus avec la souris et cliquer sur le bouton gauche (une menu apparaît)
Sélectionner l'option Propriété du champ formulaire.
Détail de la fenêtre :
Nom : nom de la zone de liste.
Choix : insérer les termes qui vont composer la liste. (cliquer sur Add puis saisir le nom)
6ème icône : Bouton de commande.
Une fois le bouton inséré, cliquer une fois dessus (des petits carrés doivent apparaître)
Rester dessus avec la souris et cliquer sur le bouton gauche (une menu apparaît)
Sélectionner l'option Propriété du champ formulaire.
Détail de la fenêtre :
Nom : nom du bouton
Valeur/Etiquette : texte qui apparaît sur le bouton
Bouton : ordre de commande du bouton

Pour pouvoir créer un formulaire avec Netscape vous devrez recourrir aux balises. En effet il n'y a pas de menu ou d'option prévu pour créer un formulaire.

Tag création formulaire
Création de la zone qui contiendra les tags composant le formulaire
<FORM>...</FORM>

Bouton radio
<INPUT TYPE="radio" NAME="Aol" VALUE="value0" CHECKED>

Case à cocher
<INPUT TYPE="checkbox" NAME="check" VALUE="on">

Zone de texte
<INPUT TYPE="text" NAME="question" VALUE="votre texte">

Zone de texte sur plusieurs lignes
<TEXTAREA NAME="choix" COLS="18"></TEXTAREA>

Zone de choix
<SELECT NAME="liste">
<OPTION SELECTED>AOL Presse
<OPTION>Front Page
<OPTION>Composer</SELECT>

Image
<INPUT NAME="logo" TYPE="image" WIDTH="150" HEIGHT="89" SRC="logo.gif">

Bouton annuler envoi
<INPUT TYPE=reset VALUE="Annuler">

Bouton confirmer l'envoi
<INPUT TYPE=submit VALUE="Envoyer">

Création du masque

Comme nous l'avons vu précédemment ce fichier doit avoir l'extension eml et il doit bien entendu être transféré avec le site.

Il fonctionne avec des zones variables qui restaureront les données saisies ou sélectionnées par le visiteur qui aura complété votre formulaire.

Ces zones variables se présentent sous cette forme : #exemple#

Il faut obligatoirement que votre zone porte le même nom que celle inscrite dans le formulaire.

Ton pseudo #pseudo#
Ton email #courrier#
Ton message #message#

Script CGI

Le script CGI est cette petite chose qui vous permettra de recevoir dans votre boîte aux lettres le formulaire envoyé par le visiteur. Il change en fonction de votre hébergeur

Voici une toute petite liste de script cgi. Il est à inscrire dans le body du formulaire.

Site hébergé par AOL :
<FORM action="/cgi-bin/email/votre_pseudo/email/email.eml" method ="POST">

Site hébergé chez multimania :
<FORM METHOD=GET ACTION="/cgi-bin/mailer">

Remerciement
Voici le tag qui une fois votre formulaire envoyé affichera une page de remerciement.

<INPUT type="hidden" name="ResponsePage" Value="http://members.aol.com/votre_pseudo/email/Detail.htm">