Zelf formulieren samenstellen

Zelf formulieren samenstellen

Puerto is de thuishaven van alle data, en in die veilige haven meert echt van alles aan. Enorme cruiseschepen met duizenden gasten en duizend-en-een tot de verbeelding sprekende faciliteiten, maar ook heel bescheiden sloepjes. Als je het jezelf niet te moeilijk maakt, kun je in die laatste categorie heel goed zelf je formulieren maken. Vaar je met ons mee?

Inhoud van deze pagina:

Een nieuw formulier aanmaken
Je eerste formulier-item
Het formulier publiceren
Theming: het uiterlijk van je formulier
Content-items toevoegen
Conditionals
Triggers en Actions

Een nieuw formulier aanmaken

Binnen jouw event vind je de Puerto-module Forms in de linkerbalk onder het kopje Guests. Binnen de module kom je terecht op de overzichtspagina. Een nieuw formulier start je met de +-button, rechts bovenin.

Configuration – Je geeft je formulier een naam (die komt boven het formulier te staan), op basis waarvan een alias gegenereerd wordt. Deze kun je desgewenst aanpassen.

In deze tutorial gaan we ervanuit dat je formulier via een Puerto-link wordt gepubliceerd. De alias maakt in dat geval deel uit van deze Puerto-URL.

Submissions – Met een vinkje geef je aan dat je formulier zichtbaar is en ingevuld kan worden. Handig in de testfase! Als je het vinkje weghaalt, wordt er binnen het formulier een tekst getoond. In de WYSIWYG-editor kun je deze boodschap vormgeven.

Payments – Bied je in het formulier betaalde producten aan, dan kun je in de pull-down een payment service provider kiezen. Zo niet, dan kun je deze instelling ongewijzigd laten.

Met de button Save & add item voltooi je de eerste configuratie en kun je je eerste formulier-item toevoegen.

Je eerste formulier-item

Je komt nu direct in de detailpagina van je eerste formulier-item terecht. Je kunt nu een introtekst toevoegen door bij Type onder Content voor ‘Content’ te kiezen. Geef dit formulier-item een naam (bijvoorbeeld: Introtekst) en gebruik de WYSIWYG-editor om de introtekst vorm te geven. Om je in deze tutorial mee te kunnen nemen in de flow, druk je vervolgens op Save, in plaats van op de paarse Save & add another-button.

Er zijn in onze applicaties drie manieren om wijzigingen op te slaan:
SAVE: Sla op en ga naar het overzicht
SAVE & ADD ANOTHER: Sla op en open een nieuwe pagina om een soortgelijk item toe te voegen
APPLY: Sla op en blijf op de huidige pagina

Het formulier publiceren

Via Save kom je op het items-overzicht van je formulier. Dit is het middelste tabblad, Content. In het linker tabblad (Details) vind je de configuratie uit de eerste stap terug. In het rechter tabblad (Publishing) kun je het formulier alvast publiceren via een Puerto URL. Eventuele andere opties laten we als gezegd in deze tutorial buiten beschouwing. Door het vinkje te zetten wordt de pagina flink uitgebreid.

Theming – daar komen we nog op terug, maar slaan we voor nu even over.

Succes page – Geef hier de tekst vorm die in het formulier verschijnt na het indienen. Dit is vereist voor publicatie, maar kan uiteraard altijd nog worden aangepast.

Google Tag Manager – Hiervan kun je op basis van je eigen GTM-ID gebruikmaken om het gebruik van het formulier te monitoren. Voor de tekst die in de cookie-banner verschijnt doen wij een voorzet. Dezer kun je uiteraard aanpassen als je dat wilt.

Met de Save- of de Apply-button publiceer je jouw formulier. Via Save kom je in het formulier-overzicht terecht, via Apply blijf je op de huidige pagina. Met één verschil: rechts boven het tabbladen-overzicht verschijnt een button met een oogje. Je opent hiermee in een nieuw tabblad een preview van jouw formulier-in-aanbouw.

Theming: het uiterlijk van je formulier

Als je eerst de inhoud op orde wilt hebben, kan dat natuurlijk ook. Maar in deze tutorial komen we – zoals beloofd – eerst nog terug bij de lay-out. Deze is uitsluitend van belang voor publicatie via een Puerto-URL. Wanneer je het formulier binnen Vaya publiceert, wordt de theming van die applicatie gebruikt.

Kleuren (van de header-balk, de achtergrond, buttons en links) kun je selecteren met behulp van een picker (klik op het betreffende gekleurde vierkantje) of invoeren (html-code of naam).

Je kunt een eigen logo (dat in de header-balk wordt geplaatst) en een achtergrond-afbeelding toevoegen. Voor deze afbeeldingen worden JPG- en PNG-bestanden geaccepteerd.

Via Apply sla je je instellingen op. Door je preview met F5 ter verversen, kun je zien hoe je formulier er nu uitziet. Zeker wanneer je afwijkt van de aangegeven voorkeurs-afmetingen van afbeeldingen is dit van belang.

Content-items toevoegen

Nu is het tijd voor het echte werk: de verdere inrichting van het formulier, en daarvoor gaan we terug naar het tabblad Content.

Het Content-item voor teksten ken je al van de introtekst. Dit zogenaamde Field type kun je desgewenst ook gebruiken voor tussenkopjes. Elk item voeg je apart toe met de +-button. De volgorde kun je achteraf nog aanpassen door items te verplaatsen met de pijltjes in het Items-overzicht.

Form field – dit is een veld dat je gasten moeten invullen en daarmee waarschijnlijk het meest gebruikte type. Het is van belang dat aan elk formulierveld een attribuut is gekoppeld waarin de input dient te worden opgeslagen. Als je het veld een naam hebt gegeven (voor eigen referentie) kun je een bestaand Puerto-attribuut koppelen óf een nieuw attribuut aanmaken. Het type dat je een attribuut meegeeft bepaalt of in het formulier een invoerveld of bijvoorbeeld een select list,  toggle of uploadveld wordt opgenomen. Hoe het aanmaken van attributen in zijn werk gaat valt buiten de scope van deze tutorial.

Onder Frontend geef je het veld een label (zichtbaar voor de gast) en eventueel een hint (verschijnt als aanwijzing onder het invoerveld). Als de invoer verplicht is, geef je required in frontend een vinkje. Als een eerdere invoer niet overschreven mag worden (bijvoorbeeld het e-mailadres van de genodigde, zodat dat als identifier kan dienen en gasten die elkaar een persoonlijke aanmeldlink doorsturen elkaar niet kunnen overschrijven), vink je Show as disabled in frontend aan.

Product – Hiermee genereer je een dropdown menu van verschillende producten waaruit de gast er eentje kan kiezen, of móét kiezen, als je deze keuze verplicht stelt. De producten voor dit menu dienen uiteraard eerst in Puerto te zijn aangemaakt.

Conditionals

Je kunt onderdelen van het formulier alleen tonen als aan bepaalde voorwaarden wordt voldaan. In dat geval kies je een van de beschikbare conditionals (bijvoorbeeld: als de gast een specifieke tag heeft, bij de eerste keer invullen en als een select of multiselect een bepaalde waarde heeft).

Deze overkoepelende voorwaarde wordt in de logica van het formulier ingezet als zogenaamde parent. Als je eerder goed hebt opgelet, heb je gezien dat we dat veld een paar keer angstvallig hebben overgeslagen. Wanneer je content toevoegt en de gedefinieerde conditional daarbij als Parent item selecteert, wordt deze content uitsluitend getoond als aan deze voorwaarde voldaan wordt.

Por ejemplo: bij een meerkeuzevraag over het vervoermiddel waarmee je gast naar jouw event komt, bied je een aantal keuzes. Het vrije invoerveld wil je pas tonen als de gast de keuze Anders, namelijk selecteert. Door het vrije invoerveld onder een parent te hangen waarin de keuze 'Anders, namelijk' als conditional wordt geformuleerd, wordt dit specifieke veld niet getoond bij een andere vervoerskeuze.

Triggers en Actions

Een actie van een gast kan als trigger dienen voor een actie vanuit het formulier. Mogelijke acties zijn het inzenden van het formulier, het starten van een betaling en het afronden (succesvol óf niet succesvol) van een betaling.

De mogelijke acties zijn afhankelijk van de instellingen voor jouw event en de rechten die je hebt. De belangrijkste, meest gebruikte acties zijn:

• Het toekennen aan of verwijderen van een tag bij een gast. Bijvoorbeeld de status: present, absent of unknown. Hierop kun je gasten in Puerto eenvoudig filteren.
• Het toekennen van een waarde aan een gast-attribuut.
  • Het verzenden van een e-mail (bijvoorbeeld een bevestigingsmail). Over het maken van e-mails en inrichten van mailcampagnes zijn binnen deze Help & Service-omgeving aparte tutorials beschikbaar.