WordPress & ACF Pro : Créer des formulaires en front end

Formulaire Front End avec ACF Wordpress

Venant de passer plusieurs heures à essayer de faire fonctionner un formulaire d’inscription en front-end avec ACF Pro (afin d’éviter de multiplier les extensions), je me dis que c’est peut-être également votre cas !

Mais plutôt que de ne vous parler que du formulaire d’inscription, je vous propose de traiter plus globalement des formulaires que vous voulez peut-être mettre en front-end de son site.

Quelques exemples d’utilisation possible :

– Formulaire de connexion (bien qu’il soit préférable d’utiliser la fonction native de WordPress pour cela).
– Formulaire d’inscription / de création de compte.
– Formulaire afin de permettre à vos utilisateurs de poster des articles (en le mettant en brouillon le temps de votre validation par exemple)
– Formulaire de contact …

À noter que je suis passé à la version PRO d’ACF pour le repeater (qui est absolument génial). Pour moins de 20 € le licence, je vous recommande la version PRO d’autant plus que le support est très sympathique et réactif.

1. Créer un formulaire en front avec ACF : la théorie

Une fois que l’on a compris le principe, c’est assez simple. Malheureusement la documentation n’est pas toujours très claire et est uniquement en anglais (ce qui n’est pas bien grave).

1) Générer son formulaire avec acf_form()

La première fonction proposé par ACF et dont vous allez avoir besoin est acf_form(). Cette dernière va se charger de générer le formulaire avec les informations que vous allez lui transmettre.

L’appel de cette fonction se fait directement dans le template de page de votre choix de la manière suivante :

<?php acf_form($options); ?>

Vous l’avez compris, tout se passe dans la variable options qui est un tableau contenant toutes les informations.

<?php $options = array(

                /* (string) L’ID de votre formulaire – Vous choisissez ce que vous souhaitez. Par défaut c’est acf-form */
                ‘id’ => ‘acf-form’,
                
                /* (int|string) L’ID du post que vous souhaitez modifier. Par defaut il s’agit de l’ID de votre page actuelle.
                Pour créer un nouvel article lors de la validation du formulaire, vous devez mettre ‘new_post’ */
                ‘post_id’ => false,
                
                /* (array) Un tableau des données de l’article utilisé pour la création de celui-ci.
                ‘post_id’ doit bien sûr contenir ‘new_post’ si cette valeur n’est pas à false */
                ‘new_post’ => false,
                
                /* (array) L’ID de votre groupe de champs ACF que vous souhaitez afficher dans ce formulaire */
                ‘field_groups’ => false,
                
                /* (array) Un tableau de champs IDs/clés pour surcharger les champs du formulaire */
                ‘fields’ => false,
                
                /* (boolean) Permet d’afficher ou non le champ titre natif de wordpress. False par défaut */
                ‘post_title’ => false,
                
                /* (boolean) Idem que post_title mais pour le contenu. False par défaut */
                ‘post_content’ => false,
                
                /* (boolean) Indiquer si vous souhaitez créer le formulaire. True par défaut */
                ‘form’ => true,
                
                /* (array) An array or HTML attributes for the form element */
                ‘form_attributes’ => array(),
                
                /* (string) L’URL de redirection une fois le formulaire envoyé.
                La valeur par defaut contient l’url courant avec le paramètres GET ‘?updated=true’.
                Vous pouvez utilisez la variable ‘%post_url%’ pour rediriger vers l’article tout juste créé */
                ‘return’ =>  »,
                
                /* (string) Code HTML à mettre avant les champs */
                ‘html_before_fields’ =>  »,
                
                /* (string) Code HTML présent après les champs */
                ‘html_after_fields’ =>  »,
                
                /* (string) Le texte du bouton de validation */
                ‘submit_value’ => __(« Update », ‘acf’),
                
                /* (string) Le message affiché après la validation.
                Peut-être renseigné à « false » pour ne pas afficher de message */
                ‘updated_message’ => __(« Post updated », ‘acf’),
                
                /* (string) Détermine la position des labels par rapports aux champs */
                ‘label_placement’ => ‘top’,
                
                /* (string) Détermine ou seront placé les instructions pour chaque champs.
                Par défaut la valeur est « label », vous pouvez la changer par « fields ». */
                ‘instruction_placement’ => ‘label’,
                
                /* (string) Détermine les balises utilisés pour votre formulaire.
                Par defaut ce sont des balises div pouvant être remplacées par tr, td, ul, ol et dl */
                ‘field_el’ => ‘div’,
                
                /* (string) Utilisation de l’uploader de WordPress ou un simple champs file pour les images/fichiers.
                Tout dépends de votre utilisation. Par défaut : « wp »
                Choices of ‘wp’ or ‘basic’. Added in v5.2.4 */
                ‘uploader’ => ‘wp’,
                
                /* (boolean) Inclure un champ caché pour limiter les soumissions des robots. Par défaut : True */
                ‘honeypot’ => true

)?;>

2) Valider les données avec acf/validate_value

Une fois que notre formulaire est en place, il faut faire des vérifications sur les données qui sont envoyées.

Pour certaines d’entre elles, ACF les fait automatiquement. C’est le cas notamment pour les champs obligatoire. Pour le reste c’est à nous de faire les vérifications nécessaires avec le filtre acf/validate_value.

Tout se passe dans votre fichier functions.php et doit se faire de la façon suivante  :

add_filter(‘acf/validate_value/key=id_de_votre_champ’, ‘my_acf_validate_value’, 10, 4);

function my_acf_validate_value( $valid, $value, $field, $input ){

                // Si il y a déjà un message d’erreur, on s’arrête de suite
                if( !$valid ) {
                                r                eturn $valid;
}

                // Ici vous pouvez faire vos vérifications

                // On retourne la variable valid (true si tout va bien)
                return $valid;

}

La fonction contient en paramètres :
– $valid : return true / false ou le message d’erreur de votre choix
– $value : la valeur à sauvegarder
– $field : Un tableau contenant tous les paramètres des champs d’upload (d’images ou de fichiers)
– $input : l’attribut name de votre champs

L’utilisation de ce filtre est assez simple. Il vous est possible de définir un ordre de priorité lors de l’appel de add_filter. Cette priorité est de 10 par défaut, plus elle sera basse plus votre filtre sera prioritaire. Une fois les priorités définies, il vous suffit d’ajouter vos vérifications et de retourner l’erreur ou true en cas de succès.

Dans l’appel du filtre, vous devez également lui indiquer quel champ est concerné par votre vérification, c’est le rôle du paramètre « key ».
Pour ma part j’utilise l’ID du champ en question mais vous pouvez également utiliser son attribut name ou type. Si rien n’est renseigné, la vérification s’appliquera à l’ensemble de vos champs.

3) Sauvegarder les données avec acf/save_post

Maintenant que nous avons fait nos vérifications sur nos données, nous pouvons les sauvegarder en base. C’est le rôle d’acf/save_post.

Ce dernier trouvera également sa place dans notre fichier functions.php.

Son utilisation est on ne peut plus simple :

function my_acf_save_post( $post_id ) {
                // On récupère nos données
                // On écrit nos code de sauvegarde en base
}

add_action(‘acf/save_post’, ‘my_acf_save_post’, 20)

2. Créer un formulaire en front avec ACF : la pratique

Passons maintenant à la pratique. Une fois le principe compris, il n’y a plus de difficultés majeures.

1) Un formulaire de soumission de post

Dans cet exemple, je ne gère pas les codes d’erreurs autres « champs obligatoires » géré nativement par acf_form().
Commençons pas un formulaire de soumission de post via ACF, c’est le cas le plus simple à réaliser.

Tout d’abord, vous devez créer un modèle de page custom qui accueillera votre formulaire. Si vous ne savez pas comment faire, je vous invite à (re)lire mon précédent article sur ACF.

Ensuite copiez/collez le texte suivant :

<?php if ( is_user_logged_in() ) { // On vérifie que l’utilisateur est connecté
while ( have_posts() ) : the_post();
                the_content(); // Utile si vous souhaitez afficher le contenu de votre page avant votre formulaire.

// On appel le formulaire
                acf_form(array(
                                ‘post_id’ => ‘new_post’, // On lui indique que c’est un nouveau post
                                ‘post_title’ => true, // On affiche le champ Title
                                ‘post_content’ => true, // On affiche le champ description

                                ‘new_post’ => array(
                                ‘post_type’ => ‘post’, // On indique notre type de post (ici un article, mais on peut mettre page ou autre si vous avez des type d’articles custom)
                                ‘post_status’ => ‘draft’ // L’état de l’article une fois sauvegardé (ici brouillon)
                ),
                ‘updated_message’ => « Votre proposition d’article est bien prise en compte, merci ! », // Message une fois l’envoi fait (le traitement des erreurs ne se fait pas là)
                ‘submit_value’ => « Valider l’article », // La valeur du bouton submit

));
endwhile;

}else{

// Utilisateur non connecté, vous pouvez faire une redirection ou ajouter un message.

}

2) Un formulaire d’inscription

Passons maintenant au formulaire d’inscription avec ACF, un peu plus complexe mais rien de bien méchant.

Tout comme pour le formulaire de soumission de poste, on commence avec notre fonction acf_form(). Pour ma part j’ai fait un formulaire très simple mais libre à vous de le personnaliser !

$options = array(
                ‘post_id’ => ‘new_post’,
                ‘field_groups’ => array( 141349 ),
                ‘form’ => true,
                ‘submit_value’ => __(« Je m’inscris », « monsite »),
                ‘form_attributes’ => array(
                ‘id’ => ‘subscrib_form’,
                ‘name’ => ‘fm_sub’,
                ‘class’ =>  »,
                ‘action’ =>  »,
                ‘method’ => ‘post’,
),
‘updated_message’ => $msg,
);
acf_form($options);

Mon formulaire ACF comprend :

  • Un champ login
  • Un champ mot de passe
  • Une confirmation du mot de passe
  • Un champ e-mail
  • Un bouton radio pour l’inscription à la newsletter (optin)

Tous les champs sont obligatoires et il va falloir vérifier également que le mot de passe et sa confirmation sont identiques.

Dans le fichier functions.php, j’ai donc plusieurs filtres:

add_filter(‘acf/validate_value/key=field_aaa’, ‘my_acf_validate_user’, 7, 1); // On vérifie que le login n’existe pas déjà en base
add_filter(‘acf/validate_value/key=field_bbb’, ‘my_acf_validate_email’, 8, 1); // On vérifie que l’e-mail n’existe pas
add_filter(‘acf/validate_value/key=field_xxx’, ‘my_acf_validate_password’, 9, 4); // On vérifie que les deux mots de passes sont identiques
add_filter(‘acf/save_post’ , ‘new_user_acf’, 10, 1 ); // On enregistre le nouveau membre

Afin que les filtres soient appelés dans le bon ordre, j’ai définie des priorités différentes (7, 8, 9, 10).

My_Acf_Validate_User :

function my_acf_validate_user( $valid, $value, $field, $input ){

                if( !$valid ) {
                                return $valid;
                }

                if (username_exists($_POST[« acf »][« field_aaa »])) {
                                 $valid = __(‘Ce nom d\’utilisateur est déjà utilisé’, « monsite »);
                }
                return $valid;
}

My_Acf_Validate_Email :

function my_acf_validate_email( $valid, $value, $field, $input ){
                if( !$valid ) {
                                return $valid;
                }
                if(email_exists($_POST[« acf »][« field_bbb »])){
                                $valid = __(« Un compte utilisateur existe déjà avec cette adresse e-mail. », « monsite »);
                }
                return $valid;
}

My_Acf_Validate_Password :

function my_acf_validate_password( $valid, $value, $field, $input ){
                if( !$valid ) {
                                return $valid;
                }
                $data[‘usr_password’] = $_POST[« acf »][« field_xxx »]; // mon champ mot de passe
                $data[‘confirm_password’] = $_POST[« acf »][« field_yyy »];

                if ($_POST[« acf »][« field_xxx »] != $_POST[« acf »][« field_yyy »]) {
                                 $valid = __(« Oups, votre mot de passe et sa confirmation sont différents », « monsite »);
                }

                return $valid;

}

On a tout vérifié, on sauvegarde l’utilisateur en base :

function new_user_acf(){

                $user_id = wp_create_user( $_POST[« acf »][« field_aaa »], $_POST[« acf »][« field_xxx »], $_POST[« acf »][« field_bbb »]);
                $user = new WP_User($user_id);
                $user->set_role(‘contributor’);

                // Pour ma part j’envoi un e-mail de bienvenue que je récupère ci-dessous
                $content = file_get_contents(« lien vers votre email »);
                $headers = « From: Monsite \r\n »;
                $headers .= « MIME-Version: 1.0\r\n »;
                $headers .= « Content-Type: text/html; charset=uft-8\r\n »;
                wp_mail($_POST[« acf »][« field_bbb »], __(« Bienvenue sur Mon site », « monsite »), $content, $headers);
}

Si vous avez la moindre question, n’hésitez pas à la poser en commentaire.

4 commentaires

  • Monsif dit :

    Bonjour

    J’ai un souci,
    JE souhaite faire apparaître sur mon site un formulaire de recherche ACF et ainsi donner la possibilité aux visiteurs de recherche un article via plusieurs catégories, lieux… j’ai réussi à personnaliser le formulaire de dépôt d’articles mais je patine un peu
    pour faire apparaitre les champs de recherche sur mon site…
    Merci.

    • Fabien dit :

      Bonjour Monsif !

      Tu as fait le formulaire dans l’administration ?
      Tu as fais le code pour qu’une fois que le visiteur ai cliqué sur OK, la recherche se fasse ?

      Peux tu copier ton code que je regarde ce qui bloque ?

  • Monsif dit :

    Bonjour Fabien,

    Merci pour ta réponse?
    en fait les étapes:
    1. ACF téléchargé
    2. formulaire de dépôt d’une annonce créée dans l’admin en personnalisant le formulaire wordpress classique
    3. je suis à l’étape ou je cherche à faire apparaître le formulaire de recherche sur le site

    A savoir que je ne m’y connais pas trop en code et je ne l’ai pas fait encore… dois je les coller dans mon thème et si oui ou ?

    Merci!

    • Fabien dit :

      Si tu ne t’y connais pas trop en code ça risque d’être compliqué …
      Je t’invite à t’inscrire sur le forum wpfr (communauté française WordPress) et à faire une impression d’écran de ta configuration ACF, nous dire ou tu souhaite faire apparaître ton code …

      Ce sera plus simple pour t’aider vu que tu en es qu’au début !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *