Introduction
Utilisation de Sitely
Éléments
Comment faire
Les formulaires sont l’un des principaux moyens par lesquels les visiteurs de votre site peuvent vous contacter. Ils simplifient la vie de vos visiteurs tout en gardant vos adresses e‑mail à l’abri des robots collecteurs. Créer des formulaires dans Sitely consiste simplement à ajouter des éléments de formulaire à votre page. Voici les éléments de formulaire standard disponibles dans Sitely.
Champ de texte
Case à cocher
Bouton
Curseur
Bouton radio
Pièce jointe
Sélection d’options
L’élément de formulaire le plus couramment utilisé est le champ de texte, ou champ. Il s’agit d’une zone simple qui permet aux utilisateurs de saisir des informations, telles que le nom, l’adresse, l’e‑mail ou le numéro de téléphone, etc. La zone peut être stylisée comme n’importe quel autre élément dans Sitely via le panneau de style.
Champ de texte : c’est ici que vous configurez le contenu initial que vous voulez afficher dans le champ. En général, il s’agit d’un texte par défaut qui sera envoyé avec le formulaire si les utilisateurs ne le remplacent pas.
Texte indicatif (placeholder) : contenu affiché dans le champ pour indiquer l’information attendue. Bien que ces informations soient affichées, elles ne peuvent pas servir de valeur par défaut et doivent être remplacées par la saisie de l’utilisateur.
Variable de formulaire : il s’agit simplement d’un nom qui identifie ce champ en particulier. Il est utilisé lorsque les résultats du formulaire vous sont envoyés. L’e‑mail que vous recevez contiendra tous les noms de variables de formulaire ainsi que le contenu saisi par l’utilisateur dans ces champs. Par exemple, une variable de formulaire first_name serait généralement utilisée pour le champ où l’utilisateur doit saisir son prénom. Lorsque les résultats arrivent dans votre boîte mail, on y trouvera une ligne telle que first_name : Fred. Si vous n’ajoutez pas de variable de formulaire, Sitely vous en attribuera une générique.
Ligne unique : cette case force le texte saisi à n’occuper qu’une seule ligne, comme une adresse e‑mail ou un numéro de téléphone. Si vous désélectionnez cette option, la saisie peut s’étendre sur plusieurs lignes, comme pour une zone de message.
Champ mot de passe : cocher cette option masque la saisie et la remplace par une série de points. Bien que l’utilisateur voie des points dans le champ, le contenu réel sera envoyé avec les résultats du formulaire. Cette option est généralement utilisée pour des formulaires de connexion plutôt que pour des formulaires destinés à envoyer des informations par e‑mail.
L’accessibilité du formulaire s’articule autour du choix de l’étiquette : que vous sélectionniez une zone de texte (par exemple « Message : ») ou l’étiquette flottante, c’est ce que les technologies d’assistance utilisent pour décrire le champ de saisie.
Les options suivantes du panneau de style sont les classiques : police, taille, alignement, etc.
Apparence vous donne des options de style supplémentaires propres aux champs de formulaire. Lorsqu’un élément de formulaire est sélectionné par un utilisateur, il devient un point de focus (souvent appelé anneau de focus). Cela indique à l’utilisateur qu’il est sur le point de saisir des informations. Avec cette option, vous pouvez définir une couleur d’arrière‑plan et une couleur de texte indicatif pour rendre le champ plus visible. De plus, la plupart des navigateurs mettent en évidence un champ actif avec une bordure.
Validation : ici, vous pouvez imposer que seuls certains types d’informations soient saisis dans le champ. Vous pouvez également rendre le champ obligatoire avant que le formulaire puisse être envoyé.
Enfin, la section Formatage. Vous pouvez imposer la capitalisation du contenu, activer la vérification orthographique ou autoriser les navigateurs à remplir automatiquement le contenu à partir de l’ordinateur de l’utilisateur.
Elle est utilisée lorsque vous souhaitez proposer aux utilisateurs des options pouvant être sélectionnées, par exemple « Cocher pour recevoir notre newsletter » ou « Envoyez‑moi des offres spéciales de temps en temps ». Vous pouvez ajouter autant de cases à cocher que nécessaire, et les utilisateurs seront libres d’en sélectionner tout ou partie. Si vous souhaitez limiter le choix des utilisateurs à une seule option, utilisez plutôt le champ Bouton radio.
La case à cocher propose quelques options supplémentaires dans le panneau de style. Vous pouvez choisir un état par défaut (activé ou désactivé), indiquer si elle est activée ou non, et si elle est obligatoire, par exemple pour une acceptation des conditions générales. L’apparence de la case peut être personnalisée en sélectionnant l’option Personnalisé, ou laissée au style automatique du navigateur de l’utilisateur. Enfin, vous pouvez sélectionner la taille de la case à cocher.
Vous utiliserez cette option lorsque vous souhaitez limiter le choix de l’utilisateur à une seule option parmi plusieurs. Par exemple, vous pouvez utiliser un bouton radio pour permettre aux utilisateurs de sélectionner une couleur ou une taille pour un produit commandé. Pour ce faire, ajoutez plusieurs boutons radio à votre formulaire — un pour chaque choix. Attribuez ensuite à chaque bouton un nom de variable identique, tel que « color ». Cela regroupera les boutons radio de sorte qu’une seule des options puisse être sélectionnée. Le panneau de style vous permet également de définir une valeur par défaut qui sera automatiquement sélectionnée si les utilisateurs ne font pas de choix. Voici un exemple de sélecteur de couleur avec le vert défini comme valeur par défaut.
Il s’agit d’une autre forme de sélecteur à choix multiples. Ici, les choix sont présentés sous la forme d’une liste déroulante dans laquelle les utilisateurs peuvent sélectionner une option. Lorsque l’élément de sélection d’options est ajouté à la page, des options supplémentaires apparaissent dans le panneau de style. La première section vous permet de créer votre liste d’options — cliquez simplement sur le bouton Ajouter pour ajouter d’autres choix. Vous modifiez chaque libellé d’option en cliquant sur son nom dans la liste. Vous pouvez, en option, ajouter une valeur pour chaque option. Cette valeur sera envoyée lors de la soumission du formulaire et c’est elle qui est utilisée par le champ intelligent Calculatrice. Si vous n’ajoutez pas de valeur, seul le libellé de l’option est envoyé dans le résultat du formulaire.
Il existe également un bouton qui vous permet d’importer une liste d’options. Cela est typiquement utilisé lorsque vous souhaitez, par exemple, un sélecteur de pays dans une adresse de formulaire. Évidemment, avec plus de 180 pays dans le monde, créer la liste à partir de zéro serait chronophage. Toutefois, vous pouvez télécharger des listes de pays au format texte brut depuis de nombreux sites. Ces listes peuvent être importées directement dans Sitely grâce à la fonction Importer. Voici un exemple de liste déroulante de pays.
Si vous souhaitez l’essayer vous‑même, voici un lien de téléchargement pour un fichier texte de pays.
L’option Lors de la sélection est similaire à l’option Au clic des boutons et autres liens : vous pouvez choisir une action à effectuer lorsque l’option spécifique est sélectionnée, ce qui permet au sélecteur d’options de se comporter comme un menu, ou d’afficher un bloc de mise en page ou une fenêtre contextuelle contenant des champs de formulaire supplémentaires.
Les valeurs sont définies dans le panneau de style en indiquant la valeur minimale, la valeur maximale, le pas et la valeur initiale du curseur. Nous donnons également au curseur un nom de variable de formulaire — dans cet exemple, nous utilisons la variable quantity. Lorsque le formulaire est soumis, l’e‑mail affichera le nom de la variable suivi de la valeur sélectionnée par l’utilisateur. Cela ressemblera à quantity : 2.
Pour afficher aux utilisateurs la quantité sélectionnée, nous ajoutons également une zone de texte à droite du curseur pour montrer la quantité choisie. Cela se fait en utilisant un champ intelligent dans la zone de texte — vous verrez l’option dans le panneau de style lorsque votre zone de texte est sélectionnée sur la zone de travail — cela ressemble à ceci.
Il s’agit d’un curseur simple qui permet aux utilisateurs de sélectionner une valeur en le faisant glisser. Il a de nombreuses utilisations, mais, à titre d’exemple, nous pouvons l’utiliser comme moyen de commander une quantité précise d’un produit. Dans notre exemple ci‑dessous, le curseur permet de sélectionner une quantité comprise entre 1 et 10, avec une quantité par défaut de 2.
Lorsque vous insérez un champ intelligent, un panneau d’options s’affiche. Dans ce cas, l’option souhaitée est Calculatrice. Cela place un champ intelligent Calculatrice dans la zone de texte — il ressemble à ceci.
Cliquez sur le champ intelligent Calculatrice pour définir sa valeur. Pour vous aider, Sitely analyse votre page et trouve toutes les variables disponibles que vous pouvez utiliser dans votre champ calculé. Dans ce cas, Sitely a trouvé notre variable quantity attachée au curseur. C’est la valeur que nous devons afficher à côté du curseur, c’est donc l’option choisie. Désormais, lorsque le curseur est déplacé, la valeur appropriée est affichée à l’utilisateur.
Remarque : nous avons une section entière dans la documentation utilisateur pour les champs intelligents et leur utilisation. Nous n’avons abordé ce sujet ici que pour montrer la pertinence des éléments intelligents dans le contexte de cet élément de formulaire particulier.
Il s’agit d’un simple élément de téléversement de fichier qui permet aux utilisateurs de parcourir leur ordinateur et de joindre un fichier au formulaire.
L’élément lui‑même est un groupe de deux éléments : le champ de fichier et le bouton. Ceux‑ci peuvent être sélectionnés et stylisés individuellement. Lorsque le groupe est sélectionné, vous avez un contrôle total sur ce que les utilisateurs peuvent téléverser avec les résultats du formulaire. Vous pouvez spécifier les types de fichiers autorisés ainsi que la limite de taille.
C’est l’élément qui contrôle l’envoi de votre formulaire. Bien que nous ayons une section entière de la documentation sur les liens et les actions au clic, nous allons évoquer rapidement les options disponibles spécifiquement pour l’envoi des détails du formulaire.
La méthode la plus courante pour soumettre un formulaire est l’option « Envoyer le formulaire de contact par e‑mail ». Cette option rassemble toutes les données du formulaire de votre page et les soumet à votre serveur pour une transmission vers une adresse e‑mail désignée. Toute l’opération est contrôlée via le panneau de style lorsque vous sélectionnez cette méthode d’envoi.
Commencez par donner un libellé à votre bouton. Il s’agira généralement du mot Envoyer, mais vous pouvez choisir tout texte approprié à votre formulaire.
L’action au clic sera « Envoyer le formulaire de contact par e‑mail ». L’intitulé de l’e‑mail peut être tout ce qui vous aide à l’identifier lorsqu’il arrive dans votre boîte de réception. L’adresse e‑mail de l’expéditeur (From) doit être une adresse e‑mail sur votre serveur. Dans notre exemple, il s’agit d’une adresse noreply, mais cela peut être une adresse que vous utilisez au quotidien si vous préférez. Il est important d’indiquer une adresse e‑mail spécifique à votre domaine, car certains hébergeurs peuvent ne pas traiter les courriels semblant provenir d’un autre serveur — comme Gmail.
L’adresse e‑mail du destinataire (To) est l’adresse à laquelle vous souhaitez recevoir les réponses. Là encore, il est préférable qu’il s’agisse d’une adresse associée à votre domaine afin d’éviter les problèmes de livraison causés par les filtres anti‑spam ou les politiques de l’hébergeur. L’objet sera le texte que vous souhaitez voir apparaître dans la ligne d’objet des réponses que vous recevez.
Ensuite, vous avez deux options. La première, « Envoyer l’e‑mail via le serveur web », la seconde, « Utiliser un serveur SMTP personnalisé ». Dans la plupart des cas, la première option fonctionne très bien. Elle confie au sendmail de votre hébergeur le soin de traiter l’e‑mail et de vous le transmettre. Cependant, de plus en plus d’hébergeurs préfèrent que vos formulaires soient traités via un compte e‑mail correctement configuré que vous possédez et contrôlez. En substance, c’est comme envoyer un e‑mail via votre compte habituel. Si votre hébergeur vous impose cette option, vous pouvez renseigner les identifiants du compte e‑mail dans le panneau de style après avoir sélectionné l’option SMTP.
Cette section du panneau de style répertorie tous les éléments de formulaire que Sitely trouve sur votre page et vous donne la possibilité de les soumettre avec ce bouton d’envoi, ou d’en laisser certains être soumis par un autre bouton. Quel que soit votre choix, il suffit de cocher les cases en face de tous les éléments que vous souhaitez envoyer. C’est une fonctionnalité très utile de Sitely, car elle offre une grande flexibilité dans la conception de pages de collecte d’informations.
Dans la plupart des applications de développement web, les formulaires sont construits comme des éléments séparés dans lesquels tous les champs doivent être contenus. Cela donne lieu au style habituel de la plupart des formulaires web : une boîte contenant des champs et un bouton d’envoi. Bien que ce soit ainsi que la plupart des gens conçoivent les formulaires, certains cas d’usage ne s’y prêtent pas idéalement. Par exemple, un enseignant peut préparer des examens ou des travaux en ligne pour des étudiants. Dans ce cas, l’enseignant peut vouloir présenter le cours d’une manière proche d’un support imprimé. Il peut commencer par une présentation du sujet, quelques exemples corrigés, suivis de quelques exercices à réaliser. Dans ce scénario, l’étudiant parcourt la page en ligne, répond aux questions et complète les exercices au fur et à mesure. Lorsqu’il atteint la fin de la page, il peut ajouter son nom et d’autres détails et soumettre son travail avec un simple bouton.
Parce que Sitely parcourt toute la page à la recherche de tous les éléments de formulaire que les étudiants peuvent remplir au fil de leur progression, ils peuvent tous être rassemblés et envoyés sous forme d’e‑mail de résultats à l’enseignant. Cette approche familière du matériel de formation est souvent difficile à réaliser dans d’autres éditeurs web sans pages spécialement codées, mais dans Sitely, c’est un jeu d’enfant.
Lorsque le formulaire est envoyé avec succès, vous affichez généralement un message de remerciement. Une option consiste à rediriger vos visiteurs vers une page de remerciement distincte, une autre consiste à afficher un message de remerciement dans une fenêtre contextuelle. Cela rassure les utilisateurs sur l’envoi de leurs informations et vous donne également l’occasion de fournir des informations supplémentaires ou des liens pertinents sur votre site après la soumission.
Dans certaines situations, vous pouvez souhaiter utiliser un processeur de formulaire tiers, ou un script de formulaire personnalisé sur votre propre serveur. Pour ces cas, utilisez l’option Soumission avancée de formulaire. Elle vous permet de saisir l’URL du service ou du script de traitement du formulaire et de définir une méthode d’envoi (GET ou POST). Ces options vous seront fournies par le prestataire ou le développeur du script. Il vous suffit d’entrer les informations dans cette section et de choisir les éléments de formulaire à soumettre.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
