D2 les 09

Formulieren

We gaan in dit thema  formulieren behandelen. De installatie, werking en het tonen van de resultaten komen aan bod.

We installeren de populaire ‘Webform’ module.

Ik neem de laatste development versie:

We bekijken na installatie de instellingen. Hier krijg je al een idee welke velden je ter beschikking hebt. Merk op dat bij ‘select options’ , de keuzerondjes, vinkjes en keuzelijsten samen zitten.

Er werd ook een inhoudstype aangemaakt met de naam Webform. Als je dus inhoud toevoegt, dan kies je dit om een formulier te maken. De Webform als inhoudstype kan je bijwerken en zo reeds een sjabloon maken voor toekomstige formulieren. Wij doen dit niet en maken gebruik van het basis inhoudstype Webform. Het heeft enkel een titel en een body.

 

Om het straks type te kunnen weergeven in het navigatiemenu passen we het type eventjes aan:

We voegen inhoud toe. Let op dat je niet in het inhoudstype zit!

Je kunt nu velden toevoegen. We beginnen met het tekstveld ‘naam’:

Er zijn verfijningen mogelijk bij de instellingen. Je kunt ze bvb verplicht zetten en uniek.

Soms is de verfijning wel belangrijk. Ze kies je voor geboortedatum een bovengrens:

En voor de foto kan je een filter zetten:

Bij het invoeren van een veld met een getal kan je ook verfijnen:

Bij de keuze van ‘grid’ kan je een tabelletje maken:

Deze zijn de instellingen. Je moet zowel de sleutel (key)als de leesbare tekst weergeven(label). Zo kan je bvb keuze 1,2,3,4 koppelen aan de labels. Wij doen dit hier niet.

Je kunt ook verborgen velden introduceren. Daarvoor heb je een aantal variabelen ter beschikking:

We passen dit toe en willen de gebruikersnaam detecteren.

Bij de Select options heb je drie mogelijkheden: Keuzerondjes bvb voor het geslacht; man/vrouw

Een keuzelijstje om het beroep op te vragen:

Kies je voor multiple keuze (meervoudig) dan krijg je vinkjes in plaats van keuzerondjes. Hier vraag ik naar de status van de verschillende kinderen:

Je zou nu onderstaand geheel moeten krijgen:

   

Het formulier heb ik in 2 delen gesplitst:

Dat doe je allemaal bij de Webform instellingen:

Stel het formulier zo in dat je een mailtje krijgt als er iemand gegevens instuurt. Geef ook de Submit knop een passende naam en zorg voor een bedanking na het verzenden.

Een voorbeeld van een bevestigingstekstje:

Tijd om eens te testen…  We vullen gegevens in en verzenden ze. Het resultaat kan je zien met de tab ‘resultaten’. De foto wordt als link weergegeven.

De pagina wordt verdeeld volgens de pagebreak:

We verwachten ook een mail, aangezien onze mailinstellingen zo opgesteld zijn. We hebben echter onze Xampp Mercury mailserver niet geïnstalleerd. We krijgen wel in de map mailoutput de mail te  zien en zijn daar tevreden mee. Bij een werkelijke hosting hebben ze altijd een mailserver.

Nu gaan we ons formulier verfijnen... We hebben nog geen gebruik gemaakt van ‘fieldset’.  Met deze tool kan je velden groeperen tot een geheel en er een naam aan geven. We maken set aan met de naam ‘verplichte gegevens’… en zetten naam en e-mail als veld er in. Zie je deze velden inspringen? Maak ook dat deze velden effectief verplicht zijn (mandatory).

Nu zie je het resultaat:

Bij select options kan je ook gebruik maken van lijsten (tabellen) die reeds aanwezig zijn. Zo is er een lijst met de landen:

Maak dat België standaard staat..

Kan je ook zelf een lijst maken… Ga naar dit bestand:

Open het bestand webform.options.inc met Notepad ++ of iets analoogs. Je vindt er de reeds aanwezige lijsten. We vullen als voorbeeld aan met een optie gemeenten:

Daarna geven we de gemeenten van onze schoolvestigingen weer (als test, later komen alle gemeenten):

Vanaf nu is dit als een pre-built lijstje aanwezig.

Wil je alle gemeenten van bvb België, dan heb je wat werk te doen… Haal de gemeenten van het internet en bewerk ze in Excel tot ze het juiste formaat hebben.  Zorg ook dat de enkelvoudige aanhalingstekens vooraf gegaan worden door een backslash. Dit is de php code om een ‘ letterlijk te nemen. Het is anders het signaal om een tekststring te definiëren. Als er één ‘ blijft staan dan toont hij de pagina niet. Sindsdien vervloek ik de inwoners van Sint-Job-in ’T Goor… Ik heb een half uur gezocht naar hun aanhalingsteken … Zorg ook voor een nummering, anders gaat de alfabetische volgorde verloren…

Plak in het bestand. Zie je de \ ‘  voor Abbaye?

Alle gemeenten van België…

Pas nu het formulier aan dat Lokeren als standaard getoond wordt (welk nummer heeft de gemeente?) Onze verfijning van de options ziet er nu zo uit:

Laat ons nu eens kijken hoe we aan de wereld onze resultaten kunnen tonen. Tot hiertoe konden we dit via resultaten zichtbaar maken. Stel dat we dit echter aan iedereen willen tonen? We maken een nieuwe view aan:

Zo zien de basis instellingen er uit. Maak desnoods een menu aan.

Het resultaat is bedroevend. Enkel een lijstje met het aantal ID’s… pover.

We gaan velden toevoegen. We zien echter dat de velden allemaal structurele velden zijn. De datum van inzenden bvb.

Onderaan staat er gelukkig een link om de ‘submissions’ weer te geven. We activeren dit.

Het resultaat heeft nu een link om de geposte gegevens te bekijken.

Als je uitlogt krijg je echter enkel weer de SID te zien… Niet bepaald onze bedoeling. Wat er ontbreekt is de mogelijkheid om de zelfgemaakte velden uit het formulier te gebruiken in de view. Drupal is fantastisch wat webforms betreft, maar om nu de velden ook aan anderen te tonen... hou je vast aan de takken van de bomen. Volgend onderwerp gaat dan ook over MySQL Views.

We hebben in dit thema de installatie, het maken,  gebruiken én het tonen van een formulier gezien. Tenslotte kan je nog Captcha op je formulier instellen. Geen slecht idee als je formulier open staat voor iedereen. Vergeet niet het vinkje aan te zetten zoals hieronder getoond. Dan pas komen de webform mogelijkheden zichtbaar. Wil je het ene formulier beschermen en het andere niet... geen probleem. Kijk in de broncode welke ID het formulier heeft en pas zo je instellingen aan. Hier heeft mijn formulier de ID; client_webform_10

Mijn manier is de volgende: zet het vinkje aan en ga naar het formulier in de front. Je zult daar een captcha-instelling vinden. Zet deze aan. Dan komt automatisch het formulier bij de instellingen (=bij de admin pagina's) te staan.