Utiliser les formulaires ACF 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 :

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 !

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.

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 ».

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 :

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 :

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.

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 !