Differences

This shows you the differences between two versions of the page.

--- dvgem:handleiding:voorbeeld:query-string_parameters [2022/03/08 09:59] – aangemaakt root
+++ dvgem:handleiding:voorbeeld:query-string_parameters [2024/01/17 15:05] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+// https://community.drupalvoorgemeenten.nl/t/voorbeeld-query-string-variabelen-gebruiken-in-formulieren/116 //
 ====== Voorbeeld: een formulier prefillen mbv query-string parameters ======
@@ Line 4: / Line 5: @@
 ===== Stap 1: het formulier =====
   * we voegen eerst een formulier toe.
-  * daarin voegen we een selectielijst toe, met de producten die aangevraagd kunnen worden. We vullen er nu twee in, maar dit kan je achteraf altijd uitbreiden uiteraard.// {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_10.56.27.png?400|}}
+  * daarin voegen we een selectielijst toe, met de producten die aangevraagd kunnen worden. We vullen er nu twee in, maar dit kan je achteraf altijd uitbreiden uiteraard.\\ {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_10.56.27.png?400|}}
-  * als standaardwaarde voor dit element stellen we in "[current-page:query:onderwerp]"// {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_10.58.28.png?400|}}
+  * als standaardwaarde voor dit element stellen we in "[current-page:query:onderwerp]"\\ {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_10.58.28.png?400|}}
-  *
+  * Vervolgens voeg je de andere velden toe die je nodig hebt, bijvoorbeeld naam, adres, email\\ {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_11.00.51.png?400|}}
+  * We willen ook een e-mail bevestiging ontvangen als dit formulier ingezonden wordt. Sterker nog, de mail voor de Nee-Nee-sticker moet naar een andere afdeling dan de aanvraag voor de PMD-zakken. Ga dus naar Settings > Emails-handlers > Email toevoegen. Kies bij ontvanger voor het selectie-element dat we toegevoegd hebben. Je krijgt nu de mogelijkheid om voor elke optie een apart e-mail adres toe te wijzen:\\ {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_11.04.08.png?400|}}
+  * Maak de rest van de email af zoals gewenst.
+  * Als het formulier af is, maak je vervolgens een Pagina aan van het type Webform om het formulier te kunnen gebruiken. Mijn formulier ziet er nu zo uit:\\ {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_11.12.53.png?400|}}
+===== Stap 2: de taakpagina's linken naar het formuler =====
+  * Dat is een mooi formulier, maar als ik op de taak nee-nee-sticker aanvragen ben, wil ik dat ik op de "Aanvragen"-knop klik, en dat ik dan niet ook nogeens in het formulier het juiste item moet uitkiezen. Daarom gaan we dit nu koppelen. Kopieer eerst even de url van het formulier, inclusief de eerste schuine streep net na de domeinnaam. Dus als mijn url is: **https://testing.dvgemdemo.hosted-temp.com/bestelformulier**, dan kopieer ik nu **/bestelformulier**.
+  * Ga nu naar de taakpagina voor het product. Voeg een call-to-action knop toe van het type **Externe link**.
+  * Plak hier de url die we net gekopieerd hebben: **/bestelformulier**
+  * Type na deze url een **?**, gevolgd door het laatste stukje van het token dat we in stap 1 aangemaakt hebben: **onderwerp**.
+  * Type daarna een **=** en de naam van het product dat geselecteerd moet worden. Het geheel ziet er dan zo uit: **/bestelformulier?onderwerp=Nee-Nee sticker**\\ {{:dvgem:handleiding:voorbeeld:schermafbeelding_2022-03-08_om_11.21.24.png?400|}}
+  * Sla de taak op.
+Als je nu de taak gaat testen, zie je keurig een call to action button. Als je daarop klikt kom je in het bestelformulier. Het juiste product is geselecteerd. Als iemand de aanvraag invult wordt het mailtje ook nog naar de juiste afdeling gestuurd.
+===== Recap: =====
+De sleutel van dit voorbeeld zit hem in het gebruik van de Query-parameters (variabelen in de url van een pagina die je zelf kan bepalen door na de url een ? toe te voegen en dan naam=waarde). Deze kan je via een token opvragen en gebruiken als standaardwaarde.