7 astuces pour un développement Gravity Forms sur-mesure

Si vous avez déjà utilisé l’extension WordPress Gravity Forms, vous savez sans doute à quel point elle s’avère pratique pour créer facilement des formulaires complexes et les relier à des notifications par e-mail. Mais derrière ces « basiques » fonctionnalités se cachent toute une architecture en place (actions et filtres) permettant aux utilisateurs avancés d’étendre encore plus la puissance de ce plugin.

Affichage de champs selon des conditions logiques, placement des labels, message de validation ou d’erreur… Nombreuses sont les fonctionnalités de Gravity Forms en terme de création de formulaires WordPress et de leurs personnalisations.

Mais en plus de ça, mes lecteurs développeurs PHP WordPress seront ravis de savoir que l’extensibilité du plugin est relativement satisfaisante. J’ai récemment eu l’occasion de travailler avec Gravity Forms pour le site d’un courtier en immobilier et ai pu donc découvrir les coulisses du plugin. Voila donc quelques unes des astuces et personnalisations que j’ai utilisées au cours de ce développement WordPress avec Gravity Forms.

Activer le champ (caché) de mot de passe

Par défaut, dans l’éditeur visuel d’un formulaire Gravity Forms, la section « Champs avancés » ne propose (étrangement ?) pas de champs « mot de passe ». J’ai trouvé ça plutôt étrange, étant donné que c’est un champ HTML5 relativement courant. La documentation Gravity Forms m’a heureusement rassuré, un hook existe pour inverser cette logique et disposer d’un joli champ de mot de passe.

function msk_enable_password_field($is_enabled){
	return true;
}
add_action("gform_enable_password_field", "msk_enable_password_field");

Une fois ce code déposé dans functions.php (par exemple), un champ « Mot de passe » sera disponible grâce à cette action gform_enable_password_field.

Il propose en fait un groupe de deux champs : le premier permet à l’utilisateur d’entrer un mot de passe et le second impose la confirmation de ce dernier.

Ses options sont peu nombreuses : une checkbox « Activer la force du mot de passe » permet l’ajout d’un indicateur mentionnant la bonne ou mauvaise sécurité du mot de passe défini. Pratique !

Profiter du champ de carte bleue dans Gravity Forms

Par curiosité, j’ai donc fouillé le fichier form_detail.php du plugin à la recherche d’autres actions nommées « gform_enable_* », et un deuxième existe ! Il est donc possible d’ajouter un champ de paiement par carte bleue dans vos formulaires Gravity Forms, pratique si vous utilisez l’extension dans un tunnel de paiement.

function msk_enable_bank_field($is_enabled){
	return true;
}
add_action("gform_enable_credit_card_field", "msk_enable_bank_field");

Cette fois, un bouton « Carte de crédit » fera son apparition à la fin de la section « Champs de prix » grâce à l’action gform_enable_credit_card_field.

Un peu plus d’options sont disponibles pour ce type de champ : le support de telle ou telle carte de crédit peut être activé ou supprimé, et deux styles d’icônes de cartes sont proposés (Standard ou 3D).

Avec un tel champ, il est fort probable qu’une notification par e-mail après envoi du formulaire ne soit pas votre seul objectif : jettez donc un œil un peu plus loin dans cet article pour voir comment valider les données du formulaire puis les traiter pour ainsi, éventuellement, rediriger l’utilisateur vers la prochaine étape du tunnel de paiement.

Créer une nouvelle validation personnalisée de champs

Certes, Gravity Forms propose déjà des validations prédéfinies en fonction du type de champ (e-mail, …) et de ces options (champs requis, pas de doublons…). Mais j’ai eu besoin de créer une validation sur-mesure sur un champ spécifique, et ce afin de vérifier si un e-mail défini dans un champ par l’utilisateur n’était pas déjà un e-mail relié à un utilisateur du site WordPress.

function msk_gform_user_registration_validation($validation_result){
	$form = $validation_result["form"];

	foreach ($form["fields"] as &$field) {

		if ($field['id'] == '13') {
			$form_email = rgpost("input_{$field['id']}");

			if (email_exists($form_email)) {
					$validation_result['is_valid'] = false;
					$field['failed_validation'] = true;
					$field['validation_message'] = 'Cet e-mail est déjà existant dans notre base d'utilisateurs !';
			}
		}
	}

	$validation_result["form"] = $form;
	return $validation_result;
}
add_filter('gform_validation', 'msk_gform_user_registration_validation');

C’est ce à quoi sert le filtre gform_validation ! Dans la fonction personnalisée que vous créez alors, vous aurez accès à une variable $validation_result qui regroupe toutes les informations relatives au formulaire. On crée donc une boucle afin d’analyser les champs du formulaire reçu, et dès que l’on trouve le champ qui nous intéresse (ici, le champ avec un id de 13), on récupère la valeur entrée par l’utilisateur avec la fonction rgpost().

C’est là que la validation se joue : dans notre cas présent, je voulais savoir si un e-mail utilisateur était déjà présent dans notre base de données WordPress, via la fonction email_exists.
Si quelque chose n’est pas bon et que vous souhaitez empêcher l’envoi du formulaire, trois choses sont alors à faire :

1. on indique à Gravity Forms que la validation est fausse, avec $validation_result[‘is_valid’] = false;
2. puis on indique un peu plus précisément quel champ n’est pas bon, avec $field[‘failed_validation’] = true;
3. et enfin on définit le message d’erreur à afficher, pour permettre à l’utilisateur de corriger. Ce message est défini dans $field[‘validation_message’].

Un tutoriel officiel, en anglais, décrit ce concept un peu plus en détails.

Récupérer les données d’un formulaire après soumission d’un Gravity Forms

Une fois le formulaire rempli, Gravity Forms s’occupe de son business selon la configuration que vous aurez définie dans l’administration du formulaire. Cela se résume simplement à l’envoi d’un ou de plusieurs emails (notification utilisateur qui vient de remplir le formulaire, message envoyé à l’administrateur du site, …).

Fort heureusement, Gravity Forms propose une ribambelle d’actions et filtres nous permettant, humbles développeurs WordPress, de décupler la simple utilisation d’envois d’e-mails via cette extension en un outil assez puissant. Relier avec une API d’un service tiers, écrire dans une seconde base de données, remplir une feuille de calcul Google Drive… The sky is the limit !

Etudions un exemple concret que j’ai eu l’occasion de créer pour un client : créons un formulaire Gravity Forms permettant la création d’un compte utilisateur dans la base WordPress.

Utiliser Gravity Forms pour un formulaire de création d’un compte utilisateur dans WordPress

Avant toute chose, voila la bête !

function msk_gform_process_user_registration($entry, $form) {
	$civilite = sanitize_text_field($entry['1']);
	$nom = sanitize_text_field($entry['2']);
	$prenom = sanitize_text_field($entry['3']);
	$adresse = sanitize_text_field($entry['4']);
	$codepostal = sanitize_text_field($entry['7']);
	$ville = sanitize_text_field($entry['8']);
	$email = sanitize_text_field($entry['13']);
	$pass = sanitize_text_field($entry['12']);

	if (!email_exists($email)) {
		$user_id = wp_create_user($email, $pass, $email);

		wp_update_user(
		    array( 
		      'ID'          =>    $user_id,
		      'nickname'     =>    $email,
		      'first_name'   =>    $prenom,
		      'last_name'    =>    $nom,
		      'display_name' => $nom . ' ' . $prenom
		    )
		);

		$user = new WP_User($user_id);
		$user->set_role('subscriber');

		update_user_meta($user_id, '_coordonnees_civilite', $civilite);
		update_user_meta($user_id, '_coordonnees_adresse', $adresse);
		update_user_meta($user_id, '_coordonnees_codepostal', $codepostal);
		update_user_meta($user_id, '_coordonnees_ville', $ville);
	}
}
add_action('gform_after_submission', 'msk_gform_process_user_registration', 10, 2);

On se calme, ce n’est pas si compliqué ! L’action gform_after_submission permet d’exécuter du code fait-maison après la validation/soumission d’un formulaire. Elle accepte deux paramètres : $entry est, en gros, le $_POST — ou les données — du formulaire à la sauce Gravity Forms. $form, quant à lui, fait référence à l’objet formulaire en lui-même.

Hélas, les attributs name des champs de formulaires Gravity Forms n’étant pas personnalisables, les données entrées par l’utilisateur sont disponibles dans le tableau $entry via des clefs numériques très abstraites (GF si vous me lisez, vous saurez quoi faire…). Un petit print_r vous permettra d’associer correctement vos valeurs afin de les traiter.

Dans notre cas, après avoir stocké les différentes valeurs des champs remplis par l’utilisateur, je crée un nouveau compte-utilisateur WordPress avec la fonction wp_update_user.

Après la création de l’utilisateur, on lui assigne le rôle d’abonné. Enfin, certaines informations « extra » sont stockées en métadonnées de l’utilisateur avec update_user_meta, les champs correspondant ayant été préalablement créés grâce à la fameuse librairie Cuztom.

Ajouter ou modifier l’affichage d’une monnaie dans Gravity Forms

function msk_update_currency($currencies) {
    $currencies['EUR'] = array(
        "name" => __("Euro", "gravityforms"),
        "symbol_left" => '',
        "symbol_right" => "€",
        "symbol_padding" => " ",
        "thousand_separator" => '.',
        "decimal_separator" => ',',
        "decimals" => 2
    );

    return $currencies;
}
add_filter("gform_currencies", "msk_update_currency");

Une autre petite astuce qui peut s’avérer utile : les champs de type « Nombre » peuvent être définis pour afficher des monnaies, et ainsi formater les chiffres (espace, virgule, point, symbole avant ou après…).
Dans notre cas, l’affichage de la monnaie Euro est modifié : le symbole est placé après le chiffre, les milliers sont séparés par un point, les décimales par une virgule et on accepte 2 chiffres après la virgule.

Ce même filtre peut également permettre d’ajouter une monnaie si elle s’avère manquante. Cette nouvelle monnaie devra ensuite être définie dans les paramètres généraux du plugin.

Faire commencer la barre de progression à 0%

function msk_set_progressbar_start() {
	return true;
}
add_filter('gform_progressbar_start_at_zero', 'msk_set_progressbar_start');

Par défaut, si un formulaire Gravity Forms est étalé sur plusieurs pages et que vous affichez une barre de progression, vous remarquerez qu’elle ne commence pas à 0 ! Si ce comportement vous dérange, le code ci-dessus permet tout simplement de proposer cette barre de progression totalement vide au tout début du formulaire.

Remplir dynamiquement des champs d’un formulaire Gravity Forms

function msk_gform_prepopulate_adresse($value){
 	if (get_current_user_id()) return get_user_meta(get_current_user_id(), '_coordonnees_adresse', true);
 	return '';
}
add_filter('gform_field_value_adc_user_adresse', 'msk_gform_prepopulate_adresse');

Dans les options avancées d’un champ, une checkbox Permettre aux champs d’être remplis dynamiquement est présente… Comme son nom l’indique, elle nous permet de pré-peupler un champ avec une valeur calculée dynamiquement. Trois méthodes nous permettent de faire cela, mais celle que je vous présente est sans doute la plus pratique.

Un filtre « dynamique » permet de définir un mot-clef qui sera automatiquement remplacé par une valeur calculée dynamiquement (un peu comme un shortcode, mais sans crochet). Ici, gform_field_value_adc_user_adresse crée un mot-clef adc_user_adresse que l’on définit dans l’administration avancée du champ, et l’affichage de ce mot-clef est conditionné par la fonction que nous avons créée, reliée à ce filtre.

Ici, nous vérifions si l’utilisateur WordPress est connecté. Le cas échéant, Gravity Forms préremplira un champ avec son adresse que nous avons stockée dans une metadonnée de l’utilisateur.

function msk_gform_prepopulate_email($value){
 	if (get_current_user_id()) :
 		$user_data = get_userdata(get_current_user_id());
 		return $user_data->user_email;
 	endif;
 	return '';
}
add_filter('gform_field_value_adc_user_email', 'msk_gform_prepopulate_email');

Autre exemple, cette fois pour remplir dynamiquement un champ via le mot-clef adc_user_email et afficher, si possible, l’e-mail de l’utilisateur actuellement connecté. Très pratique si vous souhaitez permettre à un utilisateur de modifier ses données personnelles reliées à son compte WordPress, sans pour autant lui offrir un accès à l’interface d’administration du site. Un simple formulaire Gravity Forms, des champs pré-peuplés dynamiquement et un code sur-mesure exécuté avec l’action gform_after_submission et c’est fait !

Développeurs WordPress, simplifiez-vous la vie !

Je ne suis en rien affilié à Gravity Forms, mais j’ai été agréablement surpris par ce plugin. En tant que développeur WordPress freelance, le temps m’est compté, et c’est sans hésitation que j’opterai pour cette extension à l’avenir : l’éditeur visuel pourrait être plus efficace ergonomiquement parlant, mais l’extensibilité du plugin est telle que le temps gagné est considérable si vous avez des formulaires à mettre en place.

Ce ne sont là que quelques astuces que j’ai pu découvrir en utilisant Gravity Forms, mais bien d’autres comportements peuvent être modifiés au vu de la documentation fournie du plugin. Si vous avez une expérience à partager et un bout de code qui pourrait nous être utile, faites-le nous savoir dans un commentaire ci-dessous !