Een kant en klaar recept voor een Super Forms betaalformulier
Het is al weer een tijdje geleden dat ik Super Forms op mijn site heb besproken. En dat is eigenlijk niet helemaal terecht, omdat dit een eigenlijk een heel krachtige formulieren plugin is. Dat verzuim maak ik graag goed door je te laten zien hoe je met Super Forms een betaalformulier voor evenementen kan maken.
Nu zijn er natuurlijk talloze manieren om jouw evenementen zichtbaar te maken op een website. Er zijn bijvoorbeeld kant en klare evenementen plugins en in een eerder blogartikel heb ik je ook uitgebreid beschreven hoe je met Elementor Pro zelf een compleet reserveringssysteem voor je trainingen of evenementen kan maken.
In dit blogartikel laat ik je zien, dat het ook anders kan. In een aantal stappen maak ik een Super Forms betaalformulier, dat heel veel opties biedt.
Hierbij is een drietal plugins noodzakelijk. Allereerst WooCommerce, want dat zal gaan dienen als ‘engine’ voor de betalingen en facturering. Daarnaast Super Forms. En tenslotte een add on voor Super Forms waardoor we WooCommerce en Super Forms kunnen koppelen. Daarnaast is natuurlijk ook een plugin voor de betaalkoppeling met jouw payment provider nodig, omdat standaard WooCommerce alleen PayPal ondersteunt.
Wat gaan we bouwen?
Het mag duidelijk zijn, we gaan een Super Forms betaalformulier voor evenementen bouwen. Maar wat moet dat formulier kunnen?
Niet zo gek lang geleden kwam ik in contact met een nieuwe klant. Deze wilde een systeem voor reserveringen, waarbij hij niet alleen voor het evenement moet kunnen boeken, maar ook voor verschillende add-ons.
Omdat ik niet graag met ‘echte klantgegevens’ werk voor een voorbeeld, gaan we in dit artikel uit van een bedrijf wat Cosplay evenementen organiseert. Mocht je niet weten wat ‘Cosplay’ is, dan legt Wikipedia je dit graag uit.
- Zo’n Cosplay conventie duurt vaak meerdere dagen, dus we geven gelijk ook de mogelijkheid om een kamer te boeken. Voor het gemak is er maar één kamertype.
- De deelnemers kunnen desgewenst een ‘goodie bag’ met allerlei leuke dingen bestellen.
- En ten slotte is het mogelijk om met een bekende artiest samen op de foto te gaan.
Kortom, behalve het evenement zelf, zijn er drie verschillende zaken, die de conventieganger kan ‘bijboeken’. En in de praktijk zullen dat er veel meer zijn. Want qua kamers zal je waarschijnlijk verschillende opties aan willen bieden, mogelijk met- en zonder ontbijt en vaak is het bij dit soort conventies zo, dat er niet één bekende artiest bij de meet- and greet sessies zijn, maar dat dit er enkele, tot enkele tientallen zijn.
Kortom, je betaalformulier voor evenementen moet heel wat opties aankunnen.
Tijdens mijn bespreking van de plugin voor samengestelde producten heb ik al uitgelegd, waarom ‘product variaties‘ hier geen optie is. Je zou een bijna oneindige lijst aan product variaties toe moeten voegen.
Maar waarom geen samengesteld product?
Maar, als ‘product varianten’ geen optie is, waarom maken we er dan niet gewoon een samengesteld product van?
Op zich is dat een heel goede en geldige mogelijkheid wanneer het alleen om de producten zou gaan. Maar je kan je voorstellen, dat de organisatoren van zo’n conventie ook andere informatie kunnen willen weten.
Bovendien is een ‘samengesteld product’ natuurlijk in de eerste plaats… een product. En misschien wil je die hele product layout niet. In het geval van mijn klant waren er in ieder geval voldoende redenen om niet voor ‘samengestelde producten’ te kiezen, maar te kijken naar een andere oplossing.
De opzet met Super Forms
Om het Super Forms betaalformulier te maken moeten we eerst een aantal producten hebben. Dus in onze ‘WooCommerce’ winkel voegen we deze producten toe. Dit zijn achtereenvolgens
- Toegang tot het evenement.
- Overnachtingen
- Goodie bag
- Meet & greet
Belangrijk is hier dat je aangeeft dat het ‘verborgen producten’ zijn. Je wilt ze niet ‘los’ in je winkel terugvinden.
Bovendien is het van belang, dat we van al deze producten de id’s even noteren. Die ID’s krijg ik te zien door in het productoverzicht over een specifiek product te gaan met de cursor.
In mijn geval zijn dat dus 62, 63, 64 en 65
Het formulier maken
Voor de volgende stap gaan we naar Super Forms en maken het formulier. Omdat de adresgegevens worden ingevuld tijdens het afrekenproces van WordPress zelf, hoef je hier alleen de gegevens met betrekking tot de producten in te vullen.
Nu is Super Forms zelfs heel duidelijk gedocumenteerd hoe het werkt. Helaas is dat met de WooCommerce plugin voor Super Forms niet zo. Ik zal het zo gedetailleerd mogelijk bespreken, mocht je nog vragen hebben, dan ben je vrij deze hieronder te stellen. Bedenk je wel, dat ik niet de maker van de plugin ben, dus ik weet ook niet alles.
Ervan uitgaand dat jij de benodigde plugins al geïnstalleerd en geactiveerd hebt, beginnen we dus heel eenvoudig met het ‘op het formulier slepen’ van een checkbox veld en hier de omschrijvingen ‘Overnachtingen’, ‘Goodiebag’ en ‘Meet&Greet’ aan geven.
Met betrekking tot de bedragen moet hier een opmerking gemaakt worden. Er is geen actieve koppeling met WooCommerce in deze fase van het proces, dus het is niet mogelijk om de prijzen vanuit de database te laten zien. Je zal dus tweemaal de prijs in moeten geven: Eenmaal bij het product en eenmaal in het formulier. Tenminste wanneer je op dit scherm de prijzen ook wilt laten zien. Dat doe je dus door de prijs gewoon achter de omschrijving te zetten, zoals je hieronder ziet.
De berekening
Wanneer je dit deel van het formulier hebt, begint de werkelijke magie. Wanneer ik iets aanklik, dan wil dat zeggen dat ik het onderliggende product eenmaal wil bestellen. Ik kan immers alleen als deelnemer deze zaken bestellen en ik kan nu eenmaal niet in twee kamers overnachten en de organisatoren staan mij ook niet toe twee goodie bags mee te nemen.
Maar deze waarden moet ik ‘onder water’ toevoegen. Wat ik moet doen is voor ieder product één ‘verborgen veld’ toevoegen, wat de waarde één krijgt, indien het bijbehorende vakje is aangevinkt, en de waarde nul, als dat niet het geval is.
Om dat te doen voeg ik dus een verborgen veld toe. Dat verborgen veld geef ik een overeenkomstige naam met de waarde van de checkbox. Dus ‘is_overnachting’ is het verborgen veld behorend bij overnachting. Enzovoorts.
En nu komt het echt ingewikkelde deel van je betaalformulier voor evenementen. De conditionele logica. En bovendien een vervelende ‘feature’ die ik eigenlijk niet helemaal begrijp.
Terwijl ik het betreffende element geselecteerd heb, kies ik in de lijst met instellingen voor dat ‘hidden’ element, dat ik de ‘Voorwaardelijke variabele (dynamische waarde) aan wil passen.
Vervolgens geef ik bij ‘maak van veld een variabel’ de waarde ‘Ingeschakeld’ in. Je ziet het hierboven.
Om een mij onbekende reden worden hier twee voorwaarden verwacht. Ik heb er maar één.
Dus in het eerste veld geef ik in, dat het veld ‘options’ de waarde ‘overnachtingen’ moet hebben (CONTAINS). In de tweede voorwaarde geef ik in dat het veld niet de waarde ‘fietsbel’ mag hebben (DOES NOT CONTAIN). Een niet bestaande waarde dus. Wat je hier nog niet ziet in de voorwaarden, is dat ik in het veld daartussen nog de conditie ‘AND’ moet kiezen.
Doe ik de ‘fietsbel truc’ niet, dan krijg ik niet de resultaten die ik zou verwachten (ieder ander woord dan ‘fietsbel’ is ook goed, zolang het maar geen voorkomende waarde is).
Wat ik dus vertel is, dat indien ‘Overnachtingen’ is aangevinkt een variabele ‘is_overnachtingen’ de waarde 1 moet krijgen. Anders heeft deze geen waarde, wat in de berekening gelijk wordt aan de waarde 0.
Hetzelfde doe ik voor de andere twee velden.
De producten doorgeven
En nu is het tijd om ook via dit formulier de producten door te gaan geven. Om dit te kunnen doen moeten we een bepaalde syntax gebruiken die er nogal cryptisch uitziet.
Super Forms werkt namelijk met zogenaamde tags’. En in jouw betaalformulier voor evenementen gebruik jij deze ’tags’ om variabele waarden door te geven. Het is ook mogelijk om direct vaste waarden door te geven. Een variabele waarde geef ik tussen accolades door, zoals {is_overnachtingen}, een vaste waarde gewoon als een tekenreeks, dus bijvoorbeeld 63.
Het algemene formaat is
product_id|aantal|variatie_id
Dus
63|{is_overnachtingen}
wil zeggen, dat ik van product 63 de waarde in is_overnachtingen (0 of 1) wil bestellen.
Voor de volgende stap moet ik bij de ‘Formulier instellingen’ zijn. En hier geef ik de volgende waarden op:
Voor wat betreft de eerste vier checkboxes, wanneer je alleen de evenement gerelateerde trainingen verkoopt, dan is het een goed idee om ‘Empty cart before adding products’ aan te klikken, evenals de andere twee velden.
Heb je een webwinkel waar mensen ook andere producten kunnen bestellen, is het een goed idee om dit juist niet te doen.
In het veld ‘Enter the product(s) is… etc staan de volgende regels:
62|1
63|{is_overnachtingen}
64|{is_goodiebag}
65|{is_meetandgreet}
Wat ik hier in feite zeg is :
- Product 62 moet altijd in de winkelwagen.
- Van product 63 moet het aantal wat in is_overnachtingen staat (0 of 1)
- Van product 63 moet het aantal wat in is_goodiebag staat (0 of 1)
- Van product 63 moet het aantal wat in is_meetandgreet staat (0 of 1)
In dit zelfde panel staat nog veel meer informatie, maar daar doen we op dit moment niets mee. We gaan nog even helemaal naar de onderkant van het panel.
Ik kan hier namelijk kiezen of ik wil dat de klant naar de checkout pagina gestuurd wordt, of dat ik deze via de winkelwagen naar de checkout wil sturen.
Ik wil dit niet via de winkelwagen, omdat ik wil voorkomen dat de klant deelname aan het evenement (product 62), wat verplicht is om de andere producten te kunnen kopen zou kunnen verwijderen.
Wat ik hier ook uit heb gezet is het verzenden van een email vanuit Super Forms. De email die WooCommerce zelf verzend zijn voor mij voldoende.
Super Forms kan nog veel meer!
Dit is nog maar een globaal idee van wat mogelijk is met je betaalformulier voor evenementen in Super Forms. Het geeft in ieder geval wel een goede indruk.
Wat hier mist -maar wel toegevoegd zou kunnen worden, door de Super Forms calculator add-on toe te voegen– is bijvoorbeeld een totaalbedrag wat aan en uit gaat afhankelijk van de gekozen opties.
En wanneer er meerdere artiesten zouden zijn voor de meet & greet zou ik voor de meet & greet een apart veld met eigen opties hebben gemaakt.
Voor de kaartverkoop zou ik de klant kunnen laten kiezen voor een bepaalde dag, of voor alle dagen.
Maar dit zijn allemaal uitbreidingen op je betaalformulier voor evenementen die eigenlijk gewoon om meer van hetzelfde soort werk vragen. Het principe is duidelijk.
En heb je behoefte aan dit soort formulieren, maar voel je er weinig voor om het zelf te bouwen, dan is de WordXPression Strippenkaart een goede en voordelige oplossing om het voor je te laten doen.
Blijf bij!
Ik schrijf regelmatig over WooCommerce in mijn blog. Wil je geen blog missen? Schrijf je dan in voor de nieuwsbrief.
Ook is het mogelijk je te abonneren op de browser push berichten. Dan krijg je een melding in je browser, zodra er een nieuwe blogpost is geplaatst. Klik hiervoor op de bel links onder op de pagina en volg de instructies.
Voetnoot
Wanneer je Super Forms op meerdere sites zou willen gebruiken, is het misschien ook goed om te weten, dat de Super Forms plugins ook deel uitmaken van het Envato Elements aanbod.