1 Handleiding: Publicatie formulieren en surveys Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus ecom.2 Inhoudsopgave Introductie Fo...
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: 079 – 363 12 12 of [email protected].
Handleiding: Publicatie formulieren en surveys
1
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: https://bedrijfsnaam.m2.mailplus.nl/wpiXAfwv5ARQ-1006-272833
Handleiding: Publicatie formulieren en surveys
2
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
Handleiding: Publicatie formulieren en surveys
3
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
Handleiding: Publicatie formulieren en surveys
4
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 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: http://{klantnaam}.{server}.mailplus.nl/genericservice/code/servlet/ 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.
Handleiding: Publicatie formulieren en surveys
5
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.
Handleiding: Publicatie formulieren en surveys
6
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 bestand3 • Formulier gegenereerd in niet-tabellen: download bestand4
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: http://login.mailplus.nl/documenten/formtables.css.
Handleiding: Publicatie formulieren en surveys
7
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. Naamgeving body a h1 h2 font-family
Uitleg 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
font-size color background-color line-height font-weight text-decoration
table th tr td width height
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; }
Handleiding: Publicatie formulieren en surveys
8
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: Naamgeving . mpFormTable . mpQuestionTable .mpTwoColumnLayout
.mpOneColumnLayout
.mpHighlight .submitCell .submitCell input
Uitleg Algemene formulier layout, zoals bijv. de breedte De tabel om de vraag heen Als de instelling “Als vraag en antwoord naast elkaar” geselecteerd is Als de instelling “Als vraag en antwoord onder elkaar” geselecteerd is Styling van focus van een vraag De instellingen voor padding en uitlijning van de verzendknop 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.
Handleiding: Publicatie formulieren en surveys
9
Opmaak van checkbox & radiobutton/vragen Checkbox meerkeuzevragen worden gebruikt als de respondent meerdere opties mag aanvinken. De styling die toegepast kan worden: Naamgeving .mpFormLabel .mpMultipleLabel
Uitleg De vraagtekst Het label achter de checkbox of radiobutton Anders, namelijk veld
Uitleg 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 Naamgeving .mpFormLabel .mpFormField select .mpFormField option
Uitleg De vraagtekst De dropdown De optie in de dropdown
Handleiding: Publicatie formulieren en surveys
10
Opmaak van rating-vragen Naamgeving .mpFormLabel .mpFormDescription .mpFormAnswer
Uitleg 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 Naamgeving .mpFormLabel .mpFormField .mpFormField input[type=text]
Uitleg De vraagtekst Opmaak buiten de antwoordmogelijkheden Het getypte antwoord
Uitleg 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.
Handleiding: Publicatie formulieren en surveys
11
Naamgeving
Uitleg
.mpDateField .mpDateField.mpDD
Styling van het datum invoerveld Specifieke styling van het Dagveld Specifieke styling van het Maandveld Specifieke styling van het Jaar-veld
.mpDateField.mpMM .mpDateField.mpYYYY
De datumkalender is een standaard jQuery plugin. Op de onderstaande site kan een theme gekozen worden of zelf worden samengesteld: http://jqueryui.com/themeroller/. Pas het onderstaande stukje code aan:
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: Naamgeving .mandatorySign
Uitleg 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: Naamgeving .formHelpText
Uitleg Styling van het helptekst icoon
Handleiding: Publicatie formulieren en surveys
12
Opmaak van sublabel Een sublabel is een uitlegtekst dat onder het invoerveld komt, bijvoorbeeld bij een e-mailadres of datum. Naamgeving .sublabel
Uitleg 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: Naamgeving
Uitleg
.mpErrorSummary .mpErrorSummary ul
Fouttekst bovenaan het formulier De opsomming van vragen waar iets niet valideert Omliggende tabel om vraag die fout oplevert De fouttekst onder de vraag
.error .mpErrorRow
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. Naamgeving
Uitleg
.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.
Uitleg 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. Naamgeving
Uitleg
.submitButton .nextPageButton .previousPageButton
De verzendknop De volgende pagina knop De vorige pagina knop
Handleiding: Publicatie formulieren en surveys
14
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.
