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, Option

Form — Le conteneur qui enveloppe tous les autres éléments de formulaire. Chaque formulaire doit en avoir un. C'est comme un Div qui porte des propriétés spécifiques aux formulaires.

Input — Un champ de texte sur une seule ligne. Exemples : nom, adresse email, URL de site web. Dans le Element settings (icône engrenage), vous pouvez définir le type sur :

  • text (par défaut) — n'importe quel texte
  • email — pour les adresses email (affiche une erreur de validation si le format est incorrect)
  • tel — pour les numéros de téléphone
  • number — pour les saisies numériques
  • password — masque le texte au fur et à mesure que l'utilisateur tape
  • date — affiche un sélecteur de date sur les navigateurs compatibles
  • checkbox — une case à cocher (il peut y en avoir plusieurs par formulaire)
  • radio — un bouton à choix unique (regroupez-les par nom)
  • submit — le bouton qui soumet le formulaire

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. Ajoutez des éléments Option à l'intérieur pour définir les choix.

Label — Optionnel mais recommandé. Associe du texte à un champ de saisie (améliore l'accessibilité et l'ergonomie). Définissez l'attribut for du Label pour qu'il corresponde au id ou au name de l'Input.

Construire un formulaire de contact simple

Structure sur le canvas :

  1. Ajoutez un élément Form (Blocs → Forms → Form)
  2. À l'intérieur du Form, ajoutez ces éléments dans l'ordre :
  3. Label + Input type="text" (pour le nom)
  4. Label + Input type="email" (pour l'email)
  5. Textarea (pour le message)

  6. Input type="submit" (le bouton de soumission)

  7. Dans le Style Manager, définissez le Form sur Display : Flex et Flex-direction : Column pour les empiler verticalement

  8. Ajoutez un Column-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 le Element settings (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 gratuit de soumission de formulaires.

Gérer les soumissions avec des services externes

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

Options populaires :

Alternatives auto-hébergées / libres (recommandées pour la vie privée et l'indépendance) :

  • n8n (automatisation auto-hébergée) — Créez un workflow qui reçoit les soumissions de formulaires via webhook et les envoie à votre email, une base de données, ou tout autre service. Gratuit et open source en auto-hébergement.
  • WordPress (avec un plugin de formulaire de contact) — Si vous utilisez déjà WordPress comme source de données, des plugins comme Contact Form 7 ou WPForms peuvent gérer les soumissions sur votre instance WordPress.
  • Votre propre backend — Auto-hébergez un serveur simple (par ex. un petit script Node.js ou PHP) qui reçoit les données de formulaire via POST et les transfère à votre email. Cela nécessite des compétences en développement mais vous donne un contrôle total.

Services tiers :

  • Formspree (niveau gratuit) — Configuration facile, envoie les soumissions à votre email. Consultez le guide de configuration de Formspree pour les instructions détaillées.
  • Basin (gratuit) — Similaire à Formspree. Inscrivez-vous, créez un formulaire, obtenez l'URL d'action. Voir usebasin.com.
  • EmailJS (niveau gratuit disponible) — Service côté client qui envoie les données de formulaire directement à votre email via JavaScript.

Note : Lorsque vous utilisez un service tiers, les données du formulaire transitent par leurs serveurs. Si la confidentialité est importante pour vous, préférez une solution auto-hébergée comme n8n ou votre propre backend.

Exemple : Configurer un service de soumission de formulaires

Quel que soit le service choisi, les étapes générales sont les mêmes :

  1. Créez un compte ou configurez votre endpoint auto-hébergé
  2. Obtenez une URL d'action de formulaire (par ex. https://formspree.io/f/xyzabc123 ou https://votre-instance-n8n.com/webhook/contact)
  3. Dans Silex, sélectionnez votre élément Form
  4. Dans le Element settings (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

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
  • Input date — Doit être une date valide
  • Attribut 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 l'élément Input ou Textarea
  2. Dans le Element settings (icône engrenage), ajoutez un attribut : Name = required, Value = 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 regroupés par nom) - Menu déroulant (select + option) - 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) Ajouter un attribut required dans le Element settings (icône engrenage)
  • C) Utiliser la propriété action du Form
Réponse

B) Ajouter un attribut required dans le Element settings (icône engrenage) — Ajoutez Name = required, Value = required pour empêcher 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