Aprire un formulario di Drupal dentro un modal di Bootstrap

Ormai è difficile sviluppare un sito con Drupal senza il bisogno di creare un tipo di contenuto dedicato esclusivamente ai visitatori. Ad esempio, un semplice formulario di contatto oppure un sistema di feedback. Tante volte, risulta pure più amichevole per l'utente accedere a questo formulario attraverso un modal.

Ci sono tante soluzioni che ci permettono l'implementazione di un modal o lightbox. Come modal_forms, colorbox, Twitter Bootstrap Modal, Lightbox2, jQuery Lightbox e tanti altri. Oggi non parleremo di nessuno di questi moduli.

Drupal + Bootstrap

Sviluppare un subtheme di Bootstrap ci da il potere di utilizzare tutti i componenti di questo fantastico framework, modal incluso. Alcuni di questi componenti si possono configurare facilmente dall'interfaccia web.

Impostazioni subtheme di Bootstrap

Prima di cominciare

Creare il nuovo tipo di contenuto e dare a questo i permessi necesari. Lo chiameremo feedback. Quindi, visitando /node/add/feedback dovremo vedere il nostro formulario.

Dopo di che, verificare che il componente modal nelle configurazioni del subtheme sia abilitato. Nel file nomedeltheme.info dovrebbe esserci questa linea:

scripts[] = 'bootstrap/js/modal.js'

Adattare la pagina che carica il formulario

Dentro un modal (o lightbox) non abbiamo bisogno di headers, footers, sidebars.. ci interessa solo il formulario. Dunque, per dare alla pagina del formulario una nuova faccia, diversa dal resto del sito, bisogna creare il file page--node--add--feedback.tpl.php dentro la cartella theme/system

La documentazione di Bootstrap ci insegna come scrivere il codice HTML per il modal. La nueva pagina per il formulario sarebbe più o meno così:

<div class="modal-dialog">
  <div class="modal-content">

    <div class="modal-header">
      <?php if (!empty($title)): ?>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title"><?php print $title; ?></h4>
      <?php endif; ?>
    </div>

    <div class="modal-body">
      <?php print $messages; ?>
      <?php if (!empty($page['help'])): ?>
        <?php print render($page['help']); ?>
      <?php endif; ?>
      
      <?php if (!empty($action_links)): ?>
        <ul class="action-links"><?php print render($action_links); ?></ul>
      <?php endif; ?>
      <?php 
        print render($page['content']); 
      ?>
    </div>
  </div>
</div>

Creare il link che aprirà il modal

Seguendo ancora la documentazione di Bootstrap possiamo vedere come creare l'elemento che farà aprire il modal in Drupal.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Nel nostro caso possiamo creare un nuovo blocco con questo codice:

<p>Send <a data-toggle="modal" href="node/add/feedback" data-target="#feedback-modal">feedback</a></p>

È importante che il valore del parametro data-target sia uguale al selector jQuery del contenitore del nostro formulario, in questo caso #feedback-modal