Les 4

(pdf-versie)

Webform

Inleiding

Webform is een zeer knappe module. De interface is zeer overzichtelijk en de het geheel is zeer goed gedocumenteerd. De mogelijkheden eindeloos. Naast Views wordt Webform gezien als de populairste module in Drupal. Dit hoofdstuk wordt er dan ook volledig aan besteed.

Voorbereiding

  1. Installeer de module Webform (met composer!)
  2. Installeer de module IMCE, nodig voor uploaden van materialen
  3. Je hoeft niet alle submodules van Webform aan te zetten, ik overloop de essentiële klassikaal

webform

  1. Bekijk na het installeren de statusrapportage. Je merkt twee fouten op, de eerste fout lossen we zo meteen op. De vele gele meldingen gaan we gewoon verbergen:

DSN   DSN

  1. Met webform is het mogelijk om een anonieme gebruiker materiaal te laten uploaden. Hiervoor moet er wel een private map worden aangemaakt. Vervolgens moeten we dat ook vastleggen in settings.php
  2. Ga naar de site via het cpanel
  3. Maak een nieuwe map private, op de juiste plaats:

../sites/default/files/private

  1. Navigeer nu naar settings.php, verander de toegangsrechten van de map default en het bestand settings.php naar 0755
  2. Bewerk settings.php (Edit)
  3. Zoek in de code op het trefwoord 'private' en pas aan:

  1. Sla de aanpassingen op
  2. Sluit cpanel NIET af
  3. Ga naar jouw site en kijk naar de statusrapportage en controleer of de foutmelding weg is.

Grote kans dat je eerste de rechten van de mappen eerst moet resetten, de caches moet legen of de cron moet uitvoeren..

  1. Navigeer nu naar Instellingen - Media - Bestandssysteem. Ook hier kan je nu het pad van het afgeschermde bestandssysteem terugvinden

  1. We zorgen er verder voor dat alle foutmeldingen weg zijn bij onze statusrapportage

Webform maken

Zowel bij Structuur als bij Inhoud vinden we nu sporen van de Webform. Eerder schakelden we ook Webform Node in, dat zorgt ervoor dat we eerst een webform kunnen maken bij Structuur om vervolgens inhoud toe te voegen van het type Webform.

  1. Klik even bij Structuur - Webform. Hier zie je een reeks van voorbeelden aanwezig in de module. Klik er eens een paar open en ontdek de mogelijkheden.
  2. Merk op dat er bovenaan zelf een video af te spelen is met daarin een volledige tutorial! De module is dus zeer goed onderbouwd met tips, voorbeelden en video.
  3. Uiteraard maken wij een formulier van nul. Klik daarvoor op Webformulier toevoegen. Neem vervolgens onderstaande gegevens over:

  1. Eens het formulier een feit is kunnen we elementen en pagina's gaan toevoegen. Klik op + Element toevoegen

  1. Je zal merken dat de lijst immens is, ik zei het al, een heel knappe module! Schuif je over het vraagteken, krijg je zelf wat meer info over het element in kwestie. Kies voor Tekstveld

  1. We houden het eenvoudig voorlopig:

  1. Sla dit nu even op. Om dit te gaan bekijken zouden we bovenaan op Test kunnen klikken of Weergeven. Maar je krijgt dan eigenlijk niet perfect te zien wat de gebruiker te zien krijgt. Daarom ondernemen we het volgende:
    1. Kies Inhoud - Inhoud toevoegen - Webformulier
    2. Geef als naam 'Bevraging'
    3. Kies bij webformulier uiteraard voor ons formulier Bevraging
    4. Leg een menulink
    5. Vanaf nu kan je het formulier steeds testen, eventueel zelfs in een andere browser waar je niet inlogt!
    6. Ook veel eenvoudiger werken, je zet gewoon op een tweede scherm open en refreshed. Zie je meteen waar je fout zit.

Je zou eigenlijk ook gewoon de link van het webformulier kunnen gebruiken om daarvan een menulink te maken. Echter is het interessanter om het webform als veld in een inhoudstype te plaatsen. Je kan dan naast het webform ook nog afbeeldingen, tekst,...laten zien.

  1. Voer nu een tweede tekstveld in voor de achternaam
  2. Zorg dat voor- en achternaam verplicht zijn
  3. Voer een helptekst in. Dat resulteert in een handige tooltip voor de gebruiker:

  1. We willen nu ook weten of we met een man of een vrouw te maken hebben. Daarom volgende element:

  1. Vul de gegevens aan:

  1. Op net dezelfde manier, maar anders, willen we nu ook vragen naar de aanspreking. Hiervoor gebruik het element selecteren. Dit is een (voorlopig) Engelstalige lijst:

  1. We vertalen deze opties. Ga naar Webform - Instellingen - Opties en zoek de lijst met Titels. Pas aan naar believen

  1. Voeg opnieuw een element toe. Kies dit keer voor e-mail confirm. Zorg dat het er uiteindelijk zo gaat uitzien:

(zonder schrijffout...)

  1. We vragen nu aan de mensen welke vogels zij reeds zagen in hun tuin. We gebruiken hiervoor onze vogels die reeds op de site staan. Voeg een nieuw element toe: Entity checkboxes
    1. Geef als titel: Welke vogels zag jij al in je tuin?
    2. Kies het juiste inhoudstype
    3. Het zijn vrij veel vogels, daarom zetten we ze in drie kolommen
    4. Geef ook een helptekst mee, dat voor het verkrijgen van de tooltip

Voorwaardelijke velden

Volgende uitdaging: we stellen de mensen de vraag of ze nog andere vogels zagen in de tuin, enkel als ze ja antwoorden krijgen ze de volgende twee vragen te zien: optie tot beschrijving van de vogel en optie tot uploaden van een foto van de vogel.

  1. Voeg een nieuw element toe: Keuzerondjes (dat omdat je bij rondjes maar één ding kan kiezen)
  2. Stel de opties goed in:

  1. Voeg nu een volgend element toe: Tekstvlak
  2. We stellen in:

  1. En nu komt het. Klik bovenaan op het tabblad Voorwaarden om te bepalen wanneer het element al dan niet zichtbaar wordt:

  1. Voeg nu het element Afbeeldingsbestand toe. Dit is een veld dat de gebruiker in staat stelt om foto's toe te voegen. Dit is dan ook de reden waarom we eerder een private map moesten aanmaken. Ook dit element wordt pas zichtbaar als er eerder positief werd geantwoord

Wizard

Voorlopig stoppen we even met elementen toe te voegen. We gaan eerst hetgeen dat we hebben in een wizard gieten. Altijd aangenamer voor de gebruiker.

  1. Voeg een +Pagina toe
  2. Geef deze de naam 'Algemene informatie'

  1. De pagina komt nu onderaan alles te staan. Pas de volgorde dusdanig aan:

  1. Werk meteen verder en voeg nog pagina's toe. Uiteindelijk moet je volgend resultaat bekomen:

  1. We voegen opnieuw een pagina toe. De bedoeling is dat we hierop een aantal elementen plaatsen, gewoon omdat het kan.
  2. Voeg een nieuwe pagina toe en titel deze 'details'. Onderstaande foto toont vervolgens de verschillende elementen die we nog gaan overlopen:

voorwaardelijke

Resultaten

Wanneer iemand het formulier heeft ingevuld op de site dan is het in eerste instantie handig om de resultaten daarvan te raadplegen.

  1. Wanneer je achter de schermen van het formulier gaat kijken, klik dan bovenaan op Resultaten

  1. Je krijgt misschien te veel info te zien. Pas dat even aan onder de knop Aanpassen

  1. Merk op dat wanneer je het formulier onder de weergave Test gaat invullen, er effectief ook een foto wordt geüpload

Mailing

Een melding van een ingediend formulier op de site onder de vorm van een mail? Het kan:

  1. Kies achter de schermen van het webformulier voor Instellingen - Emails / Handlers

  1. Kies + E-mail toevoegen
  2. Bepaal nu in het instellingsvenster:
    1. Naar wie deze verzonden moet worden
    2. Naar jezelf als melding
    3. Naar de invuller ter bevestiging!
    4. Van wie de mail komt
    5. Hoe het onderwerp eruitziet
    6. Hoe het bericht moet worden opgesteld. Je kan hier gebruik maken van Tokens
    7. Als je voor default gaat, welke elementen moeten worden vermeld?
  3. Wanneer je volgende instellingen overneemt, geeft dat volgende resultaat (check de spam!)

Andere instellingen

Om te eindigen bespreken we nog een aantal interessante instellingen klassikaal

Webform Views

  1. Installeer de module met composer
  2. Maak een nieuw overzicht aan die de resultaten van het webformulier gaat weergeven
  3. Merk enkele verschillen op buiten een 'gewone' view:

g