Een formulier in Google Docs maken is vrij eenvoudig: Maak een nieuw document, kies formulier en zet het formulier op met de gegevens die u wilt verzamelen. Er zijn verschillende typen vraag-/ antwoordmogelijkheden. Tekst(alinea's) voor respectievelijk korte en langere tekstinvoer, meerkeuzevragen, selectievakjes (radio buttons), keuzelijsten, keuzeschalen en -rasters. U kunt bepaalde vragen verplicht maken zodat het formulier niet wordt verzonden voor deze zijn ingevuld.
Mensen kunnen uw formulier op verschillende manieren invullen. Het is afhankelijk van het doel dat u wilt bereiken en hoe u uw respondenten het best kunt benaderen, welke methode het beste is.
Online formulier op webpagina
Ieder formulier heeft een eigen (openbare) webpagina met een eigen adres (URL). Iedereen die dit adres kent kan uw formulier vinden en invullen. U kunt dus een link naar de webpagina met het formulier sturen naar mensen en hen vragen er naar toe te gaan om het in te vullen. Of u kunt in een blog of webpagina met een link naar dit adres verwijzen.
Het formulier per e-mail versturen
Ook kunt u het formulier via e-mail versturen, zodat ontvangers het in de ontvangen e-mail kunnen invullen en verzenden. Vanuit het formulier kunt u het als e-mail verzenden aan één of meer personen. Probleem van deze methode is dat het vrij onpersoonlijk is en er geen mogelijkheid is om een persoonlijke boodschap toe te voegen
.
Om dit te verhelpen kunt u het formulier aan uzelf e-mailen en het vervolgens aan uw respondenten doorsturen. U kunt u op die manier nadere instructies en/of een persoonlijk bericht bij het formulier toevoegen. Tip: als u kiest voor doorsturen, verander dan het onderwerp (haal FWD weg en verander eventueel de onderwerptitel). Haal in de e-mail zelf ook het kopje met "oorspronkelijk bericht" etc. weg. Het wordt op die manier een normaal verzonden bericht in plaats van een doorgestuurd bericht.
Formulier insluiten op een blog of website
Een derde manier is het formulier insluiten ("embedden") op een webpagina zoals bijvoorbeeld dit blogartikel. Voor toepassing in dit artikel heb ik een eenvoudig formuliertje gemaakt dat met een aantal verschillende methoden in dit artikel is ingesloten. Het online formulier kunt u hier vinden en het is hieronder ingesloten. U kunt het formulier uiteraard invullen. Het resultaat kunt u vervolgens hier bekijken.
Bekijk Resultaat in Spreadsheet
Om een formulier op een webpagina of blog in te sluiten klikt u in het formulierbewerkingsvenster op "meer acties" en kies dan voor "invoegen". Vervolgens kopieert (ctrl-C) u de code en plakt (ctrl-V) deze in uw pagina. Hiervoor moet u uiteraard wel in de HTML editor van uw blog of site werken. Nadat u het formulier heeft ingesloten kunt u gaan experimenteren met verschillende thema's zodat het formulier enigszins bij de Lay-out van uw website aansluit. Veranderingen in uw formulier en het gekozen thema worden met deze methode automatisch overgenomen in het ingesloten formulier op uw webpagina.
Resultaten in Spreadsheet
Wanneer u klaar bent met het maken van uw formulier kunt u het als spreadsheet terug vinden in de lijst met documenten. De vragen die u heeft gesteld ziet u terug op de eerste rij van de spreadsheet aangevuld met een kolom "Tijdstempel" (Timestamp) die automatisch is toegevoegd en waarin datum en tijdstip komt te staan als iemand het formulier invult.
Test wijzigingen!
Wilt u het formulier later veranderen dan kunt u vanuit de spreadsheet naar het formulier gaan. Let wel op dat spreadsheet en formulier aan elkaar gekoppeld zijn. Veranderingen in de ene kunnen gevolgen voor de ander hebben. Mijn ervaring is dat in het algemeen, zowel in het formulier als de spreadsheet, straffeloos zaken volop veranderd kunnen worden. Wel komt het voor dat de volgorde van vragen in de spreadsheet niet wordt aangepast en vragen die worden weggegooid in het formulier in de spreadsheet blijven staan.
Test daarom na iedere verandering het formulier en kijk nauwlettend welke vragen waar in de spreadsheet komen. Kolommen die dan niet langer worden ingevuld door het formulier kunnen worden verwijderd en ook kunt u kolommen verplaatsen om de volgorde met het formulier te synchroniseren. Ook kunt u probleemloos kolommen en rijen in de spreadsheet tussenvoegen die u gebruikt voor eigen aantekeningen of bijvoorbeeld berekeningen die u op de gegevens wilt loslaten. Maar... nogmaals, test uitgebreid voordat u een formulier verzendt of online zet.
Geavanceerd gebruik
Voor de meeste gebruikers is bovenstaande voldoende om met Google Docs formulieren aan de slag te kunnen. Het vervolg van dit artikel gaat over het insluiten van een formulier in een webpagina waarbij het formulier in het ontwerp (Stylesheet) van het blog of de website wordt geïntegreerd. Vervolgens gaan we er voor zorgen dat inzenders naar uw eigen bevestigingspagina in plaats van de standaard Google Docs bevestigingspagina worden geleid. Dit laatste is niet alleen fraaier, maar ook noodzakelijk wanneer u een dergelijke pagina bijvoorbeeld wilt gebruiken als doelpagina om bijvoorbeeld conversiedoelen in AdWords te meten.
Formulieren in stijl van website integreren
Het formulier zoals het boven is opgenomen heeft de Lay-out (thema) van het Google formulier overgenomen. U kunt kiezen uit een honderdtal thema's voor de vormgeving van uw formulier en wellicht zit er één tussen die geheel aan uw wensen voldoet. Maar misschien wilt u toch liever het formulier geheel in de stijl van uw eigen ontwerp integreren. Volg de onderstaande aanwijzingen nauwkeurig om dit te bewerkstelligen.
Open het formulier vanuit de spreadsheet en klik helemaal onderin op de link na: "Bekijk het gepubliceerde formulier hier:" U komt nu op de webpagina waar het formulier te vinden is. Op deze pagina klikt u met de rechter muisknop ergens op het formulier en kiest "element inspecteren" in Chrome of "bron weergeven" in Internet Explorer.
Vervolgens zoekt u de code tussen de <form> en </form> tags (zie afbeelding) en kopieert deze (ctrl-C).
Ga nu naar de HTML editor van uw site of blog en plak (ctrl-V) de zojuist gekopieerde code op de plek waar u het formulier wilt hebben. Als het goed is gegaan staan de invulvelden van uw formulier nu op uw website of blog. Let op: alleen de invulvelden worden op deze manier gekopieerd. Overige informatie zoals instructies en teksten tussen secties die u in het formulier heeft opgenomen worden niet meegenomen. Deze moet u dus zelf toevoegen. U kunt nu de opmaak nog aanpassen (zowel in HTML als Wysiwyg ) zoals ongewenste witregels weghalen, de vragen cursief of vet maken of een kleurtje geven. Bij vragen waarbij u geen "helptekst" gebruikt (zie onderstaand formulier) kunt u in de HTML editor de volgend code weghalen. Hiermee verwijdert u ongewenste ruimte tussen vraag en invoerscherm.
<label class="ss-q-help" for="entry_X"></label>Het resultaat zal er ongeveer zo uit moeten zien:
Invullers naar uw eigen bevestingspagina sturen
Het formulier is nu ingebed in de lay-out van uw site, maar inzenden leidt nog steeds naar de Google bevestingingspagina (probeer maar). In de volgende stap gaan we er voor zorgen dat inzenders naar uw eigen pagina worden geleid. Hiervoor gebruiken we een eenvoudig JavaScript.
Allereerst maakt u een webpagina waar inzenders naar toe geleid moeten worden (voorbeeld).
In uw HTML editor zoekt u onderstaande code in uw formulier. Kopieer van hieruit (!) eerst de link naar uw spreadsheet (het webadres tussen " "). Vervang vervolgens de code:
<form action="LINK-NAAR-UW-SPREADSHEET" method="POST">Met
<script type="text/javascript">var submitted=false;</script>Het resultaat hieronder is hetzelfde formulier, alleen wanneer inzenders nu op insturen klikken worden ze naar mijn eigen bevestigingspagina geleid. Probeer het maar eens!
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://DE-URL-VAN-UW-BEVESTIGINGSPAGINA';}"></iframe>
<form action="DE=ZOJUIST-GEKOPIEERDE-LINK-NAAR-UW-FORMULIER" method="post"
target="hidden_iframe" onsubmit="submitted=true;">
Bekijk Resultaat in Spreadsheet
Verplichte velden valideren
Het enige probleem met deze manier van omleiden naar een eigen bevestigingspagina is dat inzenders niet langer een waarschuwing krijgen als ze in het formulier gedefinieerde "verplichte velden" niet hebben ingevuld. Om dit op te lossen kunnen we verplichte velden op een andere manier - in de webpagina zelf - valideren wannneer iemand op inzenden klikt. Hoewel niet noodzakelijk is het raadzaam om de verplichte velden in het Google Docs formulier uit te schakelen wanneer u deze methode gaat toepassen. Dit om mogelijke conflicten te voorkomen.
Voor formulier validering kunnen we een JQuery validatie plugin gebruiken. U kunt het pakket downloaden. Het bestand dat u nodig heeft heet jquery.validate.js U kunt dit ook meteen downloaden maar ik kan niet garanderen dat dit de nieuwste versie is. Vervolgens gaat u de plugin uploaden naar uw server. Heeft u geen fileserver, bijvoorbeeld omdat u Blogger gebruikt (zoals ik) dan kunt u het bestand uploaden naar Google Sites. Noteer de URL van het bestand. (Vanuit Google Sites: rechtsklikken op de download link en "linkadres kopieren" en ergens plakken. U kunt de toevoeging na xxxx.js "?attredirects=0&d=1" weghalen)
Kopieer vervolgens de volgende code tussen de "Head tags" van uw webpagina of in de template van uw Blog en vervang de vetgedrukte URL (Aanhalingstekens moeten blijven staan).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>In de sjabloon editor van Google Blogger ziet het er zo uit:
<script src="http://LOKATIE-VAN-UW-PLUGIN-BESTAND.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm").validate({meta: "validate"});
});
</script>
Voeg vervolgens in de HTML van uw formulier een commentForm ID toe aan de "form action" zoals in onderstaand voorbeeld
<form action="http://spreadsheets.google.com/viewform?formkey=cHFiaFR6N1BJSHVuNHQzRVZBbDd0Wmc6MA.."Vervolgens moeten we in de input velden van het formulier de "class=required" toevoegen of veranderen. Als er al een "class=" voorkomt dan kunt u de waarde gewoon veranderen.
method="post" target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">
<input type="text" name="entry.1.single" value="" class="required" id="entry_1">In hetzelfde input veld kunt u mbv title="" ook een specifieke boodschap toevoegen die mensen te zien krijgen wanneer ze dit verplichte veld niet hebben ingevuld. Als u in het input veld geen title="" invult komt er een standaard reactie die u in de plugin eventueel kunt aanpassen.
<input type="text" name="entry.1.single" value="" class="required" title="Wat is de kleur van uw ogen potverdorie?" id="entry_1">Tot slot kunnen we de stijl van de foutmeldingen nog aanpassen in de stylesheet. Dit is de stijl die ik aan het laatste voorbeeldformulier heb gegeven
label.error {
display: list-item;
color: #ff0600;
font-size: 12px;
list-style-position: inside;
padding: 5px 0 0;}
Om de foutmeldingen te zien klikt u op inzenden zonder iets in te vullen!
Wat is de kleur van uw ogen?
Bekijk Resultaat in Spreadsheet
Tips, aanvullingen en vragen zijn van harte welkom in de opmerkingen hieronder.
0 reacties:
Een reactie posten