Handleiding publicatie formulieren en surveys

Handleiding:
Publicatie formulieren
en surveys
Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus eCom.
Inhoudsopgave
Introductie............................................................................................... 1
1 Formulieren integreren................................................................... 2
1.1 Formulieren integereren in de Page Manager........................... 2
1.2 Formulieren integreren op externe webpagina’s....................... 3
2 Formulieren opmaken..................................................................... 7
2.1 Standaard opmaak elementen..................................................... 8
2.2 Formulier opmaak elementen...................................................... 9
Handleiding: Publicatie formulieren en surveys
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 <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:
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
.mpFormField
input.mpOtherCustomInput
[type=”text”]
Opmaak van matrixvragen
Naamgeving
.mpMatrix
.mpMatrixLabel
.mpFormLabel
.mpFormDescription4
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
.mpFormDescription5
.mpFormDescription10
.mpFormAnswer
.mpradioButtonTable
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
Opmaak van textinvoer meerdere regels
Naamgeving
.mpFormLabel
.mpFormField textarea
.mpFormField input[type=text]
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:
<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:
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.
Handleiding: Publicatie formulieren en surveys
13
Naamgeving
td.pollQuestion
td.pollItem
td.pollAnswerHighLight
td.pollAnswer
td.pollVisual
td.pollCellLeft
td.pollCellRight
td.pollCell0Pct
td.pollCell100Pct
tr.pollAnswerHighLight
td.pollPercentage
.mpFormResultChildLabel
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.
Handleiding: Publicatie formulieren en surveys
15

Download Report