Aller au contenu

Formulaires

Les formulaires HTML collectent des informations auprès des visiteurs — emails, messages, coordonnées, retours d'expérience, et plus encore. Silex inclut des éléments de formulaire et vous pouvez gérer les soumissions via des services externes.

Les formulaires dans Silex fonctionnent comme n'importe quel autre élément : vous les ajoutez visuellement, configurez leurs propriétés et publiez. Lorsqu'un visiteur soumet un formulaire sur votre site en ligne, les données sont envoyées à un service de votre choix (comme Formspree ou Netlify Forms), pas directement à votre email.

Ajouter des éléments de formulaire

Dans le panneau Blocs (barre latérale gauche) :

  1. Cherchez la section Forms, ou recherchez les éléments de formulaire
  2. Éléments disponibles : Form, Input, Textarea, Select, Button, Label, Checkbox, Radio

Form — Le conteneur qui enveloppe tous les autres éléments de formulaire. Chaque formulaire doit en avoir un. C'est comme un Container qui porte des propriétés spécifiques aux formulaires. Le bloc Form arrive avec des champs d'exemple (Name, Email, Gender, Message et un bouton Send) que vous pouvez garder, modifier ou supprimer.

Input — Un champ de texte sur une seule ligne. Exemples : nom, adresse email, mot de passe. Dans les réglages de l'élément (icône engrenage en haut du panneau de droite), le menu Type propose :

  • text (par défaut) — n'importe quel texte
  • email — pour les adresses email (affiche une erreur de validation si le format est incorrect)
  • password — masque le texte au fur et à mesure que l'utilisateur tape
  • number — pour les saisies numériques

Checkbox et Radio — Une case à cocher, et un bouton à choix unique (donnez le même Name aux boutons radio d'un même groupe).

Textarea — Un champ de texte multi-lignes pour les messages plus longs. Idéal pour les formulaires de contact, les retours d'expérience ou les commentaires.

Select — Un menu déroulant. Écrivez ses choix dans le champ Options des réglages de l'élément, un par ligne, sous la forme valeur::Libellé (par exemple small::Petit).

Button — Réglez son Type sur submit dans les réglages de l'élément pour qu'il envoie le formulaire. Le bloc Button, et le bouton Send du bloc Form, sont de type button par défaut : ils ne font rien tant que vous ne changez pas le Type.

Label — Optionnel mais recommandé. Associe du texte à un champ de saisie (améliore l'accessibilité et l'ergonomie). Tapez l'ID de l'Input (un champ de ses réglages de l'élément) dans le champ For du Label.

Construire un formulaire de contact simple

Structure sur le canvas :

  1. Ajoutez un élément Form (Blocs → Forms → Form). Il contient déjà un champ nom, un champ email, des cases Gender, un champ message et un bouton Send
  2. Sélectionnez la ligne Gender et supprimez-la
  3. Sélectionnez le bouton Send, et dans les réglages de l'élément réglez son Type sur submit
  4. Dans le Style Manager, définissez le Form sur Display : Flex et Flex direction : Column pour les empiler verticalement
  5. Ajoutez un Row Gap (par ex. 16px) pour un espacement régulier entre les éléments

Styliser les éléments :

  • Ajoutez du padding et de la largeur aux champs de saisie pour les agrandir
  • Définissez la Font-size pour la lisibilité
  • Ajoutez Border et Border-radius pour un aspect soigné
  • Sur le bouton de soumission : définissez une Background color, du padding, et éventuellement Font-weight : bold

Configurer l'action et la méthode du formulaire

Après avoir construit le formulaire visuellement, vous devez configurer où les données sont envoyées lorsque quelqu'un le soumet.

Dans les réglages de l'élément (icône engrenage), avec l'élément Form sélectionné :

  • Action — L'URL où les données du formulaire sont envoyées. C'est là que les services externes interviennent (voir la section suivante).
  • Method — Généralement POST (recommandé pour la plupart des formulaires). GET est moins courant et place les données dans l'URL, ce qui est visible par l'utilisateur.

Exemple d'action : https://formspree.io/f/xyzabc123

Cela indique au formulaire d'envoyer toutes les données soumises à Formspree, un service propriétaire de soumission de formulaires qui a une offre gratuite.

Gérer les soumissions avec des services externes

Silex ne fournit pas de backend intégré pour les soumissions de formulaires. À la place, vous envoyez le formulaire à un service ou à un outil qui collecte les données et les envoie généralement à votre email.

Un formulaire Silex est un formulaire HTML simple : le navigateur du visiteur l'envoie directement à l'URL du champ Action. Les options ci-dessous acceptent ce type de formulaire, sans code en plus. Après l'envoi, le visiteur voit la page renvoyée par le service (une page de remerciement, ou une réponse brute pour certains outils).

Les options sont classées par type : d'abord le libre (logiciel libre qu'aucune entreprise ne contrôle), puis l'open source (logiciel libre, mais une entreprise ou un accord de contribution décide), puis tout le reste (open core, propriétaire, source disponible).

Libre :

  • Huginn (libre, MIT) : un outil d'automatisation à installer sur votre propre serveur. Un agent Webhook reçoit le formulaire, un agent Email vous l'envoie. Maintenu par des bénévoles. Demande quelques compétences techniques.

Open source :

  • WordPress + Contact Form 7 (open source, GPL) : utile si vous utilisez déjà WordPress comme source de données (configurer WordPress). Contact Form 7 est développé par Rock Lobster Inc. WordPress a une fondation à but non lucratif, mais le projet est dirigé en pratique par Matt Mullenweg, qui dirige aussi l'entreprise Automattic. Voir Exemple : Contact Form 7 plus bas.
  • Node-RED (open source, Apache 2.0) : un outil d'automatisation à installer sur votre propre serveur. Un nœud http in reçoit le formulaire, un nœud email (paquet node-red-node-email, à installer) vous l'envoie. C'est un projet de l'OpenJS Foundation (à but non lucratif), mais les contributeurs doivent signer un accord de licence de contribution (CLA), et l'essentiel du travail vient de l'entreprise FlowFuse. Demande quelques compétences techniques.

Tout le reste (open core, propriétaire, source disponible) :

  • n8n (source disponible, pas un logiciel libre) : outil d'automatisation. En auto-hébergement, un nœud Webhook reçoit le formulaire et le workflow peut vous l'envoyer par email. Sa licence, la Sustainable Use License, n'autorise l'usage que pour les besoins internes de votre entreprise.
  • Formspree (propriétaire) : service hébergé. Offre gratuite : 50 soumissions par mois, avec la page de remerciement de Formspree.
  • Basin (propriétaire) : service hébergé. Offre gratuite : 1 formulaire, 50 soumissions par mois.
  • Web3Forms (propriétaire) : service hébergé. Offre gratuite : 250 soumissions par mois. Vous ajoutez votre clé d'accès dans un champ caché (un Input avec le Name access_key, et dans sa section Attributes type = hidden et value = votre clé).
  • FormSubmit (propriétaire) : service hébergé gratuit. L'URL d'action contient votre adresse email, que vous confirmez une fois par email.
  • Static Forms (propriétaire) : service hébergé avec une offre gratuite.
  • Netlify Forms (propriétaire) : seulement pour les sites publiés sur Netlify. Ajoutez au Form l'attribut data-netlify avec la valeur true (section Attributes des réglages de l'élément).

Note sur la vie privée : avec un service hébergé, les messages de vos visiteurs passent par les serveurs de ce service et y restent. Indiquez-le dans votre politique de confidentialité. Un outil installé sur votre propre serveur garde les données chez vous.

Pour aller plus loin (ces options demandent du JavaScript, un relais ou une intégration, pas seulement le champ Action) :

  • Votre propre script : un petit script PHP ou Node.js sur votre hébergement, qui reçoit le formulaire et vous l'envoie par email. Contrôle total, mais vous devez l'écrire et le maintenir.
  • hugo-contact (open source, MIT, par Caffeinated Softworks) : petit programme Go auto-hébergé qui reçoit les formulaires et les envoie par email. Il demande un petit script anti-spam sur la page (code personnalisé).
  • EmailJS (propriétaire) : envoie des emails depuis JavaScript. Offre gratuite : 200 requêtes par mois.
  • Grist (open core : grist-core est sous Apache 2.0, l'édition Enterprise est propriétaire) : son API demande un jeton, un formulaire Silex ne peut donc pas lui envoyer de données directement. Vous pouvez intégrer dans votre page un formulaire créé dans Grist, ou passer par un relais.

Exemple : Configurer un service de soumission de formulaires

Quelle que soit l'option choisie, les étapes générales sont les mêmes :

  1. Créez un compte ou installez votre outil auto-hébergé
  2. Obtenez une URL d'action de formulaire (par ex. https://formspree.io/f/xyzabc123 ou https://votre-serveur-node-red.example/contact)
  3. Dans Silex, sélectionnez votre élément Form
  4. Dans les réglages de l'élément (icône engrenage), collez l'URL dans le champ Action
  5. Assurez-vous que Method est défini sur POST
  6. Publiez votre site et testez le formulaire sur votre site en ligne

Exemple : Contact Form 7

Contact Form 7 peut recevoir un formulaire Silex par l'API REST de WordPress, sans clé d'API (tutoriel CSS-Tricks, en anglais) :

  1. Dans WordPress, créez un formulaire dans Contact Form 7 et notez son identifiant (dans l'URL de sa page de modification). Les noms de ses champs doivent correspondre au Name de vos champs Silex
  2. Dans Silex, réglez l'Action du Form sur https://votre-site-wordpress/wp-json/contact-form-7/v1/contact-forms/<ID>/feedback et Method sur POST
  3. Dans la section Attributes du Form, ajoutez enctype avec la valeur multipart/form-data
  4. Ajoutez des champs cachés au formulaire : pour chacun, ajoutez un Input, réglez son Name, puis dans sa section Attributes ajoutez type avec la valeur hidden et value avec la valeur ci-dessous. _wpcf7_unit_tag (par ex. wpcf7-f<ID>-o1) est obligatoire : sans lui, Contact Form 7 refuse le formulaire. Les autres sont facultatifs mais recommandés : _wpcf7 (l'identifiant du formulaire), _wpcf7_locale (par ex. fr_FR) et _wpcf7_container_post (0)

Limites : le visiteur arrive sur une réponse JSON brute, pas sur une jolie page. Une réponse avec le code 200 peut quand même signifier que l'email n'est pas parti : vérifiez la valeur status dans le JSON pendant vos tests. Si reCAPTCHA est actif côté WordPress, ces soumissions sont toutes classées comme spam (status vaut spam) et aucun email ne part.

Validation de formulaire

Les navigateurs modernes valident les champs de formulaire avant la soumission :

  • Input email — Doit contenir un format d'email valide
  • Input number — Doit être un nombre
  • Required — Vous pouvez marquer les champs comme obligatoires pour que les utilisateurs ne puissent pas soumettre un formulaire vide

Pour rendre un champ obligatoire :

  1. Sélectionnez le champ (Input, Textarea, Select, Checkbox ou Radio)
  2. Dans les réglages de l'élément (icône engrenage), cochez Required
  3. Le navigateur empêche désormais la soumission du formulaire si ce champ est vide

Styliser les éléments de formulaire

Les éléments de formulaire sont des éléments HTML classiques, vous pouvez donc les styliser entièrement dans le Style Manager :

  • Définissez Width pour élargir les champs de saisie (par ex. 100% ou 300px)
  • Ajoutez du Padding pour l'espacement interne
  • Définissez Border et Border-radius pour l'aspect visuel
  • Utilisez Font-size, Font-weight, Color et Background pour la typographie et les couleurs
  • États de survol : sélectionnez un champ, puis dans le Style Manager, cherchez les pseudo-classes (:hover, :focus). Elles vous permettent de styliser l'apparence d'un champ lorsque l'utilisateur le survole ou clique dessus

Formulaires responsives : Sur les écrans étroits, vous pourriez vouloir des champs de saisie pleine largeur. Utilisez un breakpoint pour définir Width à 100% sur mobile et 300px sur desktop. Consultez Design responsive pour plus de détails.

Modèles de formulaires courants

Inscription à la newsletter : - Un seul champ email + bouton de soumission - Action : Formspree, Mailchimp ou Substack - Les utilisateurs tapent leur email et cliquent sur S'abonner

Formulaire de contact : - Champs Nom, Email, Message - Action : Formspree ou similaire - Envisagez d'ajouter une case à cocher « J'accepte d'être contacté »

Formulaire de retour d'expérience : - Textarea pour le retour - Menu déroulant optionnel pour la catégorie (Bug, Demande de fonctionnalité, Général) - Bouton de soumission

Sondage : - Questions à choix multiples (boutons Radio avec le même Name) - Menu déroulant (Select et son champ Options) - Bouton de soumission

Limitations et bonnes pratiques

Pas de stockage côté client des formulaires — Si un visiteur rafraîchit la page, les données de son formulaire sont perdues. Si vous souhaitez conserver les données, utilisez JavaScript (hors du périmètre de Silex).

Pas de logique conditionnelle — Vous ne pouvez pas masquer/afficher des champs de formulaire en fonction de la saisie de l'utilisateur sans code personnalisé.

Pas de formulaires multi-étapes — Silex ne prend pas en charge nativement les formulaires qui s'étendent sur plusieurs pages.

Testez toujours après la publication — Testez votre formulaire sur le site en ligne. Soumettez des données de test et vérifiez qu'elles atteignent votre email ou le tableau de bord du service.

Informez les utilisateurs sur le traitement des données — Soyez transparent sur la destination des données. Si vous utilisez Formspree, mentionnez dans votre politique de confidentialité qu'un tiers gère les soumissions.

Utilisez le HTTPS — Les formulaires ne devraient fonctionner que via HTTPS (sécurisé). Votre site Silex est automatiquement en HTTPS s'il est publié sur GitLab Pages.

En savoir plus

Quiz

Q1 : Quel élément HTML enveloppe tous les champs de formulaire ?

  • A) Input
  • B) Form
  • C) Textarea
Réponse

B) Form — Chaque formulaire doit avoir un conteneur Form qui enveloppe tous les inputs, textareas, selects et boutons.

Q2 : Où vont les données du formulaire lorsque quelqu'un le soumet ?

  • A) Directement à votre email
  • B) Vers une URL que vous spécifiez dans le champ action du Form, généralement un service tiers comme Formspree
  • C) Vers les serveurs de Silex
Réponse

B) Vers une URL que vous spécifiez dans le champ action du Form, généralement un service tiers comme Formspree — Silex ne stocke pas les données de formulaire ; vous configurez leur destination.

Q3 : Quelle est la différence entre un Input et un Textarea ?

  • A) Input est pour le texte sur une seule ligne, Textarea est pour le texte multi-lignes
  • B) Textarea est uniquement pour les emails
  • C) Ce sont la même chose ; Input est juste une abréviation
Réponse

A) Input est pour le texte sur une seule ligne, Textarea est pour le texte multi-lignes — Utilisez Input pour les saisies courtes (nom, email), Textarea pour les messages plus longs.

Q4 : Comment rendre un champ de formulaire obligatoire ?

  • A) Définir Width sur required dans le Style Manager
  • B) Cocher Required dans les réglages de l'élément (icône engrenage)
  • C) Utiliser la propriété action du Form
Réponse

B) Cocher Required dans les réglages de l'élément (icône engrenage) — Le navigateur empêche alors la soumission si le champ est vide.

Q5 : Que contrôle la propriété method du Form ?

  • A) L'apparence visuelle du formulaire
  • B) La destination des données du formulaire
  • C) La manière dont les données sont transmises (généralement POST ou GET)
Réponse

C) La manière dont les données sont transmises (généralement POST ou GET) — POST est la méthode standard et recommandée. GET est moins courant et place les données dans l'URL visible.

Éditer cette page sur GitLab