Webform

🎯 Qu’est-ce que Webform ?

Webform est le module de formulaires le plus complet de Drupal. Il permet de :

• Créer des formulaires sans code
• Gérer les soumissions
• Envoyer des emails
• Intégrer des paiements
• Exporter les données

Cas d'usage

Contact, demande de devis, newsletter, enquêtes, commandes…

📦 Installation

# Installer Webform
ddev composer require drupal/webform

# Activer
ddev drush en webform webform_ui -y

Modules complémentaires

# Pour le développement
ddev drush en webform_devel -y

# Pour les exports
ddev drush en webform_submission_export_import -y

⚙️ Créer un formulaire

Accès

Structure → Webforms → Ajouter un webform

Ou : /admin/structure/webform/add

Formulaire de contact TailStore

1. Créer le webform

   • Titre : Formulaire de contact
   • ID machine : contact

2. Ajouter les éléments

   Cliquez sur Construire puis Ajouter un élément :

   Type	Clé	Libellé	Requis
   Champ texte	name	Nom complet	✅
   Email	email	Email	✅
   Téléphone	phone	Téléphone	❌
   Liste de sélection	subject	Sujet	✅
   Zone de texte	message	Message	✅

3. Configurer le sujet

   Options :

   general: Question générale
   order: Suivi de commande
   return: Retour produit
   partnership: Partenariat

4. Enregistrer

📧 Configuration des emails

Email de notification admin

1. Allez dans Paramètres → Emails/Gestionnaires

2. Ajouter un gestionnaire → Email

3. Configuration :

   Titre: Notification admin
   Destinataire: admin@tailstore.com
   Sujet: "[webform_submission:values:subject] - Nouveau message de [webform_submission:values:name]"
   Corps: |
     Nouveau message reçu sur TailStore:
   
     Nom: [webform_submission:values:name]
     Email: [webform_submission:values:email]
     Téléphone: [webform_submission:values:phone]
     Sujet: [webform_submission:values:subject]
   
     Message:
     [webform_submission:values:message]

4. Enregistrer

Email de confirmation client

Titre: Confirmation client
Destinataire: [webform_submission:values:email]
Sujet: "Votre message a bien été reçu - TailStore"
Corps: |
  Bonjour [webform_submission:values:name],

  Nous avons bien reçu votre message concernant "[webform_submission:values:subject]".

  Notre équipe vous répondra dans les 48h.

  Cordialement,
  L'équipe TailStore

🎨 Personnalisation

Ajouter des classes CSS

Dans chaque élément :

# Attributs du wrapper
wrapper_attributes:
  class: mb-4

# Attributs de l'élément
attributes:
  class: form-input

Template Twig personnalisé

{# templates/webform/webform--contact.html.twig #}
<div class="bg-white rounded-lg shadow-md p-6 md:p-8">
  <h2 class="text-2xl font-bold mb-6">{{ label }}</h2>

  {{ content }}
</div>

Styles des éléments

Dans le thème, ciblez les classes Webform :

/* css/src/components/webform.css */
.webform-submission-form {
  @apply space-y-4;
}

.webform-element--type-textfield input,
.webform-element--type-email input,
.webform-element--type-tel input {
  @apply form-input;
}

.webform-element--type-textarea textarea {
  @apply form-input min-h-32;
}

.webform-element--type-select select {
  @apply form-input;
}

.webform-button--submit {
  @apply btn btn-primary;
}

📋 Formulaire de demande de devis

Structure

Éléments:
  - fieldset: Informations personnelles
    - name (text): Nom complet
    - email (email): Email
    - phone (tel): Téléphone
    - company (text): Entreprise

  - fieldset: Détails de la demande
    - products (entity_autocomplete): Produits concernés
    - quantity (number): Quantité estimée
    - budget (select): Budget estimé
    - deadline (date): Date souhaitée

  - message (textarea): Détails supplémentaires
  - terms (checkbox): J'accepte les CGV

Configuration avancée

# Produits - Entity autocomplete
Type: Référence d'entité
Cible: Contenu - Produit
Limite de sélection: 5

# Budget - Select
Options:
  - Moins de 500€
  - 500€ - 1000€
  - 1000€ - 5000€
  - Plus de 5000€

📊 Gestion des soumissions

Voir les soumissions

Structure → Webforms → [Formulaire] → Résultats

Exporter les données

Interface

1. Résultats → Télécharger
2. Choisir le format (CSV, Excel, JSON)
3. Sélectionner les champs
4. Télécharger

Drush

# Exporter en CSV
ddev drush webform:export contact --format=csv > contact.csv

# Exporter en JSON
ddev drush webform:export contact --format=json > contact.json

Nettoyer les anciennes soumissions

Configuration → Webforms → Paramètres → Purge

Supprimer les soumissions après: 90 jours
Conserver les soumissions non lues: Oui

🔌 Intégration dans le site

Bloc

1. Structure → Mise en page des blocs
2. Placer un bloc dans la région souhaitée
3. Chercher Webform
4. Sélectionner le formulaire
5. Configurer la visibilité (pages)

Page dédiée

Le formulaire est accessible à : /form/contact

Personnaliser l’URL dans Paramètres → Paramètres généraux → Chemin

Dans un template Twig

{# Dans page.html.twig ou un bloc #}
{{ drupal_entity('webform', 'contact') }}

Dans un contenu

Utilisez le format d’entrée “Full HTML” :

<drupal-entity data-entity-type="webform" data-entity-uuid="[UUID]"></drupal-entity>

🔒 Anti-spam et sécurité

Honeypot (recommandé)

ddev composer require drupal/honeypot
ddev drush en honeypot -y

Configuration : /admin/config/content/honeypot

Protéger tous les formulaires: Oui
Délai minimum: 5 secondes
Nom du champ: url (ou autre nom piège)

Avantages : Invisible pour l’utilisateur, très efficace contre les bots.

CAPTCHA / reCAPTCHA

ddev composer require drupal/captcha drupal/recaptcha
ddev drush en captcha recaptcha -y

Configuration :

1. Créer des clés sur Google reCAPTCHA
2. Configuration → CAPTCHA → reCAPTCHA
3. Entrer les clés Site key et Secret key
4. Choisir reCAPTCHA v3 (invisible) ou v2 (case à cocher)

Ajouter au webform :

• Élément → CAPTCHA
• Type : reCAPTCHA

UX vs Sécurité

Honeypot est recommandé en premier car invisible pour l’utilisateur.

N’ajoutez un CAPTCHA que si vous subissez beaucoup de spam malgré Honeypot. Les CAPTCHAs peuvent réduire le taux de conversion de 10-30%.

Limite de soumissions

Dans Paramètres → Limites des soumissions :

# Par utilisateur
Limite par utilisateur: 3
Période: 1 jour

# Globale
Limite totale: 100
Période: 1 jour

Message: "Vous avez atteint la limite de soumissions. Réessayez demain."

Validation des données

Email :

Type: Email
Validation: Format email valide (automatique)

Téléphone :

Type: Tel
Masque: "+33 X XX XX XX XX"
Validation: Expression régulière

Champs obligatoires : Marquez toujours les champs critiques comme requis.

Bonnes pratiques UX

Formulaires efficaces :

• ✅ Gardez-les courts (< 7 champs idéalement)
• ✅ Labels clairs au-dessus des champs
• ✅ Messages d’erreur explicites
• ✅ Placeholder avec exemples
• ✅ Bouton submit avec texte d’action (“Envoyer ma demande” > “Valider”)
• ✅ Confirmation visible après soumission
• ✅ Email de confirmation automatique

Accessibilité :

• ✅ Labels liés aux champs (for/id)
• ✅ Messages d’erreur avec role=“alert”
• ✅ Navigation au clavier (tab)
• ✅ Indicateurs visuels pour champs requis

📊 RGPD et confidentialité

Consentement

Ajoutez un champ checkbox obligatoire :

Type: Checkbox
Clé: gdpr_consent
Libellé: "J'accepte la politique de confidentialité"
Requis: Oui
Description: "Vos données sont utilisées uniquement pour traiter votre demande. [Lien politique de confidentialité]"

Conservation des données

Configuration → Webforms → Paramètres → Purge :

Supprimer les soumissions après: 90 jours
Conserver les soumissions non traitées: Oui
Email de notification avant suppression: contact@tailstore.com

Export et suppression

Les utilisateurs ont le droit de :

• Accéder à leurs données (export CSV)
• Demander la suppression (bouton dans les résultats)

📱 Formulaire responsive

Configuration mobile

# Paramètres d'affichage
Afficher les étiquettes: Au-dessus
Largeur par défaut: 100%
Description position: Sous l'élément

Multi-étapes (Wizard)

Pour les formulaires longs :

1. Ajouter un élément Page wizard
2. Déplacer les éléments dans chaque page
3. Configurer les boutons Précédent/Suivant

🧪 Test et debug

Mode test

# Générer des soumissions test
ddev drush webform:generate contact 10

Voir les logs

Rapports → Journaux récents → Filtrer par “webform”

Debug tokens

Dans l’email, affichez tous les tokens :

[webform_submission:values]

📦 Exporter/Importer

Exporter la configuration

# Exporter un webform
ddev drush cex -y
# Fichiers dans config/sync/webform.webform.contact.yml

Importer

# Sur un autre environnement
ddev drush cim -y

✅ Checklist

• Webform installé et activé
• Formulaire de contact créé
• Email notification admin configuré
• Email confirmation client configuré
• Anti-spam activé (Honeypot)
• Formulaire intégré dans le site
• Export configuré
• Style personnalisé appliqué

🔜 Prochaine étape

Formulaires en place ! Découvrons les autres modules utiles.