Overslaan en naar de inhoud gaan

Drupal tokens gebruiken in een webform

In dit artikel legt Thomas Krooshof uit hoe je met tokens Webform formulieren kunt voorzien van vooraf ingevulde waardes.

foto van formulier

Sinds versie 4 ondersteunt de Webform module standaard Drupal tokens. In dit artikel zal ik laten zien hoe je Tokens kunt gebruiken om Webform velden of teksten te voorzien van dynamische data, daarbij geholpen door Pathauto.

Met deze korte tutorial neem ik alvast een voorproefje op de toekomstige bonusdag op Drupalin24dagen.nl die we zullen wijden aan het maken van formulieren met Drupal en Webform.

Een bestelformulier maken

Stel je hebt een bestel formulier welke zich in een block bevindt naast een product node en je wilt dat het formulier de waarde voor het serienummer automatisch overneemt. Ga dan als volgt te werk.

Stap 1: Modules downloaden

Zorg er allereerst voor dat Webform 7.x-4.x is geinstalleerd. Indien je momenteel gebruik maakt van Webform 3 lees dan eerst deze informatie over upgraden van 3 naar 4. Andere benodigde ingredi├źnten zijn Pathauto en Token.

Stap 2: Een alias instellen met pathauto

Maak een content type product aan met het tekst veld "Product serienummer". Ga nu naar de "patterns" (patronen) pagina in de Pathauto configuratie ( admin/config/search/path/patterns ). Voor het zojuist aangemaakte "product" content type kun je hier bepalen hoe de URL opgebouwd moet worden. We gaan hiervoor gebruik maken van tokens. Klik maar eens op de blauwe Tokens link (vervanginspatronen) en open vervolgens "Nodes"

Uit de lange lijst van mogelijke tokens gebruik ik in dit voorbeeld de node tite (node:title) van de huidige node en het serienummer (node:field-product-serienummer).

Vul deze tokens, inclusief de [ ] haakjes, op onderstaande wijze in in het veld voor het URL patroon voor producten en sla de wijzigingen op.

Laat Pathauto nu eerst de URL alliassen voor alle content opnieuw opbouwen via het Bulk Update (massaal bijwerken) tabblad ( admin/config/search/path/update_bulk ).

Maak dan een product aan ( node/add/product ) met naam "test" en serienummer "001". Sla op en controleer of de URL zich gedraagt volgens het ingestelde patroon ( mijndrupalwebsite.nl/test/001 ).

Leeg zonodig de cache of verwijder alle aliassen ( admin/config/search/path/delete_bulk ) om ze vervolgens opnieuw op te bouwen.

Stap 3: Een Webform aanmaken

Nu dat is gebeurd maken we tot slot een webform formulier aan ( node/add/webform ) met een veld, tekst of getal, voor het serienummer.

Onder de veldinstellingen vullen we een standard value (standaardwaarde) in, de waarde die het veld bevat zonder dat de gebruiker ook maar iets heeft ingevuld. De token die we hiervoor gebruiken is current-page:url:args:last.

Zoals je begrijpt is de waarde van deze token verbonden aan de URL van de pagina die op dat moment door een bezoeker wordt bekeken. "Args" doelt op de laatste waarde waaruit de URL is opgebouwd en dat is in dit geval node:field-product-serienummer. Elke slash "/" in een URL ziet het systeem als het startpunt van een nieuwe waarde.

Wil dit goed werken dan moet deze Webform wel op een product pagina met serienummer gesitueerd zijn. Oftewel, we moeten deze webform nog als block aan de product pagina's hangen. Sla het veld op en ga verder naar de volgende stap.

Stap 4: Formulier in een blok weergeven

We kunnen een webform als blok beschikbaar maken binnen Webform zelf. Ga hiervoor naar de formulier instellingen, te vinden rechts bovenin. Helemaal onderaan, onder advanced settings, kun je de functie "Enable as block" activeren. De naam van het block is gelijk aan die van jouw webform.

Ga nu naar de block overzichtspagina ( admin/structure/block ) en sleep het block naar een geschikte positie. Configureer het block zo dat hij alleen zichtbaar is voor het content type "product".

Voor de block titel gaan we nogmaals een Token invoegen, gewoon omdat het kan. De huidige titel van het bestelformulier overschrijven we met een dynamisch variant: "current-page:url:args:value:2 bestellen".

In plaats van het "last" argument, gebruiken we nu "value:2", wat in in dit geval neerkomt op de node:title.

Zoals gezegd ziet het systeem, vanaf de basis URL gezien, iedere input na een slash "/" als een nieuwe waarde. Het URL patroon dat we hebben ingevoerd begon met "product", dit is het eerste waarde, daarna volgde een slash en de node:title token, de tweede waarde, etc. Voor het serienummer kunnen we dus ook "value:3" hanteren in plaats van "last" (http://www.mijndrupalwebsite.nl/value1/value2/value3/value4/etc).

Klaar

Sla alles op en bezoek een product pagina. Als alles goed is gegaan zie je nu dat het serienummer veld automatisch is ingevuld en zich net als de bloktitel heeft aangepast aan het product dat je bekijkt.

Op dezelfde manier kun je ook andere waarden automatisch laten invullen zoals de auteur van de huidige node. Ook de naam van de gebruiker kun je overnemen indien diegene is ingelogd, hiervoor hoef je uiteraard geen aanpassing te maken aan de URL.

Heb je iets aan deze content gehad? Laat weten hoe je ons waardeert.

Meld je aan voor onze nieuwsbrief

En je ontvangt net als 2321 andere leden een overzicht van onze nieuwste artikelen. Met onderwerpen als; de laatste webdesign trends, SEO tips, conversie optimalisatie, Joomla, Drupal en Wordpress ontwikkelingen.

Reacties

Hallo,

Interessant.
Kan ik met drupal 8 ook een webform maken die wordt verstuurd naar een emailadres in die node?
Groetjes,
Sanne

Standaard avatar sanne 25.09.2016 - 19:20

Als antwoord op door sanne

Hoi Sanne,

Als het goed is moet dat kunnen met de YAML Form module: https://www.drupal.org/project/yamlform.

Succes!

Standaard avatar rroose 26.09.2016 - 07:22

Beperkte HTML

  • Regels en alinea's worden automatisch gesplitst.