L’éditeur de formulaires est un outil convivial qui vous permet de créer divers types de formulaires Web pour interagir avec les visiteurs du site ou recueillir de l’information sur les utilisateurs. Grâce à son interface intuitive, qui rappelle l’éditeur de texte et d’images tout en offrant des options de personnalisation supplémentaires, vous aurez tout en main pour concevoir et configurer des formulaires tels que des formulaires de rétroaction, des formulaires d’abonnement, des sondages, etc.
Ajouter un formulaire à votre site Web
1. Accédez à l’onglet Créer dans le menu de gauche et sélectionnez la catégorie Formulaires.
2. Faites glisser et déposez l’élément de formulaire à l’emplacement désiré sur la page. Un encart bleu apparaîtra pour indiquer l’emplacement de dépôt disponible le plus proche.
Composition du formulaire
1. Éléments : Complétez la configuration pour tout le contenu, y compris les champs de formulaire, les cases à cocher, les boutons radio et le bouton d’appel à l’action.
2. Paramètres : Définissez ce qui se produit lorsqu’un formulaire est soumis, par exemple s’il faut acheminer certaines données vers un courriel ou une base de données en particulier.
Éléments de formulaire
1. Champ textuel
Le champ de texte permet aux utilisateurs de votre formulaire de saisir de courts segments textuels d’environ une ligne.
Types de champs
Le paramètre Type détermine le type de données que les utilisateurs peuvent saisir :
-Texte – Affiche l’entrée telle que saisie.
-Mot de passe – Masque les caractères d’entrée, qui afficheront en tant que *** (p. ex., pour les mots de passe).
-Masqué – Stocke des renseignements liés au système (p. ex., les détails du référent ou du navigateur) ou des données préremplies qui n’ont pas lieu d’afficher pour les utilisateurs.
-Fichier* – Permet aux visiteurs de téléverser des images, de l’audio, des vidéos ou d’autres fichiers. L’action de soumettre des fichiers aura pour effet de générer un courriel qui contient un lien de téléchargement cliquable.
Options de personnalisation
-Nom – Un identifiant unique pour référencer le champ dans l’éditeur de formulaires ainsi que dans les courriels ou les entrées de blogue générés par le formulaire.
-Largeur – Ajustez la largeur du champ en saisissant une valeur ou en faisant glisser les poignées de redimensionnement.
-Longueur maximale – Définit le nombre maximal de caractères permis pour le champ.
-Valider en tant que – Définit le type de contenu requis (p. ex., un champ de courriel doit contenir une adresse courriel correctement formatée). Si l’entrée saisie n’est pas valide, les utilisateurs verront un message les invitant à la corriger.
-Indice – Affiche un texte d’aide lorsque les utilisateurs cliquent à l’intérieur du champ pour leur offrir des conseils ou des exemples.
-Valeur par défaut – Remplit automatiquement le champ avec une valeur prédéfinie que les utilisateurs peuvent ensuite modifier.
Téléversements de fichiers*
-Pour stocker les fichiers téléversés, le formulaire doit être lié à une base de données.
-Les fichiers stockés dans la base de données demeurent accessibles et sont comptabilisés au niveau de la limite de stockage permise pour le compte.
-Les liens de fichiers envoyés par courriel n’utilisent pas de stockage, mais expireront après 30 jours.
2. Zone de texte
Le champ de formulaire Zone de texte est similaire au champ de texte, mais il permet une saisie de texte plus longue sur plusieurs lignes.
Options de personnalisation
En plus d’inclure les mêmes options que pour le champ de texte (Nom, Étiquette, Largeur, Indice, Valider en tant que et Valeur par défaut), la zone de texte permet d’ajuster les réglages suivants :
-Hauteur – Ajustez la hauteur de la zone de texte en changeant le nombre dans le champ de hauteur ou en faisant glisser les commandes de redimensionnement de la zone de texte.
-Habillage – Définit la façon dont le texte est affiché lorsqu’il est soumis dans des courriels ou lorsqu’il apparaît dans des forums/blogues.
- Par défaut – Utilise les paramètres d’habillage du texte par défaut du navigateur ou du client de messagerie.
- Désactivé – Désactive l’habillage du texte, pour prévenir que le texte se poursuive sur de nouvelles lignes lorsqu’il est saisi.
- Intégral – Affiche le texte et son habillage tel qu’ils furent saisis dans la zone de texte.
- Virtuel – Permet au client de messagerie de décider si le texte tiendra compte du retour de ligne.
3. Champ de sélection
Le champ de sélection permet aux utilisateurs de choisir parmi une liste prédéfinie d’options. En fonction de la configuraiton sélectionnée, il affichera soit en tant que menu déroulant, soit sous forme de liste.
Options de personnalisation
-Type – Détermine les formes que prendront les options à l’affichage :
-Menu – Affiche un menu déroulant permettant aux utilisateurs de sélectionner une option.
-Liste – Affiche toutes les options disponibles sous forme de liste verticale.
-Options – Correspond aux sélections possibles pour le champ.
-Nom de l’option – Le texte affiché dans la liste déroulante ou la liste.
-Valeur de l’option – Les données réelles envoyées dans les courriels lorsque l’option est sélectionnée.
-Organisation et mise en place – Utilisez les flèches haut/bas pour réorganiser les options, supprimer celles que vous souhaitez écarter ou définir une sélection par défaut qui apparaîtra lors du chargement du formulaire.
4. Cases à cocher
Les cases à cocher permettent aux utilisateurs de sélectionner plusieurs options à partir d’une liste, ou d’activer ou de désactiver une option. Elles sont particulièrement utiles pour les sélections qui permettent de choisir plus d’une option.
Options de personnalisation
-Nom – L’identifiant unique de la case à cocher, utilisé à la fois dans l’éditeur de modèles de formulaire, les courriels et les entrées de blogue. Tâchez de l’imaginer comme la question à laquelle les utilisateurs répondent lorsqu’ils cochent ou décochent des cases.
-Valeur – Correspond à la réponse sélectionnée. Par exemple, si la valeur de la case à cocher est définie sur « Oui », le fait de cocher la case signifie que l’utilisateur indique une réponse affirmative.
-Sélectionné par défaut – Si cette option est activée, la case apparaîtra cochée par défaut au moment de charger le formulaire.
-Obligatoire – Les utilisateurs doivent cocher la case avant de soumettre le formulaire. Cela peut s’avérer pratique pour les cases à cocher qui servent à valider un acquiescement de la part des utilisateurs, par exemple afin d’exiger qu’ils acceptent les modalités des Conditions générales avant de soumettre.
5. Boutons radio
Les boutons radio sont utilisés lorsque la sélection permet une seule réponse parmi une liste d’options prédéfinies. Contrairement aux cases à cocher, la sélection d’un bouton radio désélectionne automatiquement toute autre option faisant partie du même groupe.
Options de personnalisation
-Nom du groupe – Tous les boutons radio correspondant aux options de réponse possibles pour une même question doivent aussi appartenir au même groupe. La sélection permet de choisir un seul bouton à la fois pour un groupe donné.
-Valeur – Représente la réponse choisie. Par exemple, si la question est « Aimez-vous mon site? », le nom du groupe pourrait être « AimeMonSite », avec les options de valeur Oui, Non et Nécessite plus de travail. Si un utilisateur sélectionne Oui, la réponse soumise apparaîtra comme suit : AimeMonSite : Oui.
-État par défaut – Permet de sélectionner automatiquement un bouton radio au moment de charger le formulaire.
-Obligatoire – L’utilisateur doit sélectionner une option avant de soumettre le formulaire.
6. Formulaire de rétroaction
L’éditeur de formulaires intègre un assistant virtuel pour les formulaires de rétroaction, qui peut être ajouté simplement en sélectionnant l’icône F.
Ce formulaire est préconfiguré avec tous les champs nécessaires pour soumettre les avis, y compris un bouton d’appel à l’action. Les champs sont définis sur les options qui s’appliquent par défaut, mais vous pouvez les personnaliser au besoin pour mieux répondre à vos besoins.
7. Messages de réussite ou d’erreur
Une fois le formulaire soumis, le système affiche un message de réussite ou d’erreur. Vous pouvez contrôler l’emplacement de ces messages en précisant leurs coordonnées dans l’éditeur.
Utilisez l’icône Info pour désigner l’emplacement où vous voulez que les messages apparaissent. Dans Propriétés du formulaire, lorsque les options avancées sont activées, vous pouvez également personnaliser le message de réussite. Si le champ est laissé vide, le message de réussite par défaut affichera. Vous pouvez, par ailleurs, vous servir de Propriétés du formulaire pour saisir un message personnalisé qui affichera pour vos visiteurs lorsqu’un formulaire est soumis avec succès.
8. Bouton d’appel à l’action
Le bouton Appel à l’action représente un élément crucial du formulaire, car il permet aux utilisateurs de soumettre leurs commentaires et de compléter les actions prévues dans le formulaire. En l’absence de ce dernier, il n’est pas possible de soumettre les formulaires.
Pour insérer un bouton d’appel à l’action, repérez l’icône correspondante dans la section Éléments Inline de la barre d’outils de l’éditeur de formulaires, puis cliquez dessus. Une fois le bouton ajouté, cliquez sur celui-ci pour le définir en tant que bouton de soumission. Dans le menu déroulant Lien, sélectionnez {Soumettre le formulaire} pour activer l’envoi de formulaire.
Si vous avez besoin d’un bouton de réinitialisation, vous pouvez en créer un en suivant les mêmes étapes, mais en sélectionnant {Réinitialiser} cette fois. De plus, le panneau de droite comporte un champ modifiable qui vous permet de personnaliser le texte de légende du bouton pour mieux l’adapter aux besoins de votre formulaire.
Personnalisation et propriétés du bouton d’appel à l’action
-Légende et sous-légende du bouton : Définissez le texte principal et, au besoin, le sous-texte qui afficheront sur le bouton.
-Taille : Choisissez parmi les tailles de bouton disponibles : petite, moyenne ou grande.
-Largeur minimale : Définissez une largeur minimale pour les boutons dans le but d’uniformiser la mise en page.
-Texte de légende et de sous-légende des images survolées : Précisez le texte alternatif qui apparaît lorsque les utilisateurs survolent le bouton avec la souris.
-Transition du texte : Si la configuration prévoit l’affichage d’un message de légende au survol de la souris, sélectionnez un effet de transition pour rendre le changement visuel plus convivial.
-Effet de mise en évidence : Ajoutez un effet d’animation qui s’active 3 secondes après le chargement de la page et se répète toutes les 30 secondes.
-Couleur : Choisissez parmi trois couleurs de boutons prédéfinies.
-Alignement : Ajustez l’alignement du bouton en relation avec le reste du contenu (à gauche, centré ou à droite).
-Bordure : Ajustez la bordure du bouton au pixel près pour un espacement optimal.
-Icône du bouton : Choisissez une icône dans la bibliothèque d’images ou téléversez une image personnalisée.
-Icône d’image survolée : Si vous le souhaitez, vous pouvez ajoutez une icône différente qui apparaîtra lorsque vous survolez avec la souris.
-Emplacement de l’icône : Positionnez l’icône, soit avant ou après la légende du bouton.
Paramètres du formulaire
1. Page suivante
Précisez la page qui devrait s’ouvrir suite à un envoi réussi du formulaire. Il peut s’agir d’une page de remerciements dédiée, ou de toute autre page sur votre site que vous considérez pertinente. Par défaut, le formulaire est configuré pour maintenir les utilisateurs sur la même page une fois la soumission réussie. Vous pouver modifier ce réglage et préciser la page de votre choix à partir de Type de lien.
2. Envoyer au courriel
Activez Envoyer au courriel pour recevoir les formulaires que les visiteurs de votre site Web soumettent par courriel. Cela dévoilera des options supplémentaires :
| -Courriel de destination – Saisissez l’adresse courriel qui recevra les formulaires soumis, p. ex., commandes@contactermonsiteweb.com. |
|
|
-Courriel de l’expéditeur – Afin de faciliter l’acheminement des soumissions de formulaires, nous avons désactivé l’option permettant de préciser l’adresse courriel de l’expéditeur. |
|
|
-Objet du courriel – Définissez la ligne d’objet du courriel (p. ex., « Nouvelle demande de renseignements »). Vous pouvez également utiliser des caractères génériques $xxxxx$ pour personnaliser la ligne d’objet et l’adapter à la saisie de l’utilisateur. |
3. Format de courriel et Éditeur de modèle
Choisissez le format de courriel :
-Texte brut – Envoie des courriels textuels, dénués de tout formatage.
-HTML – Envoie des courriels formatés, pourvu que votre client de messagerie prenne en charge le HTML.
Pour les mises en page de courriel personnalisées, sélectionnez Utiliser un modèle pour ouvrir l’Éditeur de modèles :
-L’éditeur de modèles fonctionne comme une version simplifiée de l’éditeur de texte et d’images.
-Utilisez le menu déroulant Valeur pour insérer des espaces réservés qui correspondent à des champs présents dans le formulaire.
-Une fois ces réglages sauvegardés, un courriel basé sur la structure présente dans votre modèle sera généré à toutes les fois qu’un formulaire est soumis.
4. Envoyer le courriel de confirmation
Cette fonctionnalité envoie une réponse automatisée aux visiteurs leur confirmant l’envoi.
-Courriel de destination – Saisissez l’adresse courriel qui recevra les formulaires soumis, p. ex., commandes@contactermonsiteweb.com.
-Courriel de l’expéditeur – Afin de faciliter l’acheminement des soumissions de formulaires, nous avons désactivé l’option permettant de préciser l’adresse courriel de l’expéditeur.
-Objet du courriel – Définissez la ligne d’objet du courriel (p. ex., « Nouvelle demande de renseignements »).
-Contenu du message – Naviguez vers Utiliser un modèle > Modifier pour ouvrir l’éditeur de modèles de texte, où vous pouvez personnaliser le message de confirmation. Utilisez Fusionner les balises pour insérer des données présentes dans les champs de formulaire (p. ex., $Email$).
5. Envoyer à la base de données
Activez Envoyer à la base de données pour stocker les données rattachées aux formulaires soumis dans une base de données hébergée sur le site. Le formulaire crée automatiquement une base de données dédiée qui reproduit l’information des colonnes considérées comme étant essentielles pour la validation de la concordance, notamment celles qui renvoient aux noms des champs de valeur du formulaire et aux types de données. Vous pouvez également utiliser une base de données importée, mais assurez-vous que les noms et les types de colonnes correspondants y figurent.
Réglages supplémentaires :
-Exiger une confirmation – Envoie un courriel avec un lien de confirmation sur lequel les utilisateurs doivent cliquer pour valider leur soumission.
-Exiger l’approbation – Avise un modérateur par courriel, lui demandant d’approuver ou de rejeter une soumission avant qu’elle ne soit stockée. Cela contribue à minimiser les pourriels et les soumissions accidentelles.
Pour plus de détails, consultez le tutoriel pour l’application Éditeur de base de données.