Mise en forme du formulaire d'inscription

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

bonjour

question simple :
comment faire pour personnaliser la mise en forme du formulaire (ou des formulaires Drupal) d'inscription ?
par exemple, avoir une disposition sur 2 colonnes et non sur une
quelles sont les paramètres de $form le permettant ?

merci

Forum : 
Version de Drupal : 

Salut,

La réponse dépend un peu de ton profil :

Si tu es plutôt intégrateur/designer, essaie de t'en sortir en CSS. Le HTML de Drupal contient déjà beaucoup d'id et de classes sur lesquels faire porter tes styles.

En l'occurrence, si tu veux afficher le libellé des champs dans une colonne et les champs eux-mêmes dans une autre, tu n'as pas besoin de tableau, tu peux t'en sortir en réglant l'alignement des balises appropriées via CSS (si ce que je dis ne te parle pas, regarde un exemple ici : http://covertprestige.info/css/formulaires-sans-tableau/)

Si tu es développeur, tu peux créer un module qui implémente le hook_form_alter(). Cette fonction te permet de manipuler n'importe quel formulaire Drupal et d'injecter des bouts de HTML dedans, des classes CSS, de changer l'ordre des champs...

ok
je suis plutôt développeur
si tu as un exemple d'implémentation de la fonction ?
faut il appeler la fonction dans le $form (comme une fonction de validation) ?
est ce un module externe au module user (je ne souhaite pas refaire la roue, les tests etc) , ce module s'articule t il autour du module user !

en fait,je ne suis pas un habituer Drupal,
depuis que le projet est lancé, j'arrive à développer de manière transversale à travers les différents modules etc. Mais tout ça de manière simple
alors un hook de user... j'sais pas trop ?

si tu as un exemple ?

merci

C'est difficile de t'expliquer ça en quelques mots.

En gros, pour utiliser un hook (n'importe quel hook), il faut créer ton propre module et dedans mettre une fonction dont le nom correspond au hook que tu veux utiliser.

Par exemple, pour utiliser le hook_form_alter() dans un module de ta création appelé toto, voici le code à mettre dans ton module (toto.module) :

<?php
function toto_form_alter(&$form, &$form_state, $form_id) {
 
// ici, ton code à toi
}
?>

Note que j'ai trouvé les arguments du hook sur la doc et que j'ai renommé "hook" par le nom de mon module.

Une fois ton hook créé, avec le nom et les arguments appropriés, Drupal l'appellera automatiquement au moment opportun (sous réserve bien sûr que ton module toto soit activé). Le "moment" dépend des hooks : le hook_form_alter() est appelé AVANT l'affichage de chaque formulaire et sert à modifier les formulaires, mais d'autres hooks seront appelés à d'autres moments.

Le hook que j'ai créé dans mon exemple ne fait rien. Pour obtenir un résultat, il faut mettre du code à l'intérieur du hook. En l'occurrence, ici, il faut modifier la variable $form qui contient le formulaire sous forme d'array PHP.

Par exemple, pour supprimer le champ mot de passe sur le formulaire de login :

<?php
function toto_form_alter(&$form, &$form_state, $form_id) {
  if (
$form_id == 'user_login_block') { // si on est sur le form de login
   
unset($form['pass']);         // supprime le champ mdp
 
}
}
?>

C'est une explication succincte mais tu as les grandes lignes, tu devrais rechercher des tutoriels sur la création de modules, on en trouve un peu partout.

Pour une disposition en 2 colonnes, le plus simple et le plus rapide reste l'usage des css.

L'utilisation du "float" particulièrement.
Pour facilité le tout, il est possible de rajouter facilement du markup hmtl pour regrouper les 2 paquets de champs et juste "float:left" les deux conteneurs.

Pour cela il faut utiliser le hook_form_alter comme proposé par Vincent et utiliser la Form API en particulier #prefix et #suffix qui permettent de rajouter du markup html avant et après un champs