Stilare webform block in Drupal

Controllo sul layout del webform tramite template.php

creazione siti drupal

Stavo lavorando alla realizzazione del sito web phonopress.it e nella pagina contatti ho aggiunto un webform, utilizzando il praticissimo modulo webform block di Drupal. Ho voluto poi spingere il tutto un pochino oltre al classico layout incolonnato proponendo una soluzione a due colonne, con a sinistra i campi e a destra la textarea, come potete vedere in questa pagina.

Per stilare il form ho scoperto un semplicissimo metodo grazie a Ixis che vi riporto di seguito sperando potrà essere utile a qualcuno.

 

Fondamentalmente si tratta di usare una funzione standard delle API di Drupal per andare ad aggiungere un prefisso e un suffisso ai campi che vogliamo del form, in questo modo andremo ad utilizzare come prefisso l'apertura di un div con relativa classe e come suffisso la chiusura del div. Avremo cosi i campi che ci interessano racchiusi in div e il processo di styling e layout tramite css diventa a quel punto una passeggiata.

 

La funzione è generale e andrebbe a colpire ogni form presente sul sito, per questo viene fatto un ulteriore controllo sull'id del nodo del webform in maniera tale da andare ad apportare le modifiche solo sul form che ci interessa. Quindi dovrete cambiare la variabile $vars['nid'] ed assegnarle il valore corretto del vostro nodo.

Altra cosa che dovrete cambiare sono ovviamente i nomi dei campi a seconda della struttura del vostro form e di come vorrette inglobarlo dentro ai vari div che vi serviranno per creare poi il layout della struttura.

Ultima accortezza ovviamente va cambiato il nome della funzione per richiamare il nome del template che state utilizzando sul vostro sito drupal.

 

Ecco la funzione da inserire nel vostro file template.php

 

function phonopress_preprocess_webform_form(&$vars) {
  // Code taken from the webform.module
  if (isset($vars['form']['details']['nid']['#value'])) {
    $vars['nid'] = $vars['form']['details']['nid']['#value'];
  }
  else {
    $vars['nid'] = $vars['form']['submission']['#value']->nid;
  }
 
  // The sitewide webform block needs special layout treatment xx
  if ($vars['nid'] == 11) {
    $vars['form']['submitted']['nome']['#prefix'] = '<div class="messagefields">' . $vars['form']['submitted']['nome']['#prefix'];
    $vars['form']['submitted']['telefono']['#suffix'] = '</div>' . $vars['form']['submitted']['telefono']['#suffix'];
    $vars['form']['submitted']['richieste_preventivi']['#prefix'] = '<div class="messagebody">' . $vars['form']['submitted']['richieste_preventivi']['#prefix'];
    $vars['form']['submit']['#suffix'] = '</div>';
  }
}