Formation « Des champs administrables avec ACF »

Utiliser les formulaires ACF en front

Lecture : 4 minutes • 8

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 !

8

Questions, réponses et commentaires

  1. Emilie

    Le 3 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.

  2. flexi2202

    Le 14 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

      Le 14 septembre 2021

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

  3. Joh’

    Le 17 novembre 2021

    Merci pour ce cours !
    Pour les formulaires, j’ai abandonné acf_form(), pour gerer les formulaires front avec l’excellent acf extended (monté sur la version pro de acf). Il anoute une interface wisiwig a la crea de front end form.

  4. Didjudai

    Le 4 décembre 2021

    Bonjour, merci pour ce tuto.
    Je n’arrive pas à cacher le formulaire après updated_message
    Avez-vous une solution?

    1. Maxime BJ

      Le 6 décembre 2021

      Tu devrais avoir un paramètre en URL, par exemple : ?updated=true. Tu peux te baser dessus pour faire une condition pour afficher ou non le formulaire.

  5. Stephane

    Le 16 juillet 2022

    Bonjour, tout d’abord merci pour ce tuto.
    j’aurais une question concernant la création d’un form avec un CPT.
    Lorsqu’on enregistre une soumission dans un CPT, je souhaiterai intégrer le titre de la page the_title() dans un champ ACF de ce formulaire.
    j’ai testé pas mal de chose… mais sans grand succès.
    Si par hasard, je pourrais avoir une piste pour pouvoir y arriver.
    Merci beaucoup

    1. Maxime BJ

      Le 16 juillet 2022

      Oui c’est un aspect un peu « chiant ». La solution que j’ai mise en place de mon côté est d’utiliser le hook save_post pour récupérer la valeur du champ et l’enregistrer dans le titre (j’ai un cours à ce sujet dans la formation développeur de thèmes). Il y a peut-être une autre solution ici mais je ne l’ai pas encore testée : https://support.advancedcustomfields.com/forums/topic/how-do-you-create-a-title-from-another-field-in-acf-pro/page/2/#post-25682

Laisser un commentaire