logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri

Moduli Webform Block e Highslide. Modulo dei contatti in un blocco.

14/10/2025, by Ivan

Questa lezione è ormai obsoleta:

È meglio utilizzare il modulo Colorbox Node:

http://drupal.org/project/colorbox_node

La descrizione del modulo spiega come utilizzarlo.

In questa lezione analizzeremo le possibilità di creare moduli di contatto nei blocchi del sito Drupal. Per questa lezione ci serviranno i moduli Webform, Webform Block, Contact Form Blocks, Contact (il modulo Contatto è incluso nella distribuzione di Drupal) e proveremo anche a creare un modulo che appaia con un elegante effetto visivo. Iniziamo configurando questi moduli. Cominciamo creando un modulo di contatto. Andiamo su Struttura del sito → Moduli e abilitiamo il modulo Contact.

drupal webform

Il modulo di contatto è accessibile all’indirizzo nome_sito/contact. È possibile aggiungere “contact” all’URL manualmente o accedere alla modifica del modulo di contatto tramite il menu amministrativo Struttura del sito → Contatti.

Per iniziare, dobbiamo aggiungere una categoria di contatti. Infatti, dal sito aziendale devono poter essere inviati messaggi a diversi destinatari: manager, assistenza tecnica, direttore... per ciascuno è bene creare una propria categoria.

Drupal webform

Compilate tutti i campi con l’indirizzo e-mail e il messaggio di risposta automatica. È anche possibile selezionare la categoria predefinita che verrà mostrata ai visitatori quando accedono al modulo di contatto per inviare un messaggio.

webform contatti

Ora, se andiamo alla pagina nome_sito/contact (per comodità si può aggiungere un link a questa pagina nel menu), sarà possibile scrivere un messaggio:

Drupal webform in blocco

Ora dobbiamo configurare i permessi per il modulo Contact, in modo che anche gli altri utenti del sito possano inviare messaggi tramite questo modulo. Andiamo su Gestione utenti → Permessi e assegniamo i permessi a utenti registrati e anonimi.

Drupal webform permessi

Ora anche i visitatori non registrati possono inviare messaggi.

Installiamo il modulo Contact Form Blocks per creare un modulo di contatto in un blocco.

Drupal webform blocco installazione

Dopo l’installazione del modulo Contact Form Blocks, tra i blocchi disponibili dovrebbe comparire un blocco con il modulo di contatto.

Modulo di contatto

È possibile posizionare il modulo di contatto nella regione principale del sito o creare una nuova regione e inserire lì il blocco.

Webform

Ora inseriamo il modulo di contatto in un blocco separato. Installiamo il modulo Webform Block, che richiede anche l’installazione del modulo Webform.

Drupal webform attivazione modulo

Creiamo un nuovo modulo di contatto tramite il modulo Webform. Come creare moduli web in Drupal Webform è spiegato nelle lezioni precedenti.

Drupal webform installazione

Grazie al modulo Webform Form Blocks, ora possiamo visualizzare il modulo in un blocco.

Drupal webform in blocco

Salvate la configurazione: a questo punto, nell’elenco dei blocchi apparirà un blocco con il nuovo modulo di contatto.

Highslide

Abbiamo imparato a visualizzare il modulo di contatto in un blocco. Ora proviamo a farlo apparire con un effetto visivo sopra la finestra principale. Per questo possiamo usare il modulo Highslide. Per installarlo servono anche i moduli Imagecache e Image API. Prima di attivare il modulo, bisogna installare la libreria Highslide JS dal sito http://highslide.com/download.php nella cartella highslide/highslide. Se avete scaricato la libreria con gli esempi, cercate il file highslide.js e copiate solo quello. Va bene anche il file highslide.min.js, ma in tal caso rinominatelo in highslide.js prima di copiarlo.

Nel file README.txt del modulo troverete le istruzioni per l’utilizzo di Highslide.

$options['attributes'] = array('class' => 'highslide-ajax-link');
$options['fragment'] = 'node-1';

Da qui possiamo vedere che ogni link con la classe highslide-ajax-link si aprirà con l’effetto Highslide. Inoltre, è necessario aggiungere all’URL il parametro ID dell’elemento della pagina da visualizzare.

Aggiungiamo un blocco e inseriamo il seguente codice:

<a href="<?php print base_path(); ?>
contact#contact-mail-page" class="highslide-ajax-link">Scrivici</a>

contact-mail-page – è l’ID del modulo di contatto.

highslide-ajax-link – è la classe necessaria affinché il modulo Highslide funzioni correttamente.

In questo modo è possibile visualizzare qualsiasi link o parte di una pagina con effetto popup.