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

📦 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

Créer le webform
- Titre : Formulaire de contact
- ID machine : contact
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 ✅

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	✅

Configurer le sujet

Options :

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

Enregistrer

📧 Configuration des emails

Email de notification admin

Allez dans Paramètres → Emails/Gestionnaires
Ajouter un gestionnaire → Email

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]

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

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

# 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

Structure → Mise en page des blocs
Placer un bloc dans la région souhaitée
Chercher Webform
Sélectionner le formulaire
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 :

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

Ajouter au webform :

Élément → CAPTCHA
Type : reCAPTCHA

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.

📊 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 :

Ajouter un élément Page wizard
Déplacer les éléments dans chaque page
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.