Utiliser les formulaires ACF en front • Formation WordPress Capitaine WP

Formation « Développer un thème WordPress sur mesure »

Utiliser les formulaires ACF en front

Lecture :4 minutes •3

Jusqu’à maintenant, on a vu comment créer des groupes de champs dans l’interface d’administration de WordPress. Mais savez-vous qu’il est possible de faire des formulaires en front ?

Vous pouvez tout à fait créer un formulaire en vue de l’afficher sur votre site. Il peut y avoir plusieurs intérêts à cela :

  • Vous pourriez par exemple permettre à un utilisateur connecté de modifier des informations directement depuis le site ;
  • Vous pourriez également faire un formulaire d’inscription sur mesure pour ajouter une nouvelle entrée.

On va voir les deux cas. Dans le premier, on affichera simplement le formulaire de la page en cours.

Et dans le second cas, on imaginera un formulaire pour qu’un professionnel s’inscrive sur un annuaire web. Cela créera une nouvelle entrée au lieu de modifier le contenu de la page actuelle.

Cas n°1 : modifier le contenu de la page

Pour ce premier cas, on va afficher notre formulaire ACF directement dans notre page du site. Alors bien sûr, si on ne fait pas de contrôle, n’importe quel internaute pourrait modifier la page. bonjour la faille de sécurité !

On va donc limiter cette possibilité aux auteurs du site seulement.

Et pour afficher le formulaire d’une page sur le site, vous allez voir que c’est extrêmement simple. Pour l’occasion j’ai créé un groupe de champs avec un champ texte, un champ éditeur de contenu et un sélecteur de couleur.

J’ai assigné le tout à un template que j’ai nommé « Formulaire en front ». Voici le code :

PHP
templates/formulaire-front.php

Pour initialiser les ressources nécessaires au bon fonctionnement d’ACF, j’utilise la fonction acf_form_head() au tout début de mon code.

Ensuite, dans la page, j’utilise cette fois la fonction acf_form() à l’endroit où je souhaite afficher le formulaire. Je l’entoure de la fonction current_user_can() pour tester les capacités de l’utilisateur connecté.

La capacité publish_posts me permet de tester que le rôle de l’utilisateur a bien le droit de publier des articles. Ce sera donc le cas pour l’administrateur, l’éditeur et l’auteur, mais pas le contributeur.

Pour en savoir plus au sujet des utilisateurs et de leurs rôles, consultez le cours correspondant. Et pour voir la liste des capacités disponibles dans WordPress, la documentation officielle est très exhaustive sur ce sujet.

On va maintenant tester en affichant notre page, remplissez le formulaire et validez. La page se recharge et les nouvelles informations s’affichent à l’écran !

Le formulaire ACF apparait en front.
Le formulaire apparaît en front pour les utilisateurs connectés

Au final c’est tout simple, puisque tout se joue sur seulement 2 fonctions. ACF se charge ensuite d’initialiser les styles, les scripts nécessaires à son fonctionnement et, bien entendu, les méthodes de sécurité comme les nonces, pour éviter toute faille.

Conseil

Vous pourriez du coup imaginer un peu de JS pour cacher le formulaire par défaut, avec un petit bouton « Modifier le contenu ».

Cas n°2 : créer une nouvelle entrée

Maintenant, on va voir un autre cas. Imaginez que votre site dispose d’un annuaire web et vous que souhaitez proposer à vos internautes la possibilité de s’inscrire via un formulaire.

L’annuaire est en fait simplement un Custom Post Type en backend.

On pourrait très bien utiliser une extension de formulaires comme Gravity Forms, avec un add-on permettant d’enregistrer les données dans une nouvelle publication.

Ou alors on peut utiliser ACF !

On va se baser sur la même méthode que le cas n°1, à quelques différences près :

  • Cette fois on ne modifie pas un contenu, on doit en créer un nouveau ;
  • Ce contenu ne sera pas stocké dans la page où est affiché le formulaire, mais dans une nouvelle entrée du CPT « Annuaire ».

Le code va rester quasiment le même, mais cette fois on va ajouter quelques paramètres dans notre fonction acf_form().

J’ai créé un nouveau template que j’ai appelé formulaire-front-inscription.php alors que le groupe de champs sera quant-à lui rattaché au CPT « Annuaire ».

PHP
templates/formulaire-front-inscription.php

Tout va se jouer dans les paramètres de acf_form(). La documentation est plutôt bien fournie à ce sujet :

Documentation de la fonction acf_form()

On y voit par exemple qu’on peut créer une nouvelle publication à la soumission grâce à new_post. C’est exactement ce dont on a besoin.

Les paramètres de new_post sont les mêmes que la fonction native de wp_insert_post() qui est d’ailleurs utilisée par ACF pour créer une publication.

On indique alors qu’on veut enregistrer dans le post_type « annuaire » et en brouillon via post_status.

De cette manière, un administrateur du site devra valider la publication afin de la publier.

On a également besoin d’indiquer le formulaire ACF que l’on veut afficher. Après tout notre groupe de champs est lié au CPT, et pas à la page d’inscription.

Pour connaître l’identifiant de notre groupe de champs, il suffit d’aller l’éditer et regarder dans son URL :

L'interface des groupes de champs
L’ID du groupe de champs est affiché dans l’URL

Au passage, mon formulaire d’abonnement contient les champs Entreprise, Adresse, Heures et URL, et le groupe est assigné au CPT Annuaire.

Vous allez ensuite reporter l’ID de ce formulaire dans field_groups. Vous pourriez d’ailleurs cumuler plusieurs formulaires en indiquant plusieurs ID.

En affichant votre page, le formulaire d’ACF du CPT Annuaire devrait apparaître :

Un formulaire ACF affiché sur le site
Le formulaire du CPT apparaît sur notre page

N’hésitez pas à ajouter un peu de CSS pour améliorer le style des champs. Lorsque vous validez le formulaire, les champs s’effacent et un message de confirmation apparaît. Rendez-vous dans votre type de publication « Annuaire » et vous verrez votre nouvelle entrée en brouillon.

Les données apparaissent bien dans les champs ACF
Notre entrée a bien été créé dans le CPT Annuaire, en brouillon

En cliquant sur la publication, vous retrouverez bien vos champs et les données associées !


Et voilà le travail ! Vous pouvez donc imaginer pleins de cas figures grâce aux libertés que vous apporte la fonction acf_form() qui permet d’appeler n’importe quel formulaire, n’importe où dans votre site !

3

Questions, réponses et commentaires

  1. flexi2202

    Le14 septembre 2021

    bonjour
    merci pour ce merveilleux site
    mais sur ce lien
    les codes php du début sont remplaces par des écrans noir
    https://capitainewp.io/formations/acf/acf-front/

    1. Maxime BJ

      Le14 septembre 2021

      Essaie de recharger la page en vidant ton cache navigateur (ctrl+maj+r) et ça devrait fonctionner à nouveau !

  2. Emilie

    Le3 septembre 2021

    J’utilise ACF depuis des années mais je ne m’étais pas encore rendu compte qu’il était aussi puissant que cela !
    On dirait qu’il n’y a presque pas de limite à ses possibilités !
    Merci pour ce cours (et tous les autres de cette formation). Jusqu’ici, tout est très clair et parfaitement expliqué, c’est vraiment appréciable.

Laisser un commentaire