De modules Webform Block en Highslide. Contactmodule in een blok.

Deze les is verouderd:

Gebruik beter de module Colorbox Node:

http://drupal.org/project/colorbox_node

In de modulebeschrijving staat uitgelegd hoe je deze kunt gebruiken.

In deze les bekijken we de mogelijkheden om in Drupal formulieren in blokken van de site te plaatsen. Hiervoor hebben we de modules Webform, Webform Block, Contact Form Blocks en Contact nodig (de Contact-module is onderdeel van de Drupal-distributie). Daarnaast proberen we een formulier te maken dat met een mooi visueel effect verschijnt. Laten we beginnen met het configureren van deze modules. We beginnen met het aanmaken van een contactformulier. Ga naar Siteconstructie → Modules en schakel de module Contact in.

Het contactformulier is beschikbaar op het adres sitenaam/contact. Je kunt “contact” toevoegen aan de URL of het formulier bewerken via het beheermenu onder Siteconstructie → Contacten.

Allereerst moet je een contactcategorie toevoegen. Een bedrijfswebsite moet immers e-mails kunnen sturen naar managers, technische ondersteuning, of de directeur — voor elk van hen kun je een aparte categorie aanmaken.

Vul alle velden in met e-mailadressen en automatische antwoorden. Je kunt hier ook aangeven welke categorie standaard wordt weergegeven wanneer gebruikers het contactformulier openen.

Als je nu naar de pagina sitenaam/contact gaat (voor het gemak kun je een link naar deze pagina aan het menu toevoegen), kun je een bericht sturen:

Nu moeten we de rechten configureren voor de Contact-module, zodat andere gebruikers van je site ook via dit formulier berichten kunnen sturen. Ga naar Gebruikersbeheer → Machtigingen en stel rechten in voor zowel geregistreerde als anonieme gebruikers.

Nu kunnen ook gastgebruikers e-mails verzenden via het formulier.

Installeer de module Contact Form Blocks om een contactformulier in een blok te plaatsen.

Na installatie van de module Contact Form Blocks verschijnt er een blok met het contactformulier tussen de beschikbare blokken.

Je kunt het contactformulier in de contentregio van de site plaatsen of een extra regio aanmaken en het blok daar neerzetten.

Webform

Laten we nu het contactformulier in een apart blok plaatsen. Installeer de module Webform Block — hiervoor moet ook de module Webform geactiveerd worden.

Maak een nieuw contactformulier aan via de Webform-module. Over het aanmaken van webformulieren in Drupal met Webform kun je meer lezen in eerdere lessen.

Dankzij de module Webform Form Blocks kunnen we het formulier nu als blok weergeven.

Sla de configuratie op — daarna verschijnt er in de blokkenlijst een nieuw blok met het contactformulier.

Highslide

We hebben geleerd hoe we het contactformulier in een blok kunnen weergeven. Laten we nu proberen het formulier met een visueel effect weer te geven, bovenop het hoofdvenster. Hiervoor kunnen we de kant-en-klare module Highslide gebruiken. Om deze te installeren moeten we eerst de modules Imagecache en Image API installeren. Voordat je de module activeert, moet je de Highslide JS-bibliotheek downloaden van de site http://highslide.com/download.php en plaatsen in de map highslide/highslide. Als je de bibliotheek met voorbeelden hebt gedownload, zoek dan het bestand highslide.js en kopieer alleen dat bestand. Je kunt ook highslide.min.js gebruiken, maar hernoem het eerst naar highslide.js.

Als je het bestand README.txt van deze module opent, vind je daar instructies voor het gebruik van de Highslide-module.

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

Hieruit blijkt dat elke link met de klasse highslide-ajax-link zal openen met het highslide-effect. Je moet ook het ID van het element dat moet worden weergegeven toevoegen aan de link-URL.

Laten we een blok toevoegen en er de volgende code in plaatsen:

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

contact-mail-page — het ID van het contactformulier.

highslide-ajax-link — de klasse die nodig is om de Highslide-module te activeren.

Op deze manier kun je willekeurige links of onderdelen van pagina’s weergeven met dit visuele effect.