[S’applique également à la v8.]{class="badge positive" title="S’applique également à Campaign v8."}

Ajouter des champs à un formulaire web adding-fields-to-a-web-form

Dans un formulaire web, les champs permettent aux utilisateurs et utilisatrices de saisir des informations et sélectionner des options. Le formulaire web peut proposer champs de saisie, des champs de sélection, des contenus statiques ainsi que des contenus avancés de type captcha, abonnements, etc.

Lorsque vous utilisez l’assistant d’ajout de champs, le type de champ est automatiquement détecté en fonction du champ ou de la variable de stockage sélectionnée. Au besoin, vous pouvez le modifier à partir de la liste déroulante Type de l'onglet Général.

Lorsque vous utilisez les boutons de la barre d'outils, sélectionnez directement le type de champ à ajouter.

Les types de champs disponibles sont les suivants :

Spécifiez le mode de stockage des réponses : mise à jour d'un champ de la base (seule la dernière valeur enregistrée est conservée) ou stockage dans une variable (la réponse ne sera pas stockée). Voir à ce sujet la section Champs de stockage des réponses.

Assistant de création de champs field-creation-assistant

Pour chaque page du formulaire, vous pouvez ajouter un champ à l’aide du premier bouton de la barre d’outils. Pour ce faire, accédez au menu Ajouter à l’aide de l’assistant.

Sélectionnez le type de champ que vous souhaitez créer : vous pouvez choisir d'ajouter un champ de la base, une variable ou d'importer un groupe de champs créé dans un autre formulaire et regroupés dans un conteneur.

Cliquez sur le bouton Suivant et choisissez le champ ou la variable de stockage, ou le conteneur à importer.

Cliquez sur Terminer pour insérer le champ sélectionné dans la page.

Ajouter des champs de saisie adding-input-fields

Pour ajouter un champ de saisie, cliquez sur le bouton Contrôle de saisie et sélectionnez le type de champ à ajouter.

Types de champs de saisie types-of-input-fields

Dans une page de formulaire, vous pouvez insérer cinq types de champs texte :

Paramétrage des champs de saisie configure-input-fields

Les champs de saisie sont tous paramétrés selon le même mode, au travers des options suivantes :

L'onglet Général permet de saisir le nom du champ et éventuellement de lui attribuer une valeur par défaut.

Vous pouvez modifier le mode de stockage des réponses à partir du lien Editer le stockage…. Les valeurs peuvent être enregistrées dans un champ existant de la base de données, mais vous pouvez choisir de ne pas enregistrer les informations dans la base, en utilisant une variable locale.

L'onglet Avancé permet de définir des paramètres d'affichage du champ (position des libellés, alignement, etc.). Voir Définir la disposition des formulaires web.

Ajouter des listes déroulantes adding-drop-down-lists

Dans une page de formulaire, vous pouvez insérer une liste déroulante : elle permet à l'utilisateur de sélectionner une valeur parmi celles proposées dans un menu déroulant.

Pour ajouter une liste déroulante dans une page de formulaire, cliquez sur le bouton Contrôles de sélection > Liste déroulante… dans la barre d'outils de l'éditeur de page.

Sélectionnez le mode de stockage des réponses et validez votre choix.

Définissez les libellés et les valeurs de la liste dans la section inférieure de l’onglet Général . Si les informations sont stockées dans un champ existant de la base de données et s’il s’agit d’un champ d’énumération, vous pouvez renseigner automatiquement les valeurs en cliquant sur Initialiser la liste des valeurs depuis la base de données, comme illustré ci-dessous :

Si les données sont stockées dans une table liée, vous pouvez sélectionner le champ où sont enregistrées les valeurs à proposer dans la liste. Par exemple, si vous sélectionnez le tableau des pays, cliquez sur Initialiser la liste des valeurs depuis la base de données et sélectionnez le champ souhaité.

Cliquez ensuite sur le lien Charger pour récupérer les valeurs :

Ajouter des cases à cocher adding-checkboxes

Pour que l'utilisateur puisse sélectionner une option, utilisez une case à cocher.

Pour ajouter une case à cocher dans une page de formulaire, cliquez sur l'icône Contrôles de sélection > Case à cocher… dans la barre d'outils de l'éditeur de page.

Sélectionnez le mode de stockage des réponses et validez votre choix.

Saisissez le libellé de la case dans le champ Libellé de l'onglet Général.

Une case à cocher permet d'attribuer au champ (ou à la variable) de stockage une valeur ou une autre selon que la case est cochée ou non. La section Valeurs permet de saisir la valeur à attribuer si la case est cochée (dans le champ Valeur) et la valeur à attribuer si la case est décochée (dans le champ Valeur vide). Ces valeurs dépendent du format de stockage des données.

Si le champ (ou la variable) de stockage est de type booléen, la valeur à attribuer si la case n’est pas cochée est déduite automatiquement. Dans ce cas, seul le champ Valeur si coché est proposé, comme illustré ci-dessous :

Exemple : attribuer une valeur à un champ si une case est cochée example--assign-a-value-to-a-field-if-a-box-is-checked

Nous allons insérer une case à cocher dans un formulaire afin de transmettre une demande d'intervention, comme ci-dessous :

Les informations seront chargées vers la base de données dans un champ existant (ici, le champ Commentaire) :

Si la case "Demande d'intervention" est cochée, la colonne Commentaire contiendra le message "Intervention souhaitée", si elle est décochée, elle contiendra le message "Sans intervention". Pour obtenir ce résultat, le paramétrage de la case à cocher dans la page du formulaire doit être le suivant :

Ajouter des boutons radio adding-radio-buttons

Les boutons radio permettent de proposer à l'utilisateur une série d'options à sélection exclusive. Il s'agit des différentes valeurs d'un même champ.

Vous pouvez créer les boutons radio individuellement (boutons unitaires) ou via une liste à choix multiples. Toutefois, le principe du bouton radio étant de sélectionner une option ou une autre, il sera toujours nécessaire de créer au moins deux boutons radio, et jamais un bouton isolé.

Ajouter des boutons uniques add-single-buttons

Pour ajouter un bouton radio dans une page de formulaire, sélectionnez le menu Contrôles de saisie > Bouton radio dans la barre d'outils de l'éditeur de page et choisissez le mode de stockage.

Les boutons radio sont configurés de la même manière que les cases à cocher (voir Ajouter des cases à cocher). Toutefois, aucune valeur n'est affectée si l'option n'est pas sélectionnée. Pour que plusieurs boutons soient interdépendants, c'est-à-dire que le fait de les sélectionner désélectionne automatiquement les autres, ils doivent être stockés dans le même champ. S'ils ne sont pas stockés dans la base de données, la même variable locale doit être utilisée pour le stockage temporaire. Voir Champs de stockage des réponses.

Ajouter une liste de boutons add-a-list-of-buttons

Pour ajouter des boutons radio via une liste, sélectionnez le menu Contrôles de sélection > Choix multiples dans la barre d'outils de l'éditeur de page.

Vous ajoutez autant de boutons radio que de libellés. L'avantage est de pouvoir importer les valeurs d'un champ existant, s'il s'agit d'un champ énuméré, et de permettre le choix d'une des options proposées. En revanche, la disposition des boutons radio sera moins souple que celle des boutons unitaires.

Ajouter des matrices adding-grids

Les matrices sont utilisées pour réaliser des pages de votes dans les applications Web. Vous pouvez ainsi proposer des listes de boutons radio afin de répondre à des formulaires Web de type sondages ou évaluation, comme dans l'exemple ci-dessous :

Pour intégrer des éléments de ce type dans un formulaire, vous devez créer une matrice simple et ajouter une ligne pour chaque élément à évaluer.

Le nombre de boutons radio de chaque ligne de matrice correspond au nombre de valeurs définies dans la matrice simple.

Dans chaque ligne de matrice, une seule option peut être sélectionnée.

Ajouter des dates et des nombres adding-dates-and-numbers

Le contenu des champs du formulaire peut être formaté pour correspondre aux données stockées dans la base ou répondre à un besoin spécifique. Vous pouvez créer des champs adaptés pour la saisie de nombres et de dates.

Ajouter des dates adding-dates

Pour permettre à l'utilisateur de saisir une date dans une page de formulaire, ajoutez un champ de saisie et sélectionnez le type Date….

Indiquez le libellé du champ et le mode de stockage des données.

La section inférieure de la fenêtre permet de sélectionner les formats de date et d'heure pour les valeurs renseignées dans ce champ.

Vous pouvez également choisir de ne pas afficher la date (ou l'heure).

Les dates peuvent être sélectionnées via un calendrier ou des listes déroulantes. Vous pouvez aussi les saisir directement dans le champ. Toutefois, elles doivent respecter le format spécifié dans l'écran ci-dessus.

Toutefois, il peut être plus adapté, par exemple pour indiquer une date de naissance, d'utiliser des listes déroulantes.

Pour cela, cliquez sur l'onglet Avancé et choisissez un mode de saisie par Listes déroulantes.

Vous pouvez alors borner les valeurs proposées dans la liste.

Ajouter des nombres adding-numbers

Vous pouvez créer des champs adaptés pour la saisie de nombres.

Dans un champ numérique, l'utilisateur ne peut saisir que des chiffres : un contrôle de saisie est automatiquement appliqué lors de la validation de la page.

En fonction du champ de stockage des données dans la base, un formatage spécifique ou certaines restrictions peuvent être appliqués. Vous pouvez également définir des valeurs minimales et maximales. Le paramétrage de ce type de champ est le suivant :

La valeur par défaut est la valeur affichée dans le champ lors de l'affichage du formulaire. Elle peut être corrigée par l'utilisateur.

Vous pouvez ajouter un préfixe et/ou un suffixe au champ numérique, à partir de l'onglet Avancé, comme dans l'exemple suivant :

Dans le formulaire, le rendu sera :

Cases à cocher d'abonnement subscription-checkboxes

Vous pouvez ajouter des contrôles pour permettre aux utilisateurs de s'abonner ou se désabonner à un ou plusieurs services d'information (newsletters, alertes, notifications en temps réel, etc.). Pour s'abonner, l'utilisateur coche le service correspondant.

Pour créer une case à cocher d'abonnement, cliquez sur Contrôles avancés > Abonnement.

Indiquez le libellé de la case à cocher et sélectionnez le service d'information concerné dans la liste déroulante Service.

L'utilisateur sera abonné au service spécifié s'il coche l'option correspondante.

Insérer un captcha inserting-a-captcha

Les captcha permettent de prévenir l'utilisation frauduleuse de vos formulaires Web.

Pour insérer un Captcha dans un formulaire, cliquez sur le premier bouton de la barre d'outils et choisissez Contrôles avancés > Captcha.

Saisissez le libellé du champ. Ce libellé sera affiché devant la zone d’affichage du Captcha. Vous pouvez modifier le positionnement de ce libellé à partir de l'onglet Avancé.

Le Captcha est inséré dans la page avec un champ de saisie positionné sous le visuel afin de permettre la saisie. Ces deux éléments sont indissociables : pour la mise en page, ils sont considérés comme un seul élément (ils n'occupent qu'une seule cellule).

Lors de la validation de la page, le champ de saisie est affiché en rouge si le contenu du Captcha n'a pas été saisi correctement.

Vous pouvez créer un message d’erreur à afficher. Pour cela, utilisez le lien Personnaliser le message dans l’onglet Général.

Télécharger un fichier uploading-a-file

Vous pouvez ajouter dans une page un champ de téléchargement. Cette fonctionnalité peut être utile, par exemple dans le contexte d'un intranet, afin de partager des fichiers.

Pour ajouter un champ de téléchargement dans une page de formulaire, sélectionnez le menu Contrôles avancés > Fichier… dans la barre d'outils de l'éditeur de page.

Par défaut, les fichiers chargés sont stockés dans des fichiers de ressources accessibles via le menu Ressources > En ligne > Ressources publiques. Vous pouvez utiliser un script pour modifier ce comportement. Ce script peut utiliser les fonctions définies dans la documentation JSAPI Campaign notamment celles relatives à la manipulation des fichiers.

Vous pouvez stocker le lien vers ces fichiers dans une variable locale ou dans un champ de la base. Vous pouvez, par exemple, étendre le schéma des destinataires afin d'ajouter un lien vers les ressources fichiers.

Insérer une constante masquée inserting-a-hidden-constant

Lorsque l’utilisateur valide l’une des pages du formulaire, vous pouvez définir une valeur spécifique pour un champ de son profil ou une variable.

Ce champ n‘est pas visible par l‘utilisateur mais permet d‘enrichir les données de son profil.

Pour ce faire, placez une constante dans la page et indiquez la valeur et l'emplacement de stockage.

Dans l'exemple suivant, le champ origine du profil du destinataire est renseigné automatiquement chaque fois qu'un utilisateur valide cette page. La constante n'est pas affichée sur la page.