Procédure : formulaires dans des pages modulaires
Utiliser des formulaires dans des pages modulaires.
Si votre thème ne fournit pas de fichier templates/forms/form.html.twig
, il n'est pas configuré pour utiliser des formulaires, mais pas de panique - copiez simplement les modèles de formulaire depuis Antimatter, le thème Grav par défaut :
- templates/form.html.twig
- templates/formdata.html.twig
Maintenant, créez un dossier modulaire avec le type de page form.md
.
Par exemple : 01.votre-page-modulaire/_contact/form.md
.
La page form.md
ne contiendra aucune définition de formulaire. C'est juste une indication que c'est la partie qui doit générer le formulaire.
Important : réglez
1 | ---
2 | cache_enable: false
3 | ---
dans cet en-tête de page frontmatter, en raison du fonctionnement des pages modulaires, si vous l'oubliez, le formulaire sera mis en cache, ainsi que le nonce généré toutes les 12 heures. Ainsi, lorsque le changement de 12 heures est atteint, le formulaire cesse de fonctionner jusqu'à ce que le cache soit actualisé. Cette étape n'est pas nécessaire pour les formulaires de page autonomes.
Ajoutez maintenant l'en-tête du formulaire à la page modulaire principale, modular.md
.
La page modular.md doit contenir toute la définition du formulaire, avec les champs, etc., comme s'il s'agissait d'un en-tête de fichier form.md "pleine page". Avec son propre chemin de page comme champ form.action
.
Par exemple:
1 | ---
2 | content:
3 | items: '@self.modular'
4 |
5 | form:
6 | action: /your-modular-page
7 | name: my-nice-form
8 | fields:
9 | -
10 | name: name
11 | label: Name
12 | placeholder: 'Enter your name'
13 | autofocus: 'on'
14 | autocomplete: 'on'
15 | type: text
16 | default: test
17 |
18 | buttons:
19 | -
20 | type: submit
21 | value: Submit
22 |
23 | process:
24 | -
25 | message: 'Thank you for your feedback!'
26 |---
Dans l'en-tête du formulaire, assurez-vous d'ajouter le paramètre d'action action
, avec la route de page modulaire.
Comme présent dans l'exemple ci-dessus. Cette étape est nécessaire car si vous n'ajoutez pas explicitement form.action
, le code recherche généralement l'itinéraire de la page, mais étant le formulaire dans une sous-page modulaire, pas une page réelle, le chemin est erroné et interrompt la soumission du formulaire.
Donc, si la page modulaire est par ex. site.com/my-page
, il suffit de mettre form: action: /my-page
dans modular.md
. Même si la page modulaire est la page d'accueil, utilisez la route de la page, par ex. form : action : /home
.
Un exemple vivant.
Le squelette Deliver a une page de formulaire modulaire prête à être consultée lors de la lecture de ce didacticiel :
Dépannage des formulaires dans les pages modulaires.
La meilleure façon de dépanner un formulaire est de revenir d'abord aux racines et d'ajouter vos personnalisations une par une pour voir ce qui ne va pas.
- Je suggère de créer un "formulaire régulier", en veillant à ce qu'il fonctionne, puis essayez de le mettre sous une forme modulaire.
- Essayez de faire fonctionner le formulaire sur un squelette basé sur l'antimatière, qui fournit tous les fichiers dont vous avez déjà besoin.
- Si les champs du formulaire n'apparaissent pas, si vous avez installé le plugin Assets désactivez-le/désinstallez-le. Il y a un problème connu avec la rupture des formulaires modulaires qui sera bientôt corrigé.