Publicatie formulieren en surveys

Transcriptie

1 Handleiding: Publicatie formulieren en surveys Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus ecom.

2 Inhoudsopgave Introductie Formulieren integreren Formulieren integereren in de Page Manager Formulieren integreren op externe webpagina s Formulieren opmaken Standaard opmaak elementen Formulier opmaak elementen... 9

3 Introductie In deze handleiding treft u alle informatie om een MailPlus-formulier succesvol te integreren op een webpagina en op te maken. Deze instructie is van toepassing op formulieren en surveys van de Form Editor van MailPlus. Formulier en survey editor Heeft u na het lezen nog vragen en/of opmerking over het implementeren van formulieren en surveys? Raadpleeg de Snelhelp in MailPlus of neem contact op met MailPlus Support: of support@mailplus.nl. 1

4 1 Formulieren integereren Een MailPlus formulier kan op twee manieren geïntegreerd worden: op een landingspagina in MailPlus of op een externe webpagina. Afhankelijk van de keuze van de integratie moet u met een aantal zaken rekening houden. Deze worden in de komende paragrafen besproken. 1.1 Formulieren integreren in de Page Manager In BrightEdit kunt u een formulier toevoegen met onderstaande knoppen uit de Toolbar: Knop formulier en survey invoegen in Page Manager met BrightEdit Formulieren die op een pagina in de Page Manager staan, kunnen zowel onder http als https functioneren. De URL van een pagina is te achterhalen door op Info te drukken in het overzicht. Pagina URL achterhalen De URL die vervolgens wordt getoond is standaard http. Een pagina is onder https te gebruiken door in de URL https i.p.v. http te zetten en de prefix te verwijderen. Hieronder een voorbeeld: 2

5 1.2 Formulieren integreren op externe webpagina s Formulierintegratie is alleen mogelijk met formulieren en surveys van één pagina, die géén bedankpagina van de Form Editor hebben en die van het type Aanmeld of Normaal zijn. Wilt u een formulier of survey dat uit meerdere pagina s bestaat gebruiken, dan kunt u hiervoor een landingspagina in de Page Manager aanmaken. De code voor deze integratie vindt u in de Form Manager of Survey Manager onder de knop Info. Klik vervolgens op Bekijken om de code te kunnen kopiëren en plakken. Eigenschappen van het geselecteerde formulier U kunt het formulier of de survey op twee manieren integreren: via dynamisch invoegen of via HTML invoegen. Als u voor de eerste optie kiest, dan worden wijzigingen die in het formulier plaatsvinden direct doorgevoerd in het formulier op uw website. Bij HTML invoegen is dat niet het geval en is het een statisch formulier. Na een wijziging in MailPlus zult u de code nogmaals moeten invoegen op uw website. Formulieren integratie Als u het formulier wilt invoegen, dan heeft u de volgende specifieke opties voor de integratie: XHTML strict met tabellen XHTML strict zonder tabellen HTML4 strict met tabellen HTML4 strict zonder tabellen 3

6 Afhankelijk wat uw CMS ondersteund kunt u kiezen voor een generatie in XHTML 1.0 of HTML 4. U kunt daarnaast nog kiezen uit een code die is opgebouwd met tabellen of zonder tabellen. In beide gevallen kunt u het formulier volledig zelf stylen. Wilt u volledige vrijheid hebben over de layout van het formulier, dan kunt u kiezen voor generatie zonder tabellen. De matrixvraag is in dit geval de uitzondering op de regel: dit vraagtype wordt altijd als tabel gegenereerd. Beveiligd formulier Wanneer u de gegevens van het formulier beveiligd wilt verzenden, dan kunt u de checkbox Beveiligd formulier (https) aanvinken. De gegevens worden dan naar https gepost in plaats van naar http. Formulier downloaden Na een keuze te hebben gemaakt voor integratie en generatie, ziet u twee knoppen verschijnen: HTML downloaden en Javascript downloaden. Formulieren integratie venster 4

7 De bestanden die gegenereerd worden hebben in hun bestandsnaam het formid, de keuze voor soort HTML en met/zonder tabellen staan, bijvoorbeeld: formxxxxxhtml1tables.html en formxxxxxhead.html. Als u kiest voor javascript downloaden krijgt u een html-bestand waarin de <script>-tags staan. De inhoud van het javascript-bestand kopieert en plakt u in de <head> </head> tags op uw website. Dit zorgt er onder meer voor dat het formulier gevalideerd wordt en de foutmeldingen teruggestuurd kunnen worden. Dynamisch invoegen in de browser Wanneer u kiest voor dynamisch invoegen in de browser, dan staat in het HTML-bestand één regel. Dit is de placeholder. Deze plaatst u de plek van uw website waar u wilt dat het formulier ingeladen wordt. Wilt u het dynamisch formulier vooraf laten invullen? Dan moet u aan de laatste script-tag het volgende toevoegen &eid={encid}. Het encid is de unieke identifier van de ontvanger. Door deze code op te vangen en toe te voegen aan het formulier kunnen de gegevens die bekend zijn uit de MailPlus database gehaald worden en getoond worden op het formulier. Dit is alleen mogelijk voor formulieren en surveys van het type: normaal, profiel wijzigen of afmeld. 1 Vang met een script het encid op vanuit de mail waaruit de respondent doorklikt en plaats deze op de plek encid. Bijvoorbeeld: React?wpEncId={xxxxxx}&wpMessageId={xxxxxx}&userId={xxxxx}& command=viewpage&activityid={xxxxxx}&encid={xxxxxxxxxxxxxxxx} 1 Wilt u een type Profiel wijzigen of Afmeld op uw eigen website laten zien, dan moet u deze eerst plaatsen op een landingspagina in MailPlus en deze via een iframe op uw website inladen. 5

8 Client side validaties en server side validaties Zodra het formulier ingevuld wordt, wordt deze gevalideerd op niet ingevulde velden of invalide data. Dat gebeurt op twee momenten: client side en server side. Wanneer de respondent geen javascript aan heeft staan, dan kan de client side validatie niet afgaan. Automatisch wordt dan server side het formulier gevalideerd. Als dit gebeurt, stuurt MailPlus het formulier terug en zet de meldingen erboven. Aangezien MailPlus niet weet waar het formulier vandaan komt, plaats MailPlus het formulier op een lege pagina met minimale styling. Gebruikt u de toon/verberg-functie in uw formulier en heeft de respondent geen javascript aan staan? Dan zal de respondent alle vragen zien staan. 6

9 2 Formulieren opmaken De layout van een formulier of survey wordt bepaald door de stijlen die worden meegegeven aan de webpagina. Hiervoor wordt een stylesheet (CSS) gebruikt. De CSS moet beschikbaar zijn op alle pagina s in de Page Manager of externe webpagina s waarop het formulier geïntegreerd wordt. De meest eenvoudige manier van werken is door deze CSS-code al in het webtemplate te plaatsen, zodat deze altijd aanwezig is op een webpagina of een bedankpagina. In dit document worden de veelgebruikte classes uitgelegd, zodat u snel de layout of opmaak van het formulier kunt aanpassen aan uw wensen of eisen. Tijdens het opmaken van het formulier moet u rekening houden met de manier waarop het formulier gegenereerd wordt. Een formulier dat bestaat uit tabellen is minder flexibel in zijn layout dan een formulier dat gegenereerd is zonder tabellen. 2 Er zijn twee voorbeeldbestanden beschikbaar. Deze kunt u als uitgangspunt gebruiken om uw formulier verder op te maken: Formulier gegenereerd in tabellen: download bestand 3 Formulier gegenereerd in niet-tabellen: download bestand 4 2 Als u het formulier invoegt op een pagina in de Page Manager dan wordt deze standaard opgebouwd in tabellen. 3 URL formulier gegenereerd in tabellen: 7

10 2.1 Standaard opmaakelementen We bespreken eerst de opmaakelementen die vaak terugkomen. Deze elementen bepalen bijvoorbeeld het lettertype, de lettergrootte en de kleur van een bepaald stuk tekst. body a h1 h2 font-family font-size color background-color line-height font-weight text-decoration table th tr td width height De algemene stijl in je template Een link Een kop Een kleinere kop Dit is de lettertype van een bepaalde stijl Dit is de lettergrootte in pixels of punten Dit is de kleur van het lettertype Dit is de achtergrondkleur Dit is de regelafstand in pixels of percentages De dikte van het lettertype Dit bepaald of de inhoud van een element op een speciale manier moet worden weergegeven Tabel Kolomtitel in een tabel Rij in een tabel Cel in een tabel Breedte Hoogte Bijvoorbeeld: Dit is lettertype Verdana, lettergrootte 10 met een blauwe kleur en onderstreept In de CSS code staat dit als volgt: body { font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:# 2dbcfd; text-decoration:underline; } 8

11 2.2 Formulier opmaak elementen In deze paragraaf bespreken we de opmaak van het formulier. Algemene opmaak Er zijn een aantal belangrijke classes voor de algemene opmaak van een formulier:. mpformtable Algemene formulier layout, zoals bijv. de breedte. mpquestiontable De tabel om de vraag heen.mptwocolumnlayout Als de instelling Als vraag en antwoord naast elkaar geselecteerd is.mponecolumnlayout Als de instelling Als vraag en antwoord onder elkaar geselecteerd is.mphighlight Styling van focus van een vraag.submitcell De instellingen voor padding en uitlijning van de verzendknop.submitcell input De opmaak van de verzendknop in het formulier Opmaak van keuzevragen Meerkeuzevragen worden gebruikt als de respondent uit meerdere antwoorden een keuze kan maken. Er zijn verschillende typen meerkeuzevragen, elk met een eigen styling. Deze worden hieronder beschreven. 9

12 Opmaak van checkbox & radiobutton/vragen Checkbox meerkeuzevragen worden gebruikt als de respondent meerdere opties mag aanvinken. De styling die toegepast kan worden:.mpformlabel.mpmultiplelabel.mpformfield input.mpothercustominput [type= text ] De vraagtekst Het label achter de checkbox of radiobutton Anders, namelijk veld Opmaak van matrixvragen.mpmatrix.mpmatrixlabel.mpformlabel.mpformdescription4.mpformdescription5.mpformdescription10.mpformanswer.mpradiobuttontable De tabel om de matrixvraag heen De vraagtekst De stelling De opties boven de radiobuttons bij een waarderingsschaal 4 De opties boven de radiobuttons bij een waarderingsschaal 5 De opties boven de radiobuttons bij een waarderingsschaal 10 Tekst die je typt in de radiobutton cel De tabel om de radiobutton of checkbox antwoorden Opmaak van dropdown-vragen.mpformlabel.mpformfield select.mpformfield option De vraagtekst De dropdown De optie in de dropdown 10

13 Opmaak van rating-vragen.mpformlabel.mpformdescription.mpformanswer De vraagtekst De opties boven de radiobuttons Tekst die je typt in de radiobutton cel Opmaak van invoervelden Invoervelden zijn vragen waarbij de respondent zelf vrij een tekst of getal mag invoeren. Er zijn verschillende invoervelden, elk met een eigen styling. Deze worden hieronder beschreven. Opmaak van textinvoer enkele regel.mpformlabel.mpformfield.mpformfield input[type=text] De vraagtekst Opmaak buiten de antwoordmogelijkheden Het getypte antwoord Opmaak van textinvoer meerdere regels.mpformlabel.mpformfield textarea.mpformfield input[type=text] De vraagtekst Opmaak buiten de antwoordmogelijkheden Het getypte antwoord Speciale opmaak van datumvraag Een datumvraag heeft een speciale opmaak, omdat de velden voor dag, maand en jaar uit verschillende invoervelden bestaan en omdat er een kalender is. 11

14 .mpdatefield.mpdatefield.mpdd.mpdatefield.mpmm.mpdatefield.mpyyyy Styling van het datum invoerveld Specifieke styling van het Dagveld Specifieke styling van het Maandveld Specifieke styling van het Jaar-veld De datumkalender is een standaard jquery plugin. Op de onderstaande site kan een theme gekozen worden of zelf worden samengesteld: Pas het onderstaande stukje code aan: <link rel= stylesheet href= URLbestand.css type= text/css ></link> Opmaak van vraagsinstellingen Een vraag kan specifieke instellingen hebben. De vraag kan verplicht zijn, een sublabel en/of helptekst hebben. Ook deze elementen kunnen gestyled worden. Opmaak van verplichte vragen Als een vraag verplicht, is wordt er een asterisk (*) achter de vraag geplaatst. Deze asterisk kunt u opmaken met behulp van de volgende class:.mandatorysign Styling van de asterisk (*) Opmaak van helptekst Als u bij een vraag extra uitleg tekst wilt hebben kunt u de helptekst functie activeren. Er verschijnt dan een icoon achter de vraag waarbij on hover een tekstje komt. Het icoon en de plaatsing kunt u opmaken met:.formhelptext Styling van het helptekst icoon 12

15 Opmaak van sublabel Een sublabel is een uitlegtekst dat onder het invoerveld komt, bijvoorbeeld bij een adres of datum..sublabel Styling van het sublabel Opmaak van foutboodschappen Als een respondent een vraag foutief invult of vergeet in te vullen als deze verplicht is, dan wordt er een zogenaamde fouttekst getoond. Deze bestaat uit een aantal onderdelen:.mperrorsummary.mperrorsummary ul.error.mperrorrow Fouttekst bovenaan het formulier De opsomming van vragen waar iets niet valideert Omliggende tabel om vraag die fout oplevert De fouttekst onder de vraag Opmaak van afschriften Als een formulier of survey wordt ingevuld, dan komt de respondent op een bedankpagina terecht. Gebruikelijk is om op deze pagina de respondent te bedanken voor het invullen van het formulier. Maar het is bij uitstek de plaats om een afschrift te tonen van de gegevens die de respondent heeft ingevuld. Daarin wordt onderscheid gemaakt tussen tekstuele afschriften en grafische afschriften..formresultlabel.formresultvalue Het afschrift van de vraag De ingevulde waarde (het antwoord op de vraag) Bij meerkeuzevragen waarbij één antwoord gekozen kan worden, kan indien er een afschrift voor alle respondenten is geplaatst, grafisch getoond worden hoe het antwoord van de respondent zich verhoudt ten opzichte van de antwoorden van de andere respondenten. 13

16 td.pollquestion td.pollitem td.pollanswerhighlight td.pollanswer td.pollvisual td.pollcellleft td.pollcellright td.pollcell0pct td.pollcell100pct tr.pollanswerhighlight td.pollpercentage.mpformresultchildlabel De opmaak van de vraag Het item-nummer De gekozen optie Keuze-optie De gekleurde balk Percentage van het gekozen antwoord ten opzichte van het totaal De lege ruimte rechts van het percentage van de gekozen antwoorden De kleur van de balk als dit antwoord niet gekozen is De kleur van de balk als het antwoord 100% gekozen is De kleur van de balk als de respondent dit antwoord heeft gekozen De opmaak van het percentage tekstueel weergegeven De matrixvraag stelling Opmaak van een afbeelding als knop Op elk formulier zit een verzendknop en bij formulieren over meerdere pagina s is er een vorige en volgende knop aanwezig. Deze knoppen zijn volledig op te maken door middel van CSS..submitButton.nextPageButton.previousPageButton De verzendknop De volgende pagina knop De vorige pagina knop 14

17 Het is mogelijk om een afbeelding te gebruiken voor deze knoppen. Deze opties staat ook al in de CSS-code, maar tussen de commentaar tags zodat deze niet actief is. /* Verzend/volgende/vorige-knop als afbeelding.submitbutton{ background-image:url( ); width:100px; height:35px; }.nextpagebutton{ background-image:url( ); width:100px; height:35px; }.previouspagebutton{ background-image:url( ); width:100px; height:25px; } */ Ook bij deze code kan de opmaak vrij specifiek aangegeven worden. Allereerst moet u ervoor zorgen dat de afbeelding van de verzendknop online staat. Deze URL voegt u in bij background-image:url( ). Vervolgens kunt u nog aangeven hoe breed en hoe hoog de afbeelding is en of er een achtergrondkleur of rand meegegeven moet worden. Vergeet niet om de commentaar tags weg te halen en in het formulier op de knoppen geen tekst te zetten. Anders komt de tekst over de achtergrondafbeelding heen. 15