Handleiding Jotform 2.0

Handleiding Jotform 2.0

Telefoon Tridion helpdesk: 7500 E-mail: [email protected].

Juli 2013

Inhoudsopgave Inhoudsopgave .................................................................................................................... 2 Inleiding .............................................................................................................................. 3 1. Inloggen ...................................................................................................................... 3 Accounts ..................................................................................................................... 3 2. Formulieren maken en beheren ................................................................................... 4 Een nieuw formulier maken ........................................................................................ 4 Velden toevoegen uit de toolbox ................................................................................ 5 Bestaand formulier bewerken ..................................................................................... 5 Kopie maken van een bestaand formulier ................................................................... 6 3. Formulieren op een website opnemen ........................................................................ 7 4. Verzamelde gegevens opvragen en exporteren........................................................... 8 Gegevens opvragen ..................................................................................................... 8 5. Overzicht van velden en veldeigenschappen ............................................................ 11 Toolbox ..................................................................................................................... 11 Power Tools .............................................................................................................. 13 Eigenschappen van een veld ..................................................................................... 14 6. De Wizard ................................................................................................................. 15 7. Meer hulp .................................................................................................................. 18

2

Inleiding Het programma Jotform is door de universiteit aangeschaft om eenvoudig formulieren voor de website te kunnen maken. Deze formulieren zijn niet alleen geschikt voor toepassing in Tridion, maar voor alle universitaire webpagina's. Redacteuren hebben niet veel ervaring nodig om met het programma te kunnen werken. Door het slepen van de gewenste onderdelen naar een leeg formulier kan een formulier op maat gemaakt worden.

1.

Inloggen

Log in op www.jotform.leidenuniv.nl.

Accounts Een gebruikersnaam en wachtwoord vraag je aan bij: [email protected]). Vermeld daarin: de gewenste gebruikersnaam met bijbehorend wachtwoord, en een e-mailadres waaraan het account wordt gekoppeld. Zowel het e-mailadres als het wachtwoord kunnen na inloggen onder knop "account" gewijzigd worden. 3

2.

Formulieren maken en beheren

Een nieuw formulier maken Na het inloggen krijg je automatisch een nieuw standaardformulier voor je, zoals op het plaatje hieronder. Hiermee kun je meteen aan de slag.

1

6 4 3

2

5

Je kunt ook bovenaan het formulier in de menubalk "New" (1) kiezen. Je krijgt dan een menu waarin een aantal formulieren staat. Je kunt hier kiezen uit elf (Engelstalige) standaardformulieren die je kunt aanpassen, of een "blank form" waarin je zelf alle benodigde velden kunt plaatsen. De verzendknop (Submit) is standaard aanwezig. Op elk formulier moet ook standaard een Captcha veld toegevoegd worden. Dit voorkomt misbruik door spam. Je vindt dit veld onder Power Tools – zie hoofdstuk 5 voor meer informatie over dit veld. Als je begint met het standaardformulier kun je klikken op de veldnamen (zoals First name, Address) om ze te hernoemen (3, klik op de veldnaam en typ), verwijderen (4, klik op het rode kruisje) of verplaatsen door ze te slepen. Om de titel van je formulier (nu nog "Untitled Form 1") aan te passen, klik je daar op en vul je de gewenste titel in. N.B.: Gebruik hier géén apostrof!

4

Velden toevoegen uit de toolbox Rechts naast het formulier vind je de toolbox (2), waarin de verschillende soorten velden staan die je in je formulier kunt gebruiken. Zie het overzicht in hoofdstuk 5 van deze handleiding voor een uitleg van de verschillende soorten velden. Uit de toolbox kun je nieuwe velden erbij slepen. (Tip: Lukt het slepen niet als u werkt met Windows 7, druk dan de toets F12, vervolgens Alt-8 en ten slotte weer F12. Hierdoor wordt de “Document Mode” op “IE8 Standards” gezet.) Klik op het veld dat je wilt gebruiken en sleep het naar de juiste plaats in het formulier. Vaak springt hij naar een regel te hoog of te laag, maar dat is normaal. Je kunt het veld gemakkelijk alsnog naar de juiste plek slepen. Klik op de standaardtekst Click me to edit… om het veld de juiste naam te geven. Onderaan het menu kun je de eigenschappen (5) van het formulier en de velden aanpassen. Klik op het veld waarvan je de eigenschappen wilt aanpassen. Wanneer je kiest voor een dropdown menu, checkbox of een radiobutton (verschillende keuzelijstjes, zie hoofdstuk 5), kun je hier de verschillende opties van je lijstje invoeren. Door met de enterknop naar een nieuwe regel te gaan, maak je een een nieuwe optie in de lijst aan. Als je klaar bent met het toevoegen van opties, klik je op de knop Done. Je lijst wordt dan in het formulier ingevoegd. Een andere veelgebruikte eigenschap is Required. Door hier yes in te vullen, moet het betreffende veld verplicht worden ingevuld. Achter de veldnaam komt een rood sterretje te staan. Het formulier kan niet verstuurd worden als dit veld niet is ingevuld. Meer uitleg over de hier aan te passen eigenschappen vind je op pagina 14. Sla na het bewerken het formulier weer op door te klikken op "Save" (6).

Bestaand formulier bewerken Klik na het inloggen op het icoon "mijn formulieren" rechts bovenaan.

Je krijgt dan een lijst van alle aanwezige formulieren te zien. Soms staat daarbij "Untitled form 1", het standaard blanco formulier dat je na het inloggen te zien krijgt.

5

Klik op de titel van het formulier dat je wilt bewerken – er komt een kader omheen te staan en je krijgt drie extra icoontjes te zien: een potlood, een vergrootglas en een kruis.

Klik op het potlood en je komt weer in het scherm waarin je het formulier kunt bewerken. Klik op het vergrootglas om een voorbeeld van de huidige versie te bekijken. Klik op het kruis om het formulier te verwijderen.

Kopie maken van een bestaand formulier Vaak zul je telkens met dezelfde soort formulieren werken. Je wilt bijvoorbeeld een aanmeldingsformulier maken voor een cursus, dat veel lijkt op een aanmeldingsformulier voor een eerdere cursus. In dit geval hoef je niet het hele formulier opnieuw te maken: je maakt in twee keer klikken een kopie van het oude formulier! Hiervoor ga je helemaal rechts bovenin naar "mijn formulieren". Klik op de titel van het te kopiëren formulier zodat er een kader omheen komt te staan. Klik nu bovenin op "Clone".

Je krijgt er nu een nieuw formulier bij: "Titel oude formulier Clone". Dat kun je hernoemen naar wat je wilt door op de titel te klikken.

6

3.

Formulieren op een website opnemen

Als je formulier af is, moet hij op een website geplaatst worden. Klik op het formulier dat je wilt gebruiken en kies bovenaan "source".

Je krijgt nu twee mogelijkheden om de code van je formulier te kopiëren: Option 1: Embed Form into Your Site Option 2: Copy Full Source Code of your Form Om je formulier in een website te plaatsen, gebruik je Option 1. Klik op de knop Copy rechtsboven het gele veld.

Als je het formulier in Tridion geplaatst wil hebben, plak je de tekst nu in een mailbericht aan de Tridion helpdesk. Zij kunnen het formulier voor je op de pagina plaatsen.

7

4.

Verzamelde gegevens opvragen en exporteren

Gegevens opvragen Elke keer dat iemand je formulier invult, ontvang je een e-mail met de gegevens die zijn ingevuld. Deze mail wordt verzonden naar het e-mailadres dat aan het account is gekoppeld. Jotform slaat de gegevens ook op in een database. Je hoeft de gegevens dus niet over te typen uit de mail: Jotform kan een mooie Excel-tabel voor je maken! Om het overzicht (rapport) op te vragen klik je in "Mijn formulieren" op het formulier waarvan je de gegevens wilt opvragen en dan op "Reports".

Je kunt nu een rapport samenstellen.

8

1. Time frame Kies de periode waarover je de aanmeldingen wilt zien – laat de velden zoals ze zijn om alle aanmeldingen te zien, of vul bij "from" bijvoorbeeld de datum in van je vorige export, om de aanmeldingen sinds die tijd te krijgen. 2. Fields Je kunt hier eventueel een aantal velden verbergen door het vinkje weg te halen. (Waarschijnlijk wil je het IP-adres van de verzender niet in je overzicht.) 3. Output Je rapport kan op verschillende manieren getoond worden: als webpagina: voor een snel overzicht van alle aanmeldingen. Aan het einde van elke rij vind je een rood kruisje waarmee je die rij uit de database kunt verwijderen!

9

-

als Excel-bestand: handig om in te werken en om in een database te importeren. als csv-bestand - een soort tabel in platte tekst. Kan eenvoudig in Excel of Access geïmporteerd worden. als tekstbestand met eigen veldafbrekingstekens (kan ook voor import in een database gebruikt worden).

Klik links onderaan op Next om je rapport te genereren. Kies er voor om het bestand op te slaan op een makkelijk te vinden plek, bijvoorbeeld op je Desktop.

10

5.

Overzicht van velden en veldeigenschappen

Achtereenvolgens worden de Toolbox, de Power Tools en de eigenschappen van een veld besproken.

Toolbox Standaardvelden uit de toolbox:

Text: een vrij tekstveld, bijvoorbeeld voor uitleg bij een onderdeel van het formulier. Je kunt alleen "platte" tekst invoeren, en er zijn geen opmaakmogelijkheden. Gebruik voor opmaak het html-veld onder Power Tools. Heading: koptekst. Komt met grote letters in het rood te staan. Textbox: een standaard invulveld voor je formulier. Textarea: een groter invulveld, om iemand bijvoorbeeld een opmerking of bericht van meerdere regels te laten invullen.

11

Dropdown: keuzelijst, handig bij grotere lijsten. Als je op het pijltje klikt, krijg je de hele lijst te zien. Dit veld maakt je formulier niet onnodig lang. N.B.: Automatisch wordt begonnen met een leeg veld. Maak dit dus niet aan. Voorbeeld: Geef aan in welke provincie je woont (keuze uit 12 alternatieven). Groningen

Checkbox: keuzelijstje, te gebruiken voor kortere lijsten. De gebruiker kan meerdere vakjes aanvinken. Bijvoorbeeld: Geef bij de bestelling de gewenste extra's aan: salami champignons ham De bezoeker kan bijvoorbeeld zowel salami als ham kiezen.

Radiobutton: keuzelijstje, te gebruiken voor kortere lijsten. De gebruiker kan maar één vakje aanvinken. Bijvoorbeeld: Geef aan hoe je wilt betalen: Mastercard Visa American Express

DateTimePicker: laat de gebruiker een datum kiezen met een kalendertje. Fileupload: laat de gebruiker een bestand meesturen met het formulier. N.B.: Pas in de Properties (eigenschappen) wel de Max Size aan, want die staat op 50Kb. En check de Extensions (bestandsextensies). Bijvoorbeeld: "pdf" staat er niet bij, maar kan worden toegevoegd. Button: zelf nog een knop toevoegen aan het formulier.

12

Power Tools Velden uit de Power Tools zul je minder vaak gebruiken, maar zijn soms erg handig. Het Captcha-veld moet verplicht aan elk nieuw formulier worden toegevoegd.

Captcha: gaat spam tegen: voor het formulier verstuurd kan worden, moet de invuller van het formulier de letters van het plaatje overtikken. Als de letters niet goed worden overgenomen, wordt het formulier niet verstuurd. Starrating: om de gebruiker ergens een waardering met sterren te laten geven. Passwordbox: ingetypte tekst verschijnt als sterretjes. Formcollapse: om een deel van je formulier mee te verbergen. Door op de balk te klikken, klap je het onderliggende deel van het formulier uit. Autocomplete: vult de tekst automatisch aan tijdens het tikken. Onder Properties (in de rechter kolom) vul je de opties in. Eigenlijk een soort keuzelijstje, waarbij de gebruiker zelf een alternatieve optie kan invullen.

13

BirthDatePicker: datumkiezer. HTML: een veld waarin je vrij html kunt invoeren. Opgemaakte tekst met links, plaatjes, alles. Gebruik de wysiwyg editor of typ zelf de html code in. Als je klaar bent, klik dan op Complete. Image: voeg een plaatje toe aan je formulier.

Eigenschappen van een veld De eigenschappen van elk veld zijn in het vak Properties (rechter kolom) aan te passen. Wanneer je een veld aanklikt, verschijnen in de rechter kolom de bijbehorende eigenschappen. Die kun je dan aanpassen. Label: de "titel" van een veld: wat er vóór het invulvakje op het formulier staat. Bijvoorbeeld "achternaam", "adres", "cursus". De "Submit Text", de tekst op de knop onderaan het formulier (Submit), kun je ook aanpassen. Verander "Submit" bijvoorbeeld in "Verzenden". Required: of het veld verplicht ingevuld moet worden. Standaard staat hier "no" ingevuld. Kies je "yes", dan verschijnt er automatisch een rood sterretje bij het label van dat veld. Wanneer iemand het formulier probeert te versturen zonder dat veld te hebben ingevuld, verschijnt een foutmelding. Size: De afmetingen van het veld. Dit heeft niets te maken met de hoeveelheid tekst die ingevoerd kan worden, maar met de grootte van het vakje op het scherm. Deze kun je meestal op de standaardwaarde laten staan. Max. size: Het maximale aantal tekens dat in een veld ingevoerd kan worden. De standaardwaarde van 100 is meestal prima, maar als je mensen een opmerking of bijvoorbeeld een titel van een boek wilt laten invullen, zou je dit getal wat hoger kunnen zetten (bijvoorbeeld op 250). Validation: Met dit veld kun je bepalen dat er alleen cijfers, letters of een emailadres ingevoerd kunnen worden in een veld. Handig als mensen een telefoonnummer moeten invullen (numeric) of een e-mailadres (email). Iets anders invullen is dan niet mogelijk en levert een foutmelding op. Het formulier wordt niet verzonden zolang het vakje niet goed ingevuld is. Description: Hier kun je een beschrijving of toelichting geven bij wat in een veld moet worden ingevuld. Dit verschijnt dan automatisch in beeld wanneer iemand met de muis over dat veld gaat. Pas op: dit kan heel irritant zijn voor de gebruiker, dus alleen gebruiken als dat noodzakelijk is.

14

6.

De Wizard

Als je een formulier op het scherm hebt staan en in de rechterkolom op Properties klikt, zie je het volgende:

Onderaan staat Wizard. Als je hierop klikt, krijg je het volgende scherm te zien:

Klik op Next.

15

Hier staan enkele instellingen van het formulier die eventueel gewijzigd kunnen worden. Achter "Title" staat vaak al de titel ingevuld die je gewijzigd hebt. Klik op Next.

Als je een Email Alert wilt (dat wil zeggen: een mailtje ontvangen met daarin het ingevulde formulier), zet dan Send Alerts op Yes en vul je e-mailadres in achter Send To (To). N.B.: Als je ingevulde diacritische tekens (é, ë, ö, etc.) goed wilt ontvangen, klik dan op de knop "Account" (naast de knop "Logout") en zet de optie "Send E-mail Alerts as HTML" op "Yes" en druk op Save.

16

Als je de inzender van het formulier antwoord wilt kunnen geven, selecteer achter Reply To (From) dan de vraag naar het e-mailadres in het formulier. Achter Subject vul je het onderwerp van de email alert in. "{qForm Title}" vult de titel van het formulier in, zodat je weet om welk formulier het gaat. Klik op Next. Dan krijg je het volgende scherm:

Hiermee kunnen Confirmation Emails verstuurd worden naar de afzender. Als de afzender een formulier verstuurd heeft, kan deze een mailtje krijgen met een overzicht van wat hij of zij ingevuld heeft. Je kunt ook nog een extra boodschap toevoegen. Zet Send E-mail op yes, als je de afzender een Confirmation Email wilt sturen. Selecteer achter Send To (To) de vraag naar het e-mailadres op het formulier. Vul achter Reply To (From) eventueel een reply-adres in, waarnaar de ontvanger van een Confirmation Mail een antwoord kan sturen. Achter Subject kun je het onderwerp van Confirmation Mail in. "{qForm Title}" vult de titel van het formulier in, zodat je weet om welk formulier het gaat. De boodschap zelf kun je invullen in de Body of Confirmation Mail. Let op: Géén dubbele aanhalingstekens (") gebruiken. Klik op Next.

17

Als je een bedankpagina wilt laten verschijnen, kun je een bedankpagina in de lay-out van Tridion genereren op http://www.leidenuniv.nl/enquetes/basisbestanden/bedanktekstmaker.html Plak de HTML-code die eruit komt achter "Thank You Tekst" (zie de figuur hierboven). Klik op Finish. Sla het formulier op (klikken op Save).

7.

Meer hulp

Op de website van de Universiteit Leiden staat informatie over het plaatsen van Jotform formulieren in Tridion: http://communicatie.leidenuniv.nl/website/gebruikersondersteuning/handleidingen/formulieren-in-tridion.html

Op de site van Jotform vind je ook een forum (http://jotform.com/forum) waar je (in het Engels) vragen kunt stellen aan de makers van het programma.

18