Référence : Actions avec formulaire

Actions avec formulaires.

Nous avons vu quelques exemples d'actions de formulaire dans l'exemple de formulaire simple ci-dessus. Détaillons les actions que vous pouvez utiliser.

E-mail.

Envoie un e-mail avec les options spécifiées.

Exemple:

1 | process:
2 |   - email:
3 |      from: "{{ config.plugins.email.from }}"
4 |      to: "{{ config.plugins.email.to }}"
5 |      subject: "Contact by {{ form.value.name|e }}"
6 |      body: "{% include 'forms/data.html.twig' %}"

Envoie un e-mail à partir de l'adresse e-mail spécifiée dans la configuration du plugin Email, l'envoie à cette même adresse e-mail (c'est un formulaire de contact, nous nous l'envoyons). À moins que vous ne souhaitiez utiliser d'autres valeurs, vous pouvez librement omettre from et to, car ils sont déjà configurés par défaut pour utiliser ces valeurs. L'e-mail a l'objet et le corps définis. Dans ce cas, le corps est généré par le fichier forms/data.html.twig, qui se trouve dans le modèle actif (Antimatter et les autres thèmes principaux l'ont, mais il n'est pas garanti que tous les thèmes l'incluent).

Antimatter le met à

1 | {% for field in form.fields %}
2 |         <div><strong>{{ field.label }}</strong>:  {{ string(form.value(field.name)|e) }}</div>
4 | {% endfor %}

En bref, il boucle simplement les valeurs et les imprime dans le corps de l'e-mail.

Reportez-vous à la documentation du plug-in de messagerie pour d'autres options de messagerie de formulaire importantes, notamment les corps de message en plusieurs parties (bon pour les scores anti-spam), `reply_to` et les pièces jointes.

Attribut d'e-mail dynamique.

Si vous souhaitez par exemple définir le champ email.from à partir d'une entrée Form, vous pouvez récupérer son contenu et l'utiliser de cette manière :

from : "{{ form.value.email|e }}"

Dans ce cas, nous récupérons le champ "email" du formulaire et l'utilisons pour l'attribut "de". De cette façon, le propriétaire du site recevra un e-mail et pourra répondre directement à l'e-mail saisi dans le formulaire.

Redirection.

Redirige l'utilisateur vers une autre page. L'action est immédiate, donc si vous l'utilisez, vous devrez probablement la mettre en bas de la liste des actions.

1 | process:
2 |   - redirect: '/forms/landing-page'

Vous pouvez également définir tout ou partie du champ de redirection redirect à partir d'une entrée de formulaire ou d'un champ de formulaire masqué. Vous pouvez obtenir son contenu et l'utiliser de cette manière :

redirect: "/path to/location/{{ form.value.hiddenfield }}"

Dans ce cas, nous récupérons le champ "hiddenfield" du formulaire et l'utilisons pour la dernière partie de l'emplacement de redirection. Cela peut être utile lors de la création de formulaires qui, par exemple, redirigent vers un téléchargement une fois terminés.

Message.

Définit un message à afficher sur la page suivante. Fonctionne si vous définissez également une action d'affichage, qui redirige l'utilisateur vers une autre page. Notez que vous pouvez utiliser Twig dans le message si vous le souhaitez.

1 | process:
2 |   - message: Thank you for your feedback!
3 |   - display: thankyou

Message de validation.

Vous pouvez utiliser l'action de message pour déclencher en cas d'échec de la validation. Par example:

1 | username:
2 |    type: text
3 |    label: Username
4 |    validate:
5 |      required: true
6 |      message: My custom message when validation fails!

Cela vous permettra d'écrire un message personnalisé que les utilisateurs verront en cas d'échec de la validation.

Affichage.

Après avoir soumis le formulaire, l'utilisateur peut être redirigé vers une autre page. Cette page sera une sous-page du formulaire, donc par exemple, si votre formulaire se trouve dans /form, vous pouvez rediriger les utilisateurs vers /form/thankyou avec le code suivant :

1 | process:
2 |   - display: thankyou

Le plugin Form fournit un modèle de données de formulaire formdata adapté à la page de destination du processus, car il génère le résultat de la soumission du formulaire. Dans l'exemple ci-dessus, vous pouvez créer une page pages/form/thankyou/formdata.md.

Si vous redirigez vers une sous-page, display: thankyou fonctionne parfaitement. Si vous redirigez vers un chemin de page absolu, comme site.com/thankyou, faites-le précéder de /, par exemple : : /thankyou.

Antimatter et les thèmes compatibles fournissent le modèle formdata.html.twig Twig, qui ressemble à ceci :

1  | {% extends 'partials/base.html.twig' %}
2  | 
3  | {% block content %}
4  | 
5  |     {{ content|raw }}
6  | 
7  |     <div class="alert">{{ form.message|e }}</div>
8  |     <p>Here is the summary of what you wrote to us:</p>
9  | 
10 |     {% include "forms/data.html.twig" %}
11 | 
12 | {% endblock %}

Si la page thankyou/formdata.md est

1 - ---
2 | title: Email sent
3 | cache_enable: false
4 | process:
5 |     twig: true
6 | ---
7 | 
8 | ## Email sent!

La sortie sera une page avec le "Email envoyé!" titre, suivi d'un message de confirmation et des données du formulaire saisies dans la page précédente.

Vous pouvez utiliser n'importe quel type de page comme page de destination. Créez simplement le vôtre et définissez le type de page de destination en conséquence.

Sauvegarde.

Enregistre les données du formulaire dans un fichier. Le fichier est enregistré dans le dossier user/data, dans un sous-dossier nommé comme paramètre form.name. Le formulaire doit avoir un nom pour que cette action réussisse, et le sous-dossier doit être créé avec les autorisations appropriées avant que les données puissent y être enregistrées, car un nouveau répertoire ne sera pas créé s'il n'en existe pas. Par example:

Le préfixe de fichier fileprefixet le corps bodypeuvent contenir le balisage Twig.
1 | process:
2 |   - save:
3 |      fileprefix: feedback-
4 |      dateformat: Ymd-His-u
5 |      extension: txt
6 |      body: "{% include 'forms/data.txt.twig' %}"
7 |      operation: create

Le corps est tiré du fichier templates/forms/data.html.twig du thème, fourni par Antimatter et des thèmes mis à jour.

L'opération operation peut être soit créer create(par défaut) pour créer un nouveau fichier par soumission de formulaire, soit ajouter add pour ajouter à un seul fichier.
Notez que l'opération d'ajout nécessite maintenant un nom de fichier statique : à définir, voir l'exemple ci-dessous.
1 | process:
2 |   - save:
3 |      filename: feedback.txt
4 |      body: "{% include 'forms/data.txt.twig' %}"
5 |      operation: add

Captcha.

Pour valider également le captcha côté serveur, ajoutez l'action de processus captcha.

1 | process:
2 |   - captcha:
3 |   recaptcha_secret: ENTER_YOUR_CAPTCHA_SECRET_KEY
Le recaptcha_secret est facultatif et utilisera les valeurs de configuration du plugin Form si vous les avez fournies ici.

Adresse IP de l'utilisateur.

Affichez l'adresse IP de l'utilisateur sur la sortie. Placez-le au-dessus des processus d'e-mail / de sauvegarde dans le 'form.md' pour vous assurer qu'il est utilisé par le ou les processus de sortie.

1 | process:
2 |   - ip:
3 |      label: User IP Address

Horodatage.

Ajoutez un horodatage de soumission de formulaire à la sortie. Placez-le au-dessus des processus d'e-mail / de sauvegarde dans le 'form.md' pour vous assurer qu'il est utilisé par le ou les processus de sortie.

process:
- timestamp:
    label: Submission Timestamp

Réinitialiser le formulaire après envoi.

Par défaut, le formulaire n'est pas effacé après l'envoi. Ainsi, si vous n'avez pas d'action d'affichage displayet que l'utilisateur est renvoyé à la page de formulaire, celle-ci est toujours remplie avec les données saisies. Si vous voulez éviter cela, ajoutez une action de réinitialisation reset :

1 | process:
2 |   - reset: true

Mémoriser les valeurs des champs.

À l'aide de l'action mémoriser remember, vous pouvez autoriser vos utilisateurs à "rappeler" certaines valeurs de champ depuis la dernière fois qu'un formulaire a été soumis. Ceci est particulièrement utile pour les formulaires qui sont soumis à plusieurs reprises, comme une soumission anonyme qui nécessite des informations sur l'expéditeur.

HTML5 et le plugin Grav's Form le fournissent déjà de manière limitée via le navigateur, alors utilisez-le. Cependant, vous pouvez constater que la saisie semi-automatique ne fonctionne pas de manière fiable pour certains utilisateurs et champs.
L'action de mémorisation rememberutilise des cookies pour stocker la dernière valeur, elle ne fonctionnera donc que sur le même appareil et navigateur où le navigateur est configuré pour les autoriser à partir de votre site.

Pour utiliser cette action, listez simplement les noms des champs que vous souhaitez mémoriser.

Par exemple, un formulaire de recommandation médicale en ligne est un bon cas d'utilisation. Ceux-ci sont généralement remplis à partir du même ordinateur avec certaines valeurs de champ qui changent rarement et sont ennuyeuses à remplir à plusieurs reprises.

1 | process:
2 |   - remember:
3 |      - referrer-name
4 |      - referrer-address
5 |      - referrer-specialty
6 |      - preferred-practitioner    

Actions personnalisées.

Vous pouvez vous "accrocher" à un traitement de formulaire et effectuer n'importe quel type d'opération. Effectuez un traitement personnalisé, ajoutez des données pour une application Web en ligne, et même enregistrez-les dans une base de données.

Pour ce faire, dans le champ de traitement du formulaire, ajoutez votre propre nom d'action de traitement, par exemple "votreaction".

1 | process:
2 |    yourAction: true

Ensuite, créez un plugin simple.

Dans son fichier PHP principal, inscrivez-vous à l'événement onFormProcessed

1  | namespace Grav\Plugin;
2  | use Grav\Common\Plugin;
3  | use RocketTheme\Toolbox\Event\Event;
4  | 
5  | class EmailPlugin extends Plugin
6  | {
7  |     public static function getSubscribedEvents()
8  |     {
9  |         return [
10 |             'onFormProcessed' => ['onFormProcessed', 0]
11 |         ];
12 |     }
13 | }

Fournissez ensuite un gestionnaire pour l'action saveToDatabase :

1  | public function onFormProcessed(Event $event)
2  |     {
3  |         $form = $event['form'];
4  |         $action = $event['action'];
5  |         $params = $event['params'];
6  | 
7  |         switch ($action) {
8  |             case 'yourAction':
9  |                 //do what you want
10 |         }
11 |     }

Si votre traitement risque de mal tourner et que vous souhaitez arrêter les prochaines actions de formulaire, qui sont exécutées en série, vous pouvez arrêter le traitement en appelant stopPropagation sur l'objet $event :

1 | $event->stopPropagation();
2 | return;

Un exemple de code avec la gestion des formulaires est disponible dans le plug-in Form et dans les référentiels du plug-in Email.

Un exemple de gestion de formulaire personnalisé.

Le plugin Form offre cette possibilité d'envoyer des e-mails, d'enregistrer des fichiers, de définir des messages d'état et c'est vraiment pratique. Parfois, cependant, vous avez besoin d'un contrôle total. C'est par exemple ce que fait le plugin Login.

Il définit le frontmatter de la page login.md :

1  | title: Login
2  | template: form
3  | 
4  | form:
5  |     name: login
6  | 
7  |     fields:
8  |         - name: username
9  |           type: text
10 |           placeholder: Username
11 |           autofocus: true
12 | 
13 |         - name: password
14 |           type: password
15 |           placeholder: Password

Le plugin Forms génère et affiche correctement le formulaire. Notez qu'aucun processus processn'est défini.

Les boutons de formulaire buttons manquent également, car ils sont ajoutés manuellement dans templates/login.html.twig. C'est là que l'action action et la tâche task du formulaire sont également définies.

Dans ce cas, task est login.login et l'action action est définie sur l'URL de la page.

Lorsqu'un utilisateur appuie sur "Connexion" dans le formulaire, Grav appelle l'événement onTask.login.login.

user/plugins/login/login.php se connecte à onTask.login.login à son fichier classes/controller.php, et c'est là que l'authentification se produit.