Créer des Formulaires Personnalisés avec WebBlocks Forms
Construisez le formulaire autour des questions utiles aux visiteurs. WebBlocks Forms permet de choisir champs, validation, étapes et questions conditionnelles, puis de recueillir les résultats dans votre CMS. Un bloc Form natif place le formulaire sur la page ; la boîte du plugin conserve les envois.
L'exemple est Northstar Studio et Project enquiry. La première étape demande qui écrit et quel projet est envisagé. Website project révèle une question obligatoire sur le site. La seconde recueille description, budget et fichier facultatifs, ainsi qu'une acceptation. Vous enverrez comme visiteur, lirez les réponses, téléchargerez la pièce privée, marquerez la demande comme traitée et exporterez un CSV.
Ce parcours a été vérifié avec l'archive publiée Forms 0.10.5 et WebBlocks CMS 1.105.26, interface anglaise, thème clair et données fictives. Il comprend l'intégration explicite du fournisseur de services dans l'hôte nécessaire au ZIP testé. Notification et copie visiteur affichent volontairement Not configured : livraison réelle, webhook externe et abonnement Campaigns n'ont pas été testés. Parcours, conditions, étapes, téléchargement privé, états, CSV et import Contact Form ont été exécutés localement. Les captures et noms des contrôles restent en anglais pour correspondre aux écrans.
Choisir Forms ou Contact Form intégré
| Choix | Quand l'utiliser | Destination |
|---|---|---|
| Contact Form natif | Champs standards nom, email, sujet et message. | Contact Messages. |
| WebBlocks Forms | Champs propres, choix, étapes, conditions ou pièces jointes. | Forms → Submissions. |
Forms ne remplace pas Contact Form. Les deux peuvent coexister avec des boîtes séparées. L'import crée un nouveau formulaire du plugin ; il ne déplace pas les anciens messages et ne modifie pas le bloc d'origine.
Un formulaire appartient à un site. Champs, traitement et actions lui appartiennent ; le bloc de page conserve son handle. Plusieurs pages partagent la même définition. Modifier un champ affecte toutes les instances, sans créer de copie par page.
Consultez la référence Forms pour le paquet et les contrats, ou Ajouter un formulaire de contact et lire les messages pour l'alternative simple.
Avant de commencer
Préparez site de test, brouillon et compte Super admin. Forms 0.10.5 déclare CMS ^1.92.1 et PHP >=8.3 ; le catalogue indique PHP ^8.3 et Laravel ^13.0. Vérifiez votre hôte et les exigences CMS. Les extensions PHP JSON et ZIP sont requises.
Cinq droits distinguent consultation, gestion des formulaires, gestion des réponses, export et Form Settings. Construire un formulaire n'accorde pas automatiquement sa boîte ou ses exports. Attribuez droits et sites adaptés ; consultez Rôles et autorisations.
Prévoyez l'administrateur d'hébergement pour le fournisseur, le stockage privé, le courrier et la conservation planifiée. Le courrier local suffit pour apprendre ; vérifiez la vraie livraison avant de promettre une réponse email. Utilisez des boîtes contrôlées, pas les adresses fictives suivantes.
Le plugin est gratuit dans le catalogue WebBlocks. Commerce, Appointments, Memberships et Campaigns ne sont pas nécessaires ici. Une réponse de budget ne devient ni paiement ni rendez-vous.
1. Installer Forms et intégrer l'hôte
- Connectez-vous comme Super admin et ouvrez System → Plugins.
- Choisissez Browse Plugin Catalog, puis WebBlocks Forms.
- Vérifiez version, compatibilité et notes.
- Choisissez Install from Catalog pour la version compatible, puis Enable Plugin dans les détails.
- Avec un ZIP fiable fourni, utilisez Plugin ZIP → Upload Plugin ZIP, vérifiez et activez.
Les nouveaux paquets sont désactivés au départ. Installation et activation actuelles préparent les changements de base. Si Plugin migrations pending apparaît, corrigez la préparation dans les détails et vérifiez les tables. Pas de compilation nécessaire par catalogue ou ZIP du panneau.
Le groupe Forms reçoit Forms, Submissions, Import Contact Form et Settings. Choisissez Northstar Studio ou le site prévu dans les sélecteurs disponibles. Des tables saines ne prouvent pas soumission publique, courrier ou tâche de conservation.
Étape d'hébergement pour le ZIP testé
Avec Forms 0.10.5 / CMS 1.105.26, éditeur et bloc étaient disponibles mais le fournisseur ne démarrait pas automatiquement. L'envoi public échouait faute de limiteur nommé enregistré. L'hôte fonctionnel enregistre explicitement le fournisseur actif ; cela fait partie de l'installation, pas seulement des captures.
L'administrateur ajoute le code dans la méthode boot() existante de App\Providers\AppServiceProvider de l'hôte. Conservez la logique déjà présente. Le registre n'enregistre que lorsque Forms est actif :
$this->app->booted(function (): void {
$registry = $this->app->make(
\WebBlocks\Cms\Support\Plugins\PluginRegistry::class
);
if ($registry->isActive('webblocks-forms')) {
$provider = $registry->get('webblocks-forms')?->providerClass();
if ($provider !== null && class_exists($provider)) {
$this->app->register($provider);
}
}
});
Nettoyez la configuration obsolète avec php artisan optimize:clear et redémarrez les workers persistants si nécessaire. Testez ensuite un vrai envoi. Cela charge aussi configuration, fichiers et temps de Forms. Si un hôte récent démarre déjà le fournisseur, vérifiez avant une seconde intégration inutile. Ne retirez pas le limiteur pour masquer l'échec.
2. Examiner Form Settings du site
Ouvrez Forms → Settings sur le site prévu. Exemple :
| Paramètre | Exemple | Sens |
|---|---|---|
| Default notification recipient | hello@example.test | Boîte fictive sans destinataire explicite du formulaire. |
| Store submissions in the CMS | Activé | Vérifiez et activez aussi explicitement sur le formulaire. |
| Delete submissions after (days) | Vide | Pas de période du site pour cet exercice. |
| Maximum upload size (KB) | 2048 | Limite du site, plafonnée par l'installation. |
Choisissez Save. Un destinataire vide est valide : priorité à Send notifications to du formulaire, puis ce défaut, Contact du site, CONTACT_RECIPIENT_EMAIL, enfin expéditeur configuré. Choisissez la vraie destination plutôt qu'un dernier repli involontaire.
Cette version lit stockage et conservation dans chaque formulaire. Changer les paramètres du site homonymes ne met pas automatiquement à jour les formulaires existants ni leur suppression. Réglez et vérifiez leur propre Handling. Repli des destinataires et limite du site s'appliquent à l'exemple.
3. Créer le formulaire et son traitement
Ouvrez Forms → Forms → Add form. Mettez Project enquiry en Name, northstar-project-enquiry en Handle et gardez Accepting submissions coché.
Le handle emploie des mots minuscules séparés d'un seul tiret. Les blocs le stockent : fixez-le avant placement. Nom et handle diffèrent ; changer ce dernier déconnecte les placements jusqu'à leur mise à jour. En multisite, utilisez des handles distincts dans l'installation et testez chaque destination ; ce contrôleur public résout par handle.
Dans Handling, gardez Store submissions in the CMS actif, Store the submitter's IP address inactif et Delete submissions after (days) vide. Réglez Submits per minute, per visitor à 5. Laissez Redirect after submit vide pour voir le résultat sur place.
Choisissez Save. Le stockage est essentiel : le désactiver empêche dossier et actions après envoi dans cette version. Ce n'est pas un mode pris en charge pour un formulaire uniquement email. La collecte IP est distincte des signaux temporaires de protection locale.
Un plafond inférieur resserre celui de l'installation ; un supérieur ne l'augmente pas. Il est par visiteur et formulaire. Une redirection doit être un chemin du site avec une seule barre initiale, comme /thank-you ; préparez et testez la cible. Laissez vide pendant cette vérification.
4. Configurer notification et copie visiteur
Trouvez Notification. Gardez Email me when a submission arrives coché et Send notifications to vide pour le repli du site. Un destinataire explicite sert à une autre boîte responsable.
Sous Reply to sender, activez Send the visitor a copy of what they submitted. Utilisez une adresse réelle suivie dans Visitors reply to ; l'image montre studio@example.test. Vide signifie aucun en-tête reply-to. Choisissez Save.
La copie exige un champ Email address avec adresse valide envoyée. Un texte nommé « Email » n'est pas équivalent. Gardez un seul champ clair. Les résultats indépendants ne prouvent pas la réception sans test réel.
Gardez Webhooks et Mailing list désactivés pendant l'apprentissage. Ce sont des actions facultatives, pas des conditions de collecte. Nous y reviendrons après la boîte.
5. Ajouter les huit champs
Après sauvegarde, Fields propose Add field. Ajoutez ces enregistrements. Un même Step partage l'écran ; Up et Down ordonnent dans l'étape.
| Libellé | Type | Key | Step | Obligatoire |
|---|---|---|---|---|
| Your name | Single-line text | full_name | 1 | Oui |
| Email address | Email address | 1 | Oui | |
| Project type | Dropdown | project_type | 1 | Oui |
| Current website | Single-line text | current_website | 1 | Oui, seulement si la condition correspond |
| Tell us about your project | Paragraph | brief | 2 | Oui |
| Indicative budget (EUR) | Number | budget | 2 | Non |
| Attach a short brief | File upload | brief_file | 2 | Non |
| I agree that Northstar Studio may use these details to respond to my project enquiry. | Consent | enquiry_consent | 2 | Oui |
Pour Your name, choisissez Single-line text, Key full_name, Required, Step 1. Dans Validation : Minimum 2, Maximum 100. Sous Copy → EN English, Label Your name, Help text How should we address you?. Enregistrez.
Les clés commencent par une lettre et utilisent minuscules, chiffres et underscores. Les libellés sont visibles ; les clés identifient réponses, conditions et intégrations. Après des envois, les clés existantes se verrouillent. Choisissez-les stables dès maintenant.
L'éditeur affiche les paramètres de plusieurs types ; seuls les applicables agissent. Minimum/Maximum signifie longueur pour texte et Paragraph, valeur pour Number, taille KB pour Maximum de fichier. Utilisez 20–2000 caractères pour la description et 500–50000 pour le budget facultatif. C'est une réponse, pas un prix ou encaissement.
Autres types : Phone number, Radio buttons, Checkboxes, Date, Hidden value. Radio choisit un, Checkboxes plusieurs. Les champs cachés ne sont pas fiables pour droits, paiement ou décisions hors du contrôle du visiteur.
6. Séparer valeurs et libellés d'options
Pour Project type, choisissez Dropdown, clé project_type, obligatoire et Step 1. Dans Options, une valeur stable par ligne :
branding
website
other
Sous Copy → EN English, Label Project type, Help text Choose the closest match., puis Option labels dans le même ordre :
Brand identity
Website project
Something else
Enregistrez. Le visiteur voit Website project mais envoie website. Une condition compare la valeur, pas la traduction. Ne réordonnez pas une zone sans l'autre : les positions sont associées à l'enregistrement. Un libellé vide affiche la valeur stockée.
Chaque langue active offre Label, Placeholder, Help text, Error message et Option labels. Remplissez la principale et vérifiez les langues proposées. Traduire la page ne traduit pas les champs du plugin. Error message peut remplacer plusieurs erreurs : le texte doit aider pour valeur invalide et obligation vide.
7. Rendre Current website conditionnel
Créez Current website comme Single-line text obligatoire, clé current_website, Step 1, Maximum 255. Enregistrez, rouvrez si besoin et trouvez When to show this field :
- Depends on : project_type.
- Condition : is.
- Value : website.
- Help text anglais : Your existing address, or write Not launched yet.
- Choisissez Save.
Le contrôleur doit être à la même étape. Créez-le d'abord et vérifiez l'étape du dépendant avant sélection. Il existe aussi is not, has any answer, has no answer ; les deux derniers ignorent Value. Évitez les cycles et testez les branches après changement.
Avec JavaScript, Website project révèle la question et rétablit son obligation ; les autres choix la cachent. Le serveur revérifie : un champ non demandé n'est ni validé ni stocké même si une valeur supplémentaire est envoyée. Sans JavaScript tout reste visible ; le navigateur peut exiger une réponse malgré une condition serveur fausse. Prévoyez un repli tel que « Not applicable » et testez ; le serveur écarte cette réponse. Ce mode a été testé anonymement ainsi que le formulaire amélioré.
C'est Single-line text, pas une recherche automatique du site. Maximum limite la longueur sans vérifier l'existence. Not launched yet est volontairement permis.
8. Ajouter pièce privée et acceptation
Créez Attach a short brief avec File upload, clé brief_file, Step 2, facultatif. Maximum 2048, Minimum vide. Expliquez documents et taille dans Help text anglais, puis enregistrez.
Le plus petit plafond positif gagne entre installation, Form Settings du site et champ. Ici 10240 KB d'installation sont réduits à 2048 KB par site et champ. PHP/serveur peuvent limiter davantage. Si le fichier échoue avant une erreur utile, faites vérifier ces limites.
Les extensions viennent de la configuration Forms de l'installation ; Options n'est pas une liste de fichiers autorisés. La politique standard admet documents courants, images et ZIP et le serveur contrôle le contenu. northstar-brief.txt est fictif. Les pièces utilisent le stockage privé du plugin, pas Media Library publique, avec liens autorisés courts.
Ajoutez Consent, clé enquiry_consent, Step 2, Required activé, avec le texte de la table en Label. Consent conserve le texte accepté dans l'instantané ; Checkboxes générique n'est pas équivalent. Adaptez le texte à l'usage réel et fournissez les informations avant envoi. Cette acceptation de demande n'est pas un abonnement newsletter.
9. Placer Form natif sur un brouillon
Créez Start a studio project sur le même site. Ajoutez titre et explication avec des blocs normaux. L'exemple dit Tell us what you have in mind. We review enquiries before arranging any work.
Dans Main : Add Block → Form, Block Fields, Project enquiry sous Form, puis Save Block. Ouvrez Preview de la page sauvegardée.
Le bloc choisit le formulaire actif par handle. Absent, inactif, non sélectionné ou sans champ, il ne s'affiche pas. Vérifiez site et acceptation si le sélecteur est vide.
Cette version n'a pas de panneau général titre/intro/bouton/succès pour un nouveau formulaire. L'exemple emploie blocs de page et valeurs Send, Thank you. Your message has been received. Ne cherchez pas les champs Contact Form dans ce bloc. L'importateur conserve séparément les textes importés.
L'aperçu instantané ne prend pas en charge ces formulaires ; sauvegardez et utilisez l'aperçu de page. Y envoyer crée un vrai enregistrement. Utilisez test et données fictives. Évitez deux occurrences du même formulaire sur une page : identifiants et progression de session dépendent du formulaire, pas du placement.
10. Terminer les étapes comme visiteur
Ouvrez l'aperçu sauvegardé ou la page locale vérifiée. Step 1 of 2 demande Your name, Email address et Project type. Current website commence caché.
Entrez Example visitor, visitor@example.test, choisissez Website project. Current website apparaît ; entrez Not launched yet ou une adresse fictive adaptée.
Choisissez Continue. Step 2 of 2 apparaît. Aucun dossier n'est encore stocké ; les réponses restent en session jusqu'à la fin. Abandonner n'est pas terminer. Cookies et continuité de session doivent fonctionner.
Écrivez au moins 20 caractères, par exemple We are planning a small website for a neighbourhood craft workshop and would like to discuss the structure. Utilisez budget 2500, petit fichier fictif et acceptation. Back revient ; contrôlez les réponses après changement de branche.
Choisissez Send une fois. Le succès normal remplace le formulaire :
Testez au rythme humain. Chaque étape a un nouveau contrôle temporel ; un post automatisé trop rapide peut montrer le succès sans dossier. La bannière ne prouve ni stockage ni courrier. Retrouvez la demande exacte dans la boîte.
Avant ouverture, testez autre branche, réponse obligatoire absente, budget hors plage et fichier interdit/trop gros. Sans JavaScript, terminez les étapes serveur et vérifiez qu'une réponse de branche fausse est écartée.
11. Lire les réponses et gérer l'état
Ouvrez Forms → Submissions du site, choisissez Project enquiry dans Form, puis Apply. Search cherche dans les réponses, Status filtre, Reset efface. La liste présente réception, formulaire, état et notification.
Choisissez Open. New devient Read à l'ouverture. Les libellés viennent de l'instantané et les Attachments sont présentées. Les options peuvent apparaître comme website, valeur stockée, plutôt que libellé. Consent montre l'acceptation et son texte.
Utilisez Download. Outre sa signature courte, le lien exige authentification et droit de gestion des réponses. S'il expire, rouvrez le détail. Ne publiez pas les liens privés ni captures de leur URL complète.
| État | Usage |
|---|---|
| New | Travail non ouvert. |
| Read | Ouvert, pas nécessairement répondu. |
| Replied | Après réponse réelle par votre canal habituel. |
| Archived | Classé ; n'entraîne pas le filtre. |
| Quarantined | Retenu pour contrôle ; actions supprimées. |
| Spam | Abus conservé comme spam ; actions supprimées. |
Après réponse, choisissez Replied, Save. C'est un état, pas une rédaction ou un envoi de message. Supprimer est définitif. Téléchargez le nécessaire et appliquez votre conservation avant suppression volontaire.
12. Vérifier chaque livraison
Sous Delivery, Notification et Reply to sender sont séparés. Mailing list: Skipped indique l'action facultative éteinte. La page source figure séparément.
| Résultat | Sens |
|---|---|
| Sent | Accepté par le transport ; ne prouve ni réception ni lecture. |
| Failed | Tentative échouée ; vérifier détail, destination ou transport. |
| Skipped | Omission voulue, par exemple désactivation. |
| Not configured | Prérequis absent ; log local n'est pas livraison réelle. |
| Aucune tentative | Rien tenté ; vérifier stockage, protection et actions. |
Le stockage précède les actions. Mauvaise adresse ou panne n'annule pas le dossier. Les deux résultats peuvent différer. Configurez vrai courrier CMS et expéditeur et testez les deux boîtes contrôlées. Modifier état ou paramètres ne rejoue pas l'envoi initial ; il n'y a pas de renvoi ici.
Local protection · last 30 days résume les décisions du site. Les suspects peuvent être conservés tandis que mails, copies, webhooks et Campaigns sont supprimés. Marquez les vrais abus Spam ; restaurer un faux positif en New, Read ou Replied enregistre une correction. Cela ne rejoue pas automatiquement les actions supprimées.
13. Exporter le formulaire choisi en CSV
Dans Submissions, choisissez Project enquiry, filtres Status/Search et Apply, puis Export CSV. Droit séparé et formulaire sélectionné sont requis ; All forms ne définit pas de colonnes communes.
L'export contient dossiers filtrés, ID, date, état et réponses. Les pièces apparaissent par nom, sans octets joints ni lien public permanent. Téléchargez-les depuis le détail autorisé.
Les en-têtes viennent du premier instantané exporté ; les lignes s'alignent par clé. En cas d'évolution importante, vérifiez les colonnes : un champ récent absent du premier instantané n'est pas ajouté automatiquement. UTF-8 avec BOM facilite les tableurs.
Le CSV a quitté le contrôle d'accès CMS. Utilisez l'import sécurisé du tableur, surtout pour du texte non fiable. Comparez nombre de lignes, réponse connue et nom de pièce avec la boîte avant usage.
14. Importer un Contact Form existant
Ouvrez Forms → Import Contact Form du site, trouvez la page et choisissez Import une fois. Les blocs brouillons sont inclus, comme sur l'image.
Il crée quatre questions, les langues présentes, titre/intro/bouton/succès, consentement et notification. Lisez les notes. Destinataire hérité et notification désactivée gardent leur état. Le consentement absent peut être repris de la langue principale : vérifiez-le. Le formulaire importé stocke même si l'ancien bloc indiquait le contraire.
L'original continue intact ; Contact Messages reste séparé. Vérifiez champs, textes, consentement et livraison, puis remplacez en brouillon ou mise à jour préparée. Importer seul ne change pas le public. Répéter crée un autre formulaire au lieu de mettre à jour la première copie.
15. Ajouter consciemment les intégrations facultatives
Dans Webhooks, entrez Endpoint URL, configurez Signing secret privé, activez et sauvegardez. Le récepteur doit comprendre le JSON signé. Utilisez votre cible HTTPS publique ; réseau privé et HTTP non sécurisé sont bloqués par défaut. Gardez les secrets hors textes, images et notes partagées.
Plusieurs webhooks sont possibles. Vider une URL retire l'action tout en préservant les livraisons passées. Un secret vide sur une action existante garde celui stocké. Vérifiez résultat et récepteur : sauvegarder l'URL n'est pas un test réussi. Ce guide n'envoie pas vers l'extérieur.
Pour newsletter, installez WebBlocks Campaigns compatible, activez-le, préparez courrier/liste et utilisez Mailing list → Offer a newsletter subscription. Email utilisable et Consent accepté sont requis. Vérifiez lequel : l'acceptation de cette demande ne sollicite pas de marketing. Préférez un formulaire dédié avec texte explicite à l'activation inchangée de l'exemple.
Renseignez List id seulement pour une liste précise ; vide utilise le défaut du site. Les noms facultatifs se mappent par clé. Campaigns exige confirmation email, sans contournement du double opt-in. En son absence la demande peut fonctionner et l'action afficher Not configured. Ne déclarez pas d'abonnement avant test réel de confirmation.
16. Maintenir formulaire et conservation
Décochez Accepting submissions pour une pause. Les pages ne montrent plus le formulaire : prévoyez une alternative. Supprimer un formulaire avec réponses le désactive et préserve l'historique ; sans réponses il peut être effacé.
Libellés, types et ordre changent pour les prochains visiteurs ; les anciens dossiers gardent leurs instantanés. Retirer un champ arrête la question sans effacer les réponses passées. Les clés existantes sont fixes après envoi. Retestez conditions, colonnes et langues après restructuration.
Réglez Delete submissions after (days) sur le formulaire après décision de durée. Par défaut, aucune fenêtre. L'administrateur doit simuler :
php artisan webblocks-forms:prune-submissions --dry-run
Puis planifier la vraie commande via scheduler hôte ou cron après vérification :
php artisan webblocks-forms:prune-submissions
Un scheduler Laravel actif ne la programme pas seul : ajoutez la tâche. Elle traite plusieurs formulaires ; revoyez toutes les fenêtres avant exécution réelle. Elle supprime pièces et dossiers expirés, et temporaires abandonnés. Un parcours interrompu peut déjà avoir des fichiers temporaires sans dossier final.
Dépannage
| Symptôme | Vérifier d'abord |
|---|---|
| Forms absent | Plugin compatible actif, base, droits et site. |
| Continue/Send échoue après ZIP | Fournisseur hôte, configuration et limiteur nommé. |
| Sélecteur vide | Site de page, formulaire actif et contexte. |
| Aucun formulaire sur la page | Handle, Accepting submissions, champs, sauvegarde et plugin. |
| Current website absent | Même étape, valeur website exacte, condition et JavaScript. |
| Obligatoire caché bloque | Condition, script et page sauvegardée ; le serveur doit résoudre la branche. |
| Continue reste sur place | Validation, session/cookies, temps et étape attendue. |
| Succès sans dossier | Site/filtres, stockage, fin du parcours et protection/temps. |
| Mail Not configured | Transport, destinataire et Email address pour la copie. |
| Conservation du site sans effet | Régler le Handling propre au formulaire. |
| Pièce refusée | Contenu/extension, plafonds champ/site/installation et PHP/serveur. |
| Téléchargement privé échoue | Expiration, connexion/droits, site et fichier. |
| Colonnes CSV manquantes | Formulaire/filtres et premier instantané historique exporté. |
| Newsletter sans action | Campaigns actif, site/liste, email et consentement explicite accepté. |
| Anciennes étiquettes dans les dossiers | Normal : l'instantané conserve la question d'origine. |
Contrôle final avant ouverture
Vérifiez installation, fournisseur et rôles, handle, stockage, deux destinations, types, obligations, libellés, conditions, fichiers et acceptation. Complétez les branches au rythme normal, trouvez les dossiers, téléchargez en privé et comparez CSV et boîte.
Testez visiteur anonyme, téléphone et sans JavaScript. Vérifiez courrier réel séparément, intégrations et simulation de conservation. Publiez après ces contrôles, puis répétez sur HTTPS public et dans chaque langue proposée.
Continuez avec référence Forms, guide Contact Form, Publier une page, Menus de navigation ou Rôles et autorisations.