page-translate

Mise en page d'un template custom pour les WebForm de Drupal

drupal / formulaire / mise en page / template / Webform / webform.tpl.php

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

La plupart d'entre vous connait sûrement le module WebForm pour Drupal. Son fonctionnement particulièrement souple et la richesse de ses options l'ont rapidement favorisé dans les choix de la communauté.

Pourtant, quand vous souhaitez modifier le moteur de rendu de vos formulaires, le système de template Drupal habituel devient pour certains un véritable casse-tête. Voici quelques étapes simples pour arriver à vos fins et ainsimettre en page des formulaires Webform avec votre propre style.

1. Définir les champs et options de votre formulaire

La première étape consiste à définir les champs et options de votre formulaire. Pour cela, rien de sorcier il faut utiliser les fonctionnalités basiques du configurateur de WebForm. En cas de questions, vous pouvez aussi vous référer à la documentation détaillée que mettent à disposition les créateurs de WebForm. Une fois ces premières manipulations terminées, votre formulaire devrait ressembler à quelque chose d'assez sobre mais fonctionnel.

Rendu standart d'un formulaire Webform Drupal

2. Définir le rendu du formulaire

C'est dans la deuxième étape qu'il va falloir vous retrousser les manches. Tout d'abord, créons le fichier webform-form.tpl.php dans le dossier "templates" du thème que vous avez activé. Comme l'indique le nom de ce fichier, il va définir le rendu de tous les formulaires du module webform. Vous avez également la possibilité de cibler un seul WebForm en précisant son "formulaire-id" dans le nom de votre fichier php.

Pour ceux qui se poseraient la question, il n'est actuellement pas possible de définir de cibler spécifiquement le rendu d'un champ du formulaire. Tout va se jouer au niveau du fichier que vous venez de créer.

Le script webform-form.tpl.php est particulièrement succinct et se contente de lancer le rendu de tous les enfants de l'objet $form.

print drupal_render($form['submitted']);
print drupal_render_children($form);

3. Modification à la volée des propriétés des composants du Webform

Nous allons devoir court-circuiter légèrement ce fonctionnement. Commençons par boucler sur chaque composant (champ texte, email, textarea) de votre formulaire en plaçant les lignes suivantes au début de votre fichier template. J'y ai inclus quelques exemples de modifications à la volée.

$componentskeys = array_keys($form['submitted']);
for($u=0; $u < sizeof($form['submitted']); $u++) {
$form['submitted'][$componentskeys[$u]]['#title_display'] = 'invisible'; //on masque les labels
$form['submitted'][$componentskeys[$u]]["#default_value"] = $form['submitted'][$componentskeys[$u]]["#title"]; //on indique le label comme valeur par défaut
$form['submitted'][$componentskeys[$u]]["#value"] = $form['submitted'][$componentskeys[$u]]["#title"]; //on indique le label comme valeur par défaut
}

Ensuite, si vous voulez conditionner certaines actions il suffit de rajouter des "if" ou des "switch" sur les attributs de votre formulaire ou les propriétés de ses composants

if($form['#form_id'] == 'webform_client_form_2') //condition sur l'identifiant du formulaire
        $form['submitted'][$componentskeys[$u]]["#title"] = 'Mon '.$form['submitted'][$componentskeys[$u]]["#title"]; //on rajoute un préfixe à chaque label
if(in_array($form['submitted'][$componentskeys[$u]]['#type'],array('textfield','webform_email'))) //condition sur le type de composant parcouru
        $form['submitted'][$componentskeys[$u]]['#size'] = 20;

4. Mise en page et structure de votre rendu Drupal

Parfois vous aurez besoin de modifier le processus de rendu de votre formulaire pour rajouter des conteneurs HTML, des mentions d'aide contextuelle ou toute autre altération avancée.
Pour choisir de manière précise comment les éléments sont imbriqués entre eux, suivez ces quelques étapes :

Commentez le rendu traditionnel des composants :
//print drupal_render_children($form);
Utilisez à la place un appel spécifique aux différents champs de votre formulaire :
print drupal_render($form['submitted']['MON_CHAMP']);
Vous pouvez maintenant intercaler les éléments HTML de votre choix, faire appel aux fonctions de votre template entre deux champs ou simplement modifier manuellement l'ordre d'affichage de vos champs.

Rendu custom d'un formulaire Webform Drupal

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles