Placer un formulaire sur votre site web personnel

Vous pouvez placer sur votre site Web un formulaire pouvant être utilisé par les visiteurs pour envoyer ou demander des informations, pour se connecter à une mailing list, s'abonner à une lettre d'information, etc. Pour ce faire, un script cgi-bin fonctionnant sur nos serveurs est également utilisé.

Vous trouverez ci-dessous la manière de créer étape par étape un formulaire.

A. Fonctions du formulaire

Dans le script disponible sur nos serveurs, vous pouvez adapter 4 fonctions (2 obligatoires et 2 facultatives) que vous introduisez dans votre page HTML. Le code de ces fonctions se présente comme suit :

<input type="hidden" name="functie" value="valeur de la fonction">

  • input type="...": input place les éléments relatifs à son fonctionnement dans le formulaire et type="..." précise les éléments à placer. Il peut s'agir de champs de texte, de cases à cocher, de boutons, etc. Dans ce cas-ci, il est utilisé pour introduire une fonction.
  • name="..." value="...": dans ce code, l'option name="..." est utilisée pour placer la fonction exacte (vous n'avez dès lors pas le choix ici), dans l'option value="...", vous complétez vous-même la fonction. Ces documents sont les suivants :
    1. <input type="hidden" name="to" value="votre_adresse e-mail"> (obligatoire)
      Grâce à cette fonction, vous choisissez l'adresse e-mail à laquelle le formulaire doit être envoyé après avoir cliqué sur le bouton "envoyer".
    2. <input type="hidden" name="next" value="http://users.skynet.be/alias/page html"> (obligatoire)
      La page que le visiteur voit apparaître après avoir envoyé le formulaire doit être clairement définie quelque part.
    3. <input type="hidden" name="subject" value="e-mail_sujet">(facultatif)
      Vous pouvez également choisir le sujet de l'e-mail envoyé par le script. Vous pouvez par exemple l'utiliser pour filtrer les messages dans votre inbox.
    4. <input type="hidden" name="lang" value="langue">  (facultatif)
      Il existe 2 variantes du script pour le formulaire sur nos serveurs (voir plus loin). Choisissez ici la langue dans laquelle le visiteur verra la page intermédiaire. Vous avez le choix entre "fr" (français), "nl" (néerlandais) et "en" (anglais)

B. Code permettant de faire fonctionner le formulaire

Comme dans le cas de la quatrième fonction, il existe deux variantes du script. Faites attention lorsque vous introduisez le code parce qu'ils ne diffèrent que d'une seule lettre. La différence se trouve dans le code utilisé pour appeler le script sur le serveur :

<form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
<input...>
<input...>
...
</form>

Il s'agit du script simple : le visiteur remplit le formulaire, clique sur "envoyer" et voit ensuite apparaître la page que vous avez choisie.

<form method="post" action="http://users.skynet.be/cgi-bin/form.cgi">
<input...>
<input...>
...
</form>

Après avoir cliqué sur "envoyer", le visiteur voit apparaître en premier lieu une page intermédiaire et ensuite la page que vous avez choisie. Vous ne pouvez rien modifier dans la page intermédiaire sauf la langue grâce à l'option  <input type="hidden" name="lang" value="langue"> (voir ci-dessus). Sur cette page se trouve un aperçu schématique du contenu du formulaire tel que mentionné par le visiteur.

C. Les différents champs d'introduction et boutons

Général

Lors de la création d'un formulaire, il est très important d'utiliser le plus souvent possible l'option name="...". Si une liste avec différents choix n'a par exemple pas son nom propre, le script ne sait pas que ces possibilités appartiennent à la même liste et ne sait donc pas ce que le visiteur a précisément coché.

Champs et boutons
Case à cocher <input type="checkbox">

Utilisez cette option pour créer une liste de choix. Un visiteur peut mentionner plusieurs possibilités s'il le souhaite.

  • Options :
    • name="...": en attribuant un nom, le script sait quand les différentes cases à cocher sont apparentées.
    • checked: utilisez cette option pour une case cochée par défaut.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="checkbox" name="checkbox">Voici une case à cocher.<br>
    <input type="checkbox" checked name="checkbox">Cette case est cochée par défaut.
    <form>
Boutons radio <input type="radio">

Vous souhaitez parfois disposer d'une liste dans laquelle il n'est possible de cocher qu'un seul élément à la fois. Pour ce faire, il convient d'utiliser les boutons radio. N'oubliez pas d'attribuer un nom à la série si vous souhaitez savoir quel élément est coché.

  • Options :
    • name="...": attribuez un nom aux choix apparentés.
    • checked: vous pouvez également mentionner un élément par défaut dans une liste.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="radio" name="série1"> Il n'est possible de cocher qu'un seul bouton radio de la même série<br>
    <input type="radio" name="série1"> série 1<br>
    <input type="radio" name="série1"> série 1
    <br>
    <br>
    <input type="radio" name="série2"> série 2<br>
    <input type="radio" name="série2" checked> Celle-ci est indiquée par défaut.<br>
    <input type="radio" name="série2"> série 2<br>
    </form>
Champ de texte <input type="text">

Si vous souhaitez que le visiteur puisse également envoyer des commentaires, vous pouvez insérer ce champ de texte à cet effet. Il n'est toutefois pas possible de créer de cette manière une véritable boîte de texte (c'est-à-dire avec plusieurs lignes) : le champ comprend au maximum une ligne. C'est pourquoi la balise <textarea>...</textarea> est plus utilisée en pratique.

  • Options :
    • name="...": utilisez cet attribut pour clarifier dans quel champ de texte le texte a été placé.
    • maxlength="...": mentionnez le nombre maximal de caractères pouvant être introduits.
    • size="...": indique la largeur du champ de texte visible en nombre de caractères.
    • value="...": permet de mettre en gras par défaut un texte (amovible) déterminé.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="text" name="text" > Voici un champ de texte simple.<br><br>
    <input type="text" name="text15" maxlength="15"> Dans ce champ, vous pouvez introduire 15 caractères maximum.<br><br>
    <input type="text" name="textdefault" size=50 value="valeurpardéfaut"> Un champ d'une largeur de 50 caractères avec une introduction standard
    </form>
Champ de mot de passe <input type="password">

Un champ de mot de passe est simplement un champ de texte dont le contenu est affiché uniquement sous forme d'astérisques. Avec le script cgi fonctionnant sur nos serveurs, il n'est pas possible d'y activer une fonction. Toutefois, vous pouvez l'utiliser pour d'autres choses.

  • Options :
    • name="...": utilisez cet attribut pour clarifier dans quel champ de mot de passe le texte a été placé.
    • maxlength="...": mentionnez le nombre maximal de caractères pouvant être introduits.
    • size="...": indique la largeur du champ de texte visible en nombre de caractères.
    • value="...": permet de mettre en gras par défaut un texte (amovible) déterminé.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="password"> Un champ de mot de passe de base<br><br>
    <input type="password" maxlength="8"> Dans ce champ de mot de passe, vous ne pouvez introduire que 8 caractères.
    </form>
Bouton reset   <input type="reset">

Lorsqu'un visiteur se trompe en remplissant un formulaire, le bouton "reset" sert à récupérer le formulaire avec toutes les valeurs de départ. Le contenu modifié est ainsi effacé après avoir cliqué sur ce bouton.

  • Options :
    • name="...": rarement utilisé avec cette fonction étant donné qu'il n'existe généralement qu'un seul bouton reset sur un formulaire dont aucune valeur ne doit être transmise.
    • value="...": le terme "Reset" figure par défaut sur le bouton, mais vous pouvez également modifier ce texte à l'aide de cette fonction.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="text" maxlength="15"> Introduisez une valeur et cliquez sur "Reset". &quot;Reset&quot;<br><br>
    <input type="reset"><br><br>
    <input type="reset" value="A nouveau"> Vous pouvez également attribuer un autre nom à ce bouton. <br>
    </form>
Bouton d'envoi  <input type="submit">

Il s'agit du bouton principal dans un formulaire. Après avoir cliqué sur ce bouton, le formulaire est automatiquement envoyé à l'adresse e-mail que vous avez mentionnée dans <input name="to" type="hidden" value="adresse" />

  • Options :
    • name="...": rarement utilisé avec cette fonction étant donné qu'il n'existe généralement qu'un seul bouton d'envoi sur un formulaire dont aucune valeur ne doit être transmise.
    • value="...": le terme "Submit Query" figure par défaut sur le bouton, mais vous pouvez également modifier ce texte à l'aide de cette fonction.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="submit"><br><br>
    <input type="submit" value="Envoyer"> Vous pouvez également modifier le texte grâce à ce bouton.
    </form>
Une image en tant que bouton d'envoi   <input type="image" src="...">

Outre le bouton d'envoi standard (voir plus haut), vous pouvez également utiliser une image comme bouton d'envoi. Dans ce cas, veillez à ce que le but de cette image soit clair. Comme mentionné précédemment, après avoir cliqué sur cette image, le formulaire est automatiquement envoyé à l'adresse e-mail que vous avez mentionnée dans <input name="to" type="hidden" value="adres" />

  • Options :
    • src="...": lorsque vous utilisez une image, vous devez clairement indiquer le chemin menant au fichier.
    • name="...": rarement utilisé avec cette fonction étant donné qu'il n'existe généralement qu'un seul bouton d'envoi sur un formulaire dont aucune valeur ne doit être transmise.
    • align="...": cette option vous permet de placer la photo à un endroit spécifique. Vous avez le choix parmi :
      • align="left": aligner à gauche (le texte vient à droite de l'image)
      • align="right": aligner à droite (le texte vient à gauche de l'image)
      • align="top": l'image est centrée en haut.
      • align="bottom": l'image est centrée en bas.
      • align="absmiddle": l'image est centrée par rapport au centre du texte situé sur la même ligne.
  • Exemple :
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="image" src="../../images/testfoto.jpg">Vous pouvez afficher une photo au lieu d'un bouton pour envoyer le formulaire.<br><br>
    <input type="image" src="../../images/phototest.jpg" align="right">La photo peut également être alignée.
    </form>

Cette info vous a aidé ?


Plus

Forum

Vous n’avez pas trouvé la réponse ? Rejoignez notre communauté où d’autres clients et experts partagent leurs expériences.