Gravity Form, plugin de formulaire bien connu pour WordPress (si ce n’est pas le cas je vous le conseille !), possède un champ « liste » qui permet à l’internaute d’ajouter ou de retirer des lignes supplémentaires sur des données spécifiques. Mais la plupart du temps, il est difficile de savoir où on en est au niveau des ajouts/retraits et d’un point de vue UI/UX ce n’est pas terrible que l’on ne puisse pas avoir un petit titre qui se met automatiquement au-dessus de chaque ligne ! On va donc voir comment ajouter un titre à chaque nouvel élément « liste » sur Gravity Form.
Pourquoi ajouter des titres à chaque nouvel élément « liste » sur Gravity Form ?
Petit exemple
Prenons par exemple le cas où l’on voudrait ajouter des salariés sur un formulaire quelconque et où on voudrait à chaque fois savoir les noms, prénoms, adresses, téléphone et poste. Pour cela, il faut ajouter un champ « liste » dans gravity form qui va ressembler à ça :
Du côté de l’utilisateur, après quelques modifications CSS pour le rendre un peu moins austère, on obtient ce formulaire :
Donc jusqu’ici tout va bien mais quand on ajoute un nouveau salarié, on se retrouve avec une succession de blocs qui finissent par embrouiller et qui ne sont pas très sympa pour l’utilisateur qui souhaite s’y retrouver à partir de plus de 4 ou 5 salariés ! Si on s’intéresse à l’UI/UX (Interface utilisateur / Expérience utilisateur) on voit tout de suite que l’internaute aurait raison de râler…
C’est pourquoi on va ajouter dynamiquement un titre avec le numéro du salarié en cours. Par dynamiquement, j’entends avec javascript et plus précisément jQuery !
« Ajouter un titre à chaque nouvel élément « liste » c’est améliorer l’expérience utilisateur sur son site »
Ajouter un script qui va influer sur le formulaire
Une solution pour l’ensemble des formulaires du site
La création du script se fera à l’aide de votre éditeur préféré (Notepad++, Sublime Text, Brackets…) et contiendra le script à appliquer aux formulaires. On va faire en sorte que ça soit général pour tous les formulaires du site dans cette partie, partant du principe que si on veut faire quelque chose de bien on le veut pour tout son site ! Le code en entier ressemblera à ceci :
var $count_salaries = $('.gfield_list tbody tr').length;
var $num_salarie;
for(i=0 ; i <= $count_salaries ; i++){
$num_salarie = i + 1;
$('.gfield_list tbody tr:nth-child(' + $num_salarie +')').prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
}
gform.addAction( 'gform_list_post_item_add', function ( item , container) {
$('.gfield_list tbody tr').each(function( index ){
$count_salaries = $('.gfield_list tbody tr').length;
$num_salarie = index + 1;
$(this).children('td.titre_liste_form').remove();
$(this).prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
} );
} );
gform.addAction( 'gform_list_post_item_delete', function ( container ) {
$('.gfield_list tbody tr').each(function( index ){
$count_salaries = $('.gfield_list tbody tr').length;
$num_salarie = index + 1;
$(this).children('td.titre_liste_form').remove();
$(this).prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
} );
} );
Quelques explications :
- On va définir nos variables count_salaries et num_salaries pour respectivement faire en sorte que le script sache combien il y a d’éléments sur la page et pour numéroter chaque élément. (ligne 1 &2)
- On va ensuite lancer une boucle « for » pour que dès le chargement de la page, chaque élément reçoive un titre avec un numéro (Salarié N° X). En général il n’y en aura qu’un seul mais sait-on jamais ! (ligne 4)
- On va utiliser gform.addAction pour que, à chaque ajout ou suppression d’un élément, le script recompte et mette à jour les titres et les numéros (ligne 14 & 28). On va utiliser la doc officielle de Gravity Form en utilisant : gform_list_post_item_add et gform_list_post_item_delete.
NB : Ce code devra être inséré dans votre fichier .js perso que vous trouverez dans un autre tuto à venir sur le site ! Si vous êtes déjà familiers avec le fait d’ajouter un script perso dans votre thème enfant alors vous savez déjà où le mettre 😉
NB : Ce code n’est valable que pour un seul formulaire sur la page ! Si vous avez 2 formulaires avec 1 champ liste dans chacun d’eux, le script va tous les compter et attribuer un numéro qui va parcourir les 2 formulaires ! (formulaire 1 = salarié n°1, salarié n°2 et formulaire 2 = va commencer direct avec salarié n°3…)
Voici donc à ce stade à quoi va ressembler le formulaire quand on arrivera sur la page :
« Le script va ajouter un titre avec un numéro à chaque chargement de la page, ajout ou suppression d’un élément de la liste »
Une solution pour un seul formulaire spécifique
Si on veut que le script ne fonctionne que pour un seul formulaire spécifique, on va utiliser ce code plutôt, qui rend le script valable uniquement pour un seul formulaire :
var $form_spe = '#gform_1';
var $count_salaries = $( $form_spe + ' .gfield_list tbody tr').length;
var $num_salarie;
for(i=0 ; i <= $count_salaries ; i++){
$num_salarie = i + 1;
$( $form_spe + ' .gfield_list tbody tr:nth-child(' + $num_salarie +')').prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
}
gform.addAction( 'gform_list_post_item_add', function ( item , container) {
$( $form_spe + ' .gfield_list tbody tr').each(function( index ){
$count_salaries = $( $form_spe + ' .gfield_list tbody tr').length;
$num_salarie = index + 1;
$(this).children('td.titre_liste_form').remove();
$(this).prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
} );
} );
gform.addAction( 'gform_list_post_item_delete', function ( container ) {
$( $form_spe + ' .gfield_list tbody tr').each(function( index ){
$count_salaries = $( $form_spe + ' .gfield_list tbody tr').length;
$num_salarie = index + 1;
$(this).children('td.titre_liste_form').remove();
$(this).prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
} );
} );
Quelques explications :
- On va introduire une nouvelle variable $form_spe (ligne 1) qui va prendre l’ID du formulaire (si vous avez plusieurs formulaires sur votre site pensez bien à modifier la variable pour avoir gform_ « ID du formulaire visé ».
- On va introduire cette nouvelle variable dans les différentes fonctions du code pour que seul le formulaire concerné ne soit visé
Une solution pour plusieurs formulaires sur la même page
Si on a plusieurs formulaires sur la même page, et qu’on a sur chacun d’eux un champ liste, voici ce que va donner le script utilisés présenté juste avant :
On a donc uniquement le premier formulaire qui a été pris en compte par le script. Si on avait utilisé le tout premier script proposé, on aurait eu la même chose sur tous les éléments mais une fois qu’on aurait ajouté ou supprimé un élément c’est l’ensemble des blocs qui auraient été pris en compte.
C’est pourquoi il va falloir faire différemment dans le cas de multiples formulaires sur la même page : On va utiliser un autre code et profiter des fonctions fournies par Gravity Form himself :
var $num_salarie;
var $count_salaries;
$('form[id^=gform_]').each(function( index ){
$count_salaries = $(this).find('.gfield_list tbody tr').length;
for(i=0 ; i <= $count_salaries ; i++){
$num_salarie = i + 1;
$(this).find('.gfield_list tbody tr:nth-child(' + $num_salarie +')').prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
}
});
gform.addAction( 'gform_list_post_item_add', function ( item , container) {
$count_salaries = container.find('tbody tr').length;
container.find('tbody tr').each(function ( index ) {
$num_salarie = index + 1;
$(this).find('td.titre_liste_form').remove();
$(this).prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
} );
} );
gform.addAction( 'gform_list_post_item_delete', function (container) {
$count_salaries = container.find('tbody tr').length;
container.find('tbody tr').each(function ( index ){
$num_salarie = index + 1;
$(this).find('td.titre_liste_form').remove();
$(this).prepend('<td class="titre_liste_form">Salarié n°' + $num_salarie + '</td>');
} );
} );
Quelques explications :
- On va définir nos variables (lignes 1 & 2)
- On va parcourir tous les formulaires pour que chacun puisse avoir une série de titres qui lui est propre (et éviter que le premier salarié sur le 2ème formulaire n’ait le titre : « Salarié n°2 » alors qu’il est tout seul…)
- On va utiliser les actions « gform_list_post_item_delete » et « gform_list_post_item_add » et leur « container » qui est passé en argument pour leur donner des instructions personnalisées et éviter que l’ajout sur un formulaire ne provoque l’ajout d’un titre sur un élément d’un autre formulaire ! Ainsi chaque formulaire ne sera concerné que par ses propres ajouts ou suppressions et pas les autres !
Conclusion
Afin d’ajouter automatiquement des titres à chaque élément « liste » de Gravity Form, on peut compter sur jQuery et ses scripts qui facilitent la vie.
Ces astuces sont valables au moins pour les navigateurs actuels et leur avant-dernière version, et aussi pour Internet explorer 9 minimum qui nous pose en général plus de problèmes que les autres….
Bien entendu, il existe une multitude de moyens pour obtenir le même résultat et le code présenté ici pourrait être largement améliorable mais le but était surtout de trouver le juste milieu entre un code super optimisé et un code compréhensible par les néophytes !