Comment créer un formulaire frontal ACF [Pas de code !]

Publié: 2022-12-14

Vous cherchez à utiliser les formulaires personnalisés avancés sur votre site WordPress mais vous ne savez pas comment coder ? Ce guide vous aidera à créer un formulaire frontal ACF en un rien de temps !

Temps de lecture approximatif : 6 minutes

Advanced Custom Fields (ACF) est un outil puissant.

Avec la possibilité de personnaliser vos champs et de créer vos formulaires exactement comme vous le souhaitez, vos possibilités sont presque infinies.

Mais il y a un problème. Vous devez savoir coder pour obtenir vos formulaires ACF sur le front-end de votre site Web.

Formidable Forms est le meilleur plugin WordPress Form Builder. Achetez le gratuitement!

Ou vous ?

Cet article vous montrera comment créer sans effort un formulaire frontal ACF dans WordPress sans code ! Et tout est fait à l'aide de Formidable Forms , le parfait générateur de formulaires ACF.

Allons-y.

Quel est le problème avec l'utilisation du formulaire frontal Champs personnalisés avancés ?

En fait, il n'y a rien de mal à utiliser ACF pour créer votre formulaire frontal Advanced Custom Fields !

ACF est un outil puissant ; si vous savez coder en PHP, vous pouvez créer rapidement des formulaires uniques.

Mais, si vous ne savez pas comment coder, vous vous grattez la tête avec la langue étrangère devant vous.

Consultez simplement cet exemple de code de formulaire ACF ci-dessous :

Les formulaires frontaux d'ACF nécessitent des connaissances en codage

Donc, vous avez deux options :

Apprenez à coder et créer vos formulaires frontaux avec ACF
Laissez Formidable Forms faire tout le travail pour vous

Bien que nous ayons une équipe d'excellents développeurs ici chez Formidable, nous imaginons que ce n'est pas le cas.

Nous allons donc nous concentrer sur l'option n ° 2 aujourd'hui pour notre didacticiel de formulaire frontal Advanced Custom Fields.

Comment afficher le formulaire frontal ACF avec Formidable

Pour commencer, vous aurez besoin de quelques éléments :

Formulaires formidables Plan d'affaires
Plugin ACF (gratuit ou pro)

Obtenez des formulaires formidables maintenant !

Pour utiliser certains des champs les plus avancés avec l'interface ACF, la version pro est requise. Cependant, pour les champs de base, vous pouvez utiliser la version gratuite.

Si vous voulez plus d'informations, n'oubliez pas de consulter nos documents de la base de connaissances ACF !

Donc, une fois que vous avez installé et activé Formidable Forms, allez dans Formidable → Add-ons et cliquez sur le bouton Installer pour le plugin ACF Form WordPress .

Ensuite, ce ne sont que quelques étapes faciles :

Créer des champs de formulaire ACF
Créez votre formulaire frontal ACF dans Formidable
Mappez vos champs

Commençons.

Étape 1 : Créer des champs de formulaire ACF

Pour notre exemple, nous avons un blog d'observation des oiseaux nommé Here Birdie Birdie .

Nous voulons un moyen pour les utilisateurs d'avoir leurs soumissions d'observation d'oiseaux qui s'afficheront automatiquement en tant que type de publication personnalisé sur le blog.

Nous souhaitons donc créer quelques champs permettant aux utilisateurs de saisir des informations :

Nom
Date
Temps
Liste des oiseaux vus
Commentaires supplémentaires

Donc, la première chose que nous voulons faire est de nous diriger vers ACF pour personnaliser les champs. Heureusement, Formidable prend en charge le mappage de 19 types de champs ACF différents. Donc, vous avez beaucoup d'options.

Pour ce faire, allez dans Champs personnalisés → Groupes de champs et cliquez sur Ajouter nouveau .

Cliquez sur le bouton Ajouter nouveau pour créer vos champs ACF

Ensuite, vous pouvez ajouter vos champs en cliquant sur le bouton Ajouter un champ .

Nous allons donc créer les champs répertoriés ci-dessus et les personnaliser en fonction de nos besoins.

Nous utiliserons un champ ACF Repeater pour permettre aux visiteurs de montrer plus facilement tous les oiseaux qu'ils ont vus. Le champ répéteur permet aux utilisateurs d'ajouter ou de supprimer autant d'entrées qu'ils le souhaitent.

Nous utiliserons un champ déroulant ( Sélectionner dans ACF) dans ces champs afin que le visiteur puisse choisir parmi une liste d'oiseaux. Nous ajouterons également un champ numérique pour saisir la durée pendant laquelle ils ont vu chaque oiseau.

N'hésitez pas à personnaliser cela selon vos propres besoins. Mais, pour obtenir des fonctionnalités plus avancées (comme les répéteurs , vous devez acheter ACF Pro).

Une fois que vous avez terminé, cliquez sur Enregistrer les modifications .

Étape 2 : Créez votre formulaire frontal ACF dans Formidable

Nous allons maintenant créer le formulaire qui s'affichera sur le front-end de votre site Web.

Alors, allez dans Formidable → Forms dans votre panneau d'administration WordPress.

Ensuite, cliquez sur Ajouter nouveau en haut de la page, puis choisissez de commencer à partir d'un formulaire vierge ou de l'un des modèles de Formidable.

Cliquez sur ajouter nouveau pour créer un nouveau formulaire

N'hésitez pas à sélectionner l'option qui convient le mieux à votre situation. Nous allons commencer avec un formulaire vierge pour le personnaliser à notre goût.

Ensuite, donnez un nom à votre formulaire, puis cliquez sur Créer .

Le plugin vous mènera au générateur de formulaires par glisser-déposer de Formidable, où vous pourrez ajouter n'importe quel élément de formulaire. Nom, e-mail, numéro, adresse - vous l'appelez, c'est ici.

Puisque nous avons déjà créé nos champs de formulaire dans ACF, il nous suffit d'ajouter des champs correspondants pour faciliter leur connexion.

Exemple de formulaire d'observation des oiseaux

Nous avons ajouté un champ en haut afin que les utilisateurs puissent nommer leurs articles de blog pour les rendre uniques !

Une fois que vous avez fini de créer votre formulaire, cliquez sur Mettre à jour pour enregistrer vos modifications.

Rien ne vous rappelle plus les années 90 que de perdre tout ce que vous avez créé parce que vous n'avez pas sauvegardé.

Étape 3 : Mappez vos champs

Maintenant que nous avons créé notre formulaire, nous devons activer le mappage des champs ACF.

Cliquez donc sur l'onglet Paramètres en haut de la page et accédez à Actions et notifications .

Ensuite, choisissez l'action Créer une publication pour personnaliser l'affichage des champs du formulaire.

Cliquez sur l'action Créer un formulaire de publication

Dans l'action Créer un formulaire de publication , faites défiler jusqu'à la section Champs personnalisés et cliquez sur la bascule Mapper les champs du formulaire sur les champs personnalisés avancés .

Activer la fonctionnalité de formulaire ACF

Choisissez votre groupe de champs ACF dans la liste déroulante et commencez à mapper vos champs personnalisés avec les champs Formidable en cliquant sur Ajouter .

Associez vos champs ACF à vos champs Formidable

De plus, si vous utilisez un champ de répéteur, vous devrez faire correspondre correctement les répéteurs et les sous-champs.

Une fois que vous avez mappé vos champs, cliquez sur Mettre à jour pour enregistrer vos modifications.

Et c'est tout! Les utilisateurs peuvent désormais soumettre leurs entrées à votre formulaire frontal WordPress ACF, et vos champs ACF et Formidable Forms mapperont et enverront les informations.

À partir de là, vous pouvez afficher les informations sur le frontend avec une vue ou utiliser un thème prenant en charge ACF, puis modifier la publication, le titre de la publication, le contenu, et plus encore !

Que peut faire d'autre ce plugin de formulaire frontal ACF ?

Formidable peut sembler être un simple générateur de formulaires pour ACF, mais c'est bien plus que cela.

Avec des dizaines de fonctions de formulaire ACF, des fichiers modèles et une compatibilité avec tous les principaux thèmes (y compris Elementor), Formidable fait tout.

Et il dispose de nombreuses fonctionnalités et options supplémentaires pour optimiser votre formulaire :

Formulaires en plusieurs étapes, questionnaires et formulaires conversationnels
Plusieurs options de protection anti-spam
Styleur de formulaire visuel intégré
Plus de 100 modèles de formulaires
Des vues formidables

Ce ne sont là que quelques-unes des fonctionnalités que vous obtenez. Et ils sont plutôt géniaux si nous le disons nous-mêmes.

Alors, avec la facilité avec laquelle il est possible de mettre un formulaire ACF sur le frontend et la richesse des fonctionnalités dont vous disposez, qu'attendez-vous ?

Formidable est prêt à faire passer votre site Web d'un cran aujourd'hui .

Prêt à réaliser votre formulaire ACF ?

Si vous vous demandiez, "Comment ajouter un champ ACF au frontend?" Vous avez maintenant votre réponse.

Avec la solution simple sans code de Formidable, vous pouvez être opérationnel en quelques minutes. Et cet article vous a montré exactement comment le faire.

Que vous utilisiez WordPress ACF pro ou la version gratuite, Formidable est le plugin partenaire idéal.

Donc, si vous êtes prêt à commencer, saisissez Formidable Forms maintenant et téléchargez-le sur votre site Web.

Obtenez les formulaires frontaux ACF maintenant !

Et suivez-nous sur Facebook, Twitter et YouTube pour d'autres trucs et astuces WordPress incroyables.