La version 8.x de TYPO3 apporte bien évidemment sont lot de nouveautés à chaque release. La version 8.5 sortie en début d'année 2017 ne déroge pas à la règle. On va s'intéresser cette fois-ci à la refonte de l'extension "form". 

Introduction

Je vais faire une petite présentation de l'extension "form" côté back office. La précédente version de l'extension, encore disponible dans les versions 8.4 et antérieures propose une interface plutôt correcte pour ajouter facilement un formulaire de contact à votre site. Néanmoins, dès que ça vient compliqué, je préfère personnellement partir sur Powermail grâce à ses nombreux hooks, validators et finishers. Powermail offre un bon niveau de flexibilité dans son approche de traitement des messages publiés sur un site internet. Ces messages peuvent être stockés également dans le back office à titre d'archives. De plus, les mises à jour de Powermail sont fréquentes.

Parfois, on a pas besoin d'une telle extension pour un formulaire ne comportant que quelques champs. On préfère aussi utiliser des extensions moins lourdes, moins soumises aux problèmes de vulnérabilités même si les risques existent toujours.

Pour un projet sur une version 8.4.1 de TYPO3, j'étais parti sur un développement en Powermail car j'avais besoin d'un traitement spécifique à l'issue de l'envoi du mail, c'est à dire après la soumission du formulaire. Je devais formatter les données de telle sortes qu'elles puissent être correctement transmises à un CRM. Powermail me sortait des erreurs critiques, sans doute à cause d'une version de TYPO3 pas encore stable avant la sortie de la LTS prévue cette année. Ainsi, je suis parti sur un développement additionnel de l'extension form par l'ajout d'une extension "maison" pour étendre les possibilités de form. Le développement a été surtout compliqué parce que je ne connaissais pas ExtJS, le framework Javascript utilisé par l'ancienne version de form. ExtJS était à une époque le framework de référence pour TYPO3, c'est la raison de cet "héritage".

Nous n'en parlerons pas aujourd'hui mais plutôt dans un prochain article. Form, dans sa nouvelle version, a complétement abandonné ExtJS, ce qui est une très bonne chose.

L'extension form est une extension qui fait partie du Core de TYPO3, comme felogin par exemple, donc pas de problème de support de ce point de vue là. L'extension a été réécrite et la partie JS fonctionne désormais avec des composants Jquery.

 

Présentation

L'extension doit être installée depuis l'extension manager si ce n'est pas déjà fait.

Dans le back office, on remarque également un module dédié à la gestion des formulaires :

Pour afficher un formulaire, il faut d'abord procéder à sa création dans le back office, puis à l'appeler depuis un élément de contenu.

Nous allons centraliser les formulaires du site dans un même dossier système. L'ordre est très important dans le back office, ça évite de chercher les enregistrements dans l'arborescence même si on peut créer ce type d'enregistrement dans la page elle-même.

Cliquez sur le module "Forms" pour ajouter un premier formulaire.

Donnez un nom explicite et cliquez également sur la case à cocher pour avoir un aperçu des autres options de configuration. Cliquez ensuite sur "Suivant".

Vous pouvez soit commencer un nouveau formulaire, soit choisir de partir sur un modèle présent dans l'extension Forms.

On retrouve 3 colonnes.

1ère colonne : résumé des éléments constituant le formulaire, soit une page générale où l'on retrouve un champ "Name", un champ "Subject" et un champ textarea pour laisser un message. La seconde page est un résumé des informations saisies avant envoi définitif.

2ème colonne : les champs du formulaire

3ème colonne : le nom de la page, ici, "Contact Form". "Summary Page" est la seconde page.

Nous sommes en mode édition ; il suffit de cliquer sur un champ pour afficher dans la troisième colonne le nom de l'élément (le label), le placeholder, c'est à dire le texte qui s'affiche avant saisi et pour aider l'internaute à remplir chaque champ, la valeur par défaut du champ, si le champ est obligatoire ou nom et un validateur (champ numérique, type email, etc).

Au clic sur l'oeil, on quitte le mode édition.

Il est possible de compléter ce formulaire de base avec d'autres éléments. Ils sont classés selon plusieurs types.

Eléments basiques :

  • champ input text
  • champ textarea
  • champ password
  • champ password avancé (pour une confirmation au cas où l'on demande de saisir une nouvelle fois le mot de passe)

Eléments de selection :

  • case à cocher
  • sélection unique
  • bouton radio
  • champ de sélection multiple
  • élément de contenu

Elément container

  • fieldset

Prenons l'exemple d'une sélection multiple.

Vous pouvez effectuer un glisser-déposer pour déplacer le nouvel élément à l'endroit souhaité.

L'interface est assez explicite. On défini le label puis les différentes options à sélectionner.
Chaque option se rajoute très rapidement, sans rechargement de formulaire. A titre personnel, je trouve que la création est encore plus rapide que celle de Powermail.

On rajoute ensuite un élément de contenu :

Choisir "Formulaire par email" dans l'onglet "Formulaires".

Choisir le formulaire que nous venons de créer dans la tabulation "Plugin".

Je pense que vous aurez remarqué l'emplacement du fichier contenant la définition du formulaire, soit fileadmin/user_upload/contactform.yaml. La définition, sans surprise est au format yaml.

Dans finishers > options, nous retrouvons des options importantes comme le sujet du mail, l'adresse email, le nom de l'expéditeur, le contenu du champ CC/BCC, le format du mail, l'attachement possible de pièces jointes.

 

 

Dans renderables, nous avons la définition de chaque champ.

Les finishers sont des événements à configurer dans la première page du formulaire. Ici, nous configurons l'envoi du formulaire et ses différents paramètres.

Ce sont des paramètres que nous retrouvons bien évidemment dans le fichier contactform.yaml.

Voici l'apparence du formulaire sur la partie visible du site. N'hésitez pas à bien vider les caches - je trouve que le cache de TYPO3 est très performant sur les dernières versions de la 8.x

Tout semble fonctionner sauf le champs obligatoire sur les couleurs. On retourne dans le back office pour ajouter un validateur de type "Number of submitted values" ou "Nombre de valeurs envoyées". Voici ma configuration pour ce champ avec une option sélectionnée au minimum. Il ne m'a fallu que quelques secondes pour effectuer la correction. L'ergonomie du back office est vraiment bonne.

Au final, je n'ai pas eu d'erreur "visible" mais c'est probablement lié à ma css.

Voici l'aperçu des champs complétés avant validation.

Le message sera correctement reçu si l'adresse email indiquée par l'internaute n'est pas fantaisiste.

C'est une refonte réussie ! L'extension form est bien plus agréable à utiliser. Reste à savoir comment rajouter des options de validation ou de nouveaux finishers. C'est ce que nous verrons dans un prochain article.

Christian