Studio Visual Steps
Een formulier maken
Aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy
Een formulier maken
2
Een formulier maken Een bijzonder onderdeel van een website is het formulier. Een formulier bestaat uit onderdelen zoals tekstvakken, soms aangevuld met keuzevakjes, -rondjes en -lijsten. In deze onderdelen kan de bezoeker van de website gegevens invullen. Deze worden vervolgens met één druk op de knop naar de beheerder van de website doorgestuurd via een e-mail. Formulieren zijn een goed middel om gericht informatie aan een bezoeker te vragen. Zo kan een formulier gebruikt worden voor het plaatsen van een bestelling of het stellen van een vraag door de bezoeker van de website. Het gebruik van een formulier bij het communiceren met de bezoeker staat dan ook professioneler dan alleen via een e-mailadres. In Web Easy kunt u gebruikmaken van een flink aantal formuliersjablonen, geschikt voor het invoeren van allerlei soorten informatie. U leert in dit PDF-bestand hoe u een formuliersjabloon invoegt en naar wens aanpast. Ook ziet u hoe u een e-mail kunt gebruiken die verzonden is vanuit een formulier. In Web Easy is het ook mogelijk om zelf een formulier op te bouwen uit losse onderdelen. U leert in dit PDF-bestand ook hoe u zelf op deze manier een formulier samenstelt. In dit PDF-bestand leert u: Inhoudsopgave 1. Een kant-en-klaar formulier toevoegen ................................................................... 3 2. Velden in het formulier aanpassen .......................................................................... 6 3. Velden in het formulier verwijderen ......................................................................... 8 4. Velden in het formulier toevoegen ........................................................................... 9 5. Zelf een formulier samenstellen ............................................................................ 14 6. Een tekstvak invoegen .......................................................................................... 16 7. Een selectievakje invoegen ................................................................................... 20 8. Radioknoppen invoegen ........................................................................................ 23 9. Een lijst invoegen .................................................................................................. 27 10. Een knop invoegen .............................................................................................. 31 11. Het formulier uittesten ......................................................................................... 34 12. Een formuliermail aanpassen en lezen in Word .................................................. 43 13. Een formuliermail aanpassen en lezen in WordPad ............................................ 46
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
1 Een kant-en-klaar formulier toevoegen U voegt in Web Easy een formulier in als een object op een pagina: Open, indien nodig, Web Easy Maak het venster van Web Easy schermvullend Open het websitedocument Maak een nieuwe pagina voor het formulier
Tip Formulieren worden meestal geplaatst op een aparte contactpagina van een website. Hier staan dan ook de andere contactgegevens van de eigenaar van de website, zoals een adres en/of e-mailadres.
Klik op
Klik op
U ziet het venster Object Invoegen: Klik op tabblad
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
3
Een formulier maken
U ziet nu een lijst met formuliersjablonen. In dit voorbeeld kiest u het formuliersjabloon Contactgegevens: Klik op U ziet een voorbeeld van het formulier: Klik op
U kunt het veld invoegen: Klik op de plaats waar het formulier moet komen
U ziet nu een venster waarin u het e-mailadres moet invullen waarnaar e-mails met de gegevens van ingevulde formulieren verstuurd moeten worden: Vervang de tekst door uw e-mailadres
Ook kunt u het onderwerp van de e-mail aanpassen. Deze tekst verschijnt als onderwerp van de e-mail die u ontvangt. Dit aanpassen is niet noodzakelijk. Vervang eventueel de tekst
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
4
Een formulier maken
Let op! Let er op dat de rest van de tekst bij hetzelfde blijft, anders werkt het formulier niet goed. De teksten mailto: en ?subject= moeten hetzelfde blijven. Eventueel kunt u deze onderwerpgegevens later ook nog aanpassen. Klik op
U ziet dat het veld is ingevoegd: Binnen het veld staan de losse objecten voor tekst en het invullen van informatie: Dit worden ook wel velden genoemd.
Een veld kunt u, net als een tekst- of afbeeldingobject, verplaatsen. Let er op dat u het hele veld selecteert en niet één van de objecten binnen het formulier. Klik daarvoor op de titelbalk van het formulier. Klik op de titelbalk van het veld Zet het formulier op de gewenste positie
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
5
Een formulier maken
Tip Een formulier verwijderen U kunt ook een formulier verwijderen van een pagina: Klik op de titelbalk
Druk op Het formulier wordt verwijderd:
2 Velden in het formulier aanpassen U kunt het formulier in deze vorm meteen gebruiken. U kunt echter ook de objecten in het formulier aanpassen. U kunt een object bijvoorbeeld een andere naam geven, zodat hierin andere informatie ingevuld kan worden. Hiervoor moet u de eigenschappen van het object aanpassen met het Overzichtsvenster: Klik op Klik op
U ziet dat het kader van het Overzichtsvenster rechts in het venster verschijnt:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
6
7
Een formulier maken
U kunt de eigenschappen van een veld aanpassen. Bijvoorbeeld een tekstvak: Klik op een veld, bijvoorbeeld bij In het Overzichtsvenster: Klik bij
op
U ziet de eigenschappen van het veld: : de titel die in de HTML-code voor het object wordt gebruikt: : de naam die in de e-mail van het formulier wordt weergegeven: U kunt deze eigenschappen aanpassen. In dit geval de naam veranderen die wordt afgebeeld in de e-mail van het formulier:
Tip Het is verstandig zowel de titel als de naam hetzelfde te houden. Dit voorkomt misverstanden. Dubbelklik bij op de naam Typ een andere naam, bijvoorbeeld: Postcode
U ziet nu nog geen veranderingen in het formulier zelf. De veranderingen zijn aangebracht in de HTML-code die bij het bouwen van de website wordt aangemaakt.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
8
Tip Door de van de gebruikte invoervelden aan te passen naar namen die u goed herkent, kunt u ervoor zorgen dat de e-mail die wordt verstuurd met de ingevulde formuliergegevens, voor u beter te lezen is. U kunt bijvoorbeeld Engelse namen veranderen in Nederlandse.
3 Velden in het formulier verwijderen U kunt ook velden in het formulier verwijderen als u ze niet nodig heeft. Bijvoorbeeld de provincie: Klik op het veld, bijvoorbeeld het tekstvak bij
Druk op
Het veld is verwijderd: Klik op het tekstobject, bijvoorbeeld
Druk op Het onderdeel van het formulier is verwijderd: U kunt nu eventueel nog de andere formulieronderdelen omhoog schuiven, zodat ze netjes onder elkaar staan.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
9
Een formulier maken
4 Velden in het formulier toevoegen U kunt velden in het formulier toevoegen als u bijvoorbeeld extra informatie van de bezoeker wilt krijgen. Dit kunt u eenvoudig doen door een bestaand veld te kopiëren en de eigenschappen aan te passen. In dit voorbeeld gaat u het tekstvak provincie weer toevoegen:
Tip U kunt ook allerlei velden nieuw invoegen. Dit kan handig zijn als u een veld wilt invoegen dat nog niet in het formuliersjabloon staat. U leest hier meer over in paragraaf 5 Zelf een formulier samenstellen. Klik op het veld dat u wilt kopiëren, bijvoorbeeld het tekstvak achter
Druk op
+
Druk op
+
Het veld is gekopieerd:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
10
Een formulier maken
Zet het veld op de gewenste positie Klik eventueel eerst op een ander veld om te zien op welke positie deze staat:
U moet de eigenschappen van het gekopieerde veld aanpassen in het Inspecteur-kader: Dubbelklik bij op de titel Typ een andere naam, bijvoorbeeld: Provincie
Dubbelklik bij op de naam Typ een andere naam, bijvoorbeeld: Provincie
U moet een tekstobject voor het gekopieerde veld toevoegen. Ook deze kunt u kopiëren: Klik op het tekstobject dat u wilt kopiëren, bijvoorbeeld
Druk op
+
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
11
Een formulier maken
Druk op
+
Het tekstobject is gekopieerd:
Zet het tekstobject op de gewenste positie Klik eventueel eerst op een ander tekstobject om te zien op welke positie deze staat:
Dubbelklik op het gekopieerde tekstobject Typ een andere tekst, bijvoorbeeld: Provincie Klik buiten het tekstobject
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
U heeft een veld toegevoegd:
Tip Het e-mailadres van een formulier aanpassen U kunt een eerder opgegeven e-mailadres van een formulier als volgt aanpassen: Klik op de titelbalk van het formulier Dubbelklik in het vak bij
Pas het e-mailadres aan Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
12
Een formulier maken
13
Tip Een overzichtelijke e-mail aanmaken Verderop in dit PDF-bestand kunt u lezen dat hoe de verstuurde e-mail eruit ziet, afhankelijk is van de instellingen op de computer van degene die het formulier heeft ingevuld. Bijvoorbeeld van de gebruikte internetbrowser. U kunt ervoor zorgen dat in de meeste gevallen de gegevens in de e-mail overzichtelijk onder elkaar worden afgebeeld, door de volgende aanpassing te maken in een kant-en-klaar formulier: Klik op
Druk op Volg de instructies voor het plaatsen van de knop Verzenden in paragraaf 10 Een knop invoegen
Tip Een helptekst toevoegen De procedure om een e-mail te versturen vanuit het formulier vindt plaats op de computer van de bezoeker. Hiervoor wordt zijn eigen e-mailprogramma gebruikt. Het kan handig zijn om een korte tekst bij het formulier toe te voegen waarin de bezoeker dit wordt uitgelegd. U kunt dan denken aan een tekst als: Dit formulier maakt gebruik van het standaard e-mailprogramma op uw computer om een e-mail met de ingevulde gegevens naar de beheerder van deze website te sturen. Dit kan geen kwaad. Er wordt niets geïnstalleerd op uw computer en er worden geen andere gegevens verstuurd dan die u heeft ingevuld in het formulier. U zult hierbij één of meer vensters zien die u om toestemming vragen voor het versturen van de e-mail. Het kan handig zijn een helptekst bij het formulier te voegen:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
14
Als u tevreden bent met het formulier, kunt u de website opslaan: Sla het document op U kunt de Inspecteur eventueel sluiten: Klik bij Klik op
5 Zelf een formulier samenstellen Meestal zijn de formuliersjablonen bij Web Easy voldoende om een geschikt formulier mee te maken. Maar misschien wilt u liever zelf een formulier maken. Dat is met losse velden mogelijk. Om een formulier te maken, kunt u het beste eerst het veld formulier aan de pagina toevoegen. Dit is een speciaal kader waarin u de overige onderdelen van het formulier kunt plaatsen. Het veld is voor de werking van het formulier niet noodzakelijk, maar het houdt de pagina overzichtelijk en zorgt ervoor dat u alle velden en objecten in het formulier in een keer kunt verplaatsen of verwijderen: Maak een nieuwe pagina voor het formulier
Klik op
Klik op
U ziet het venster Object invoegen: Klik op tabblad
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
15
U ziet de lijst met formuliersjablonen waar u uit kunt kiezen. Om hierin ook de losse velden in te kunnen selecteren, moet u de optie geavanceerd inschakelen: Klik een vinkje bij
Klik op Klik op
U kunt nu het veld invoegen: Klik op de pagina waar het veld moet komen
U ziet dat het veld is ingevoegd: Het veld Formulier wordt gebruikt als basis van het formulier. U plaatst alle andere velden in dit veld:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
16
Een formulier maken
Klik op de titelbalk van het veld Formulier Zet het veld Formulier op de gewenste positie U kunt, indien nodig, het veld een ander formaat geven met de handvatten:
U kunt nu losse velden gaan toevoegen.
6 Een tekstvak invoegen Als eerste kunt u een tekstvak toevoegen. Dit is een vak waarin willekeurige tekst getypt kan worden. Het is verstandig om voor het invoegen van een veld als een tekstvak, eerst de tekst toe te voegen die voor het vak komt te staan. Dit doet u met tekst zonder opmaak:
Klik op
Klik bij
op
Klik op
Vul in het tekstobject een naam in die goed bij het tekstvak past, bijvoorbeeld ‘Naam’ als in het tekstvak de naam van de bezoeker moet worden ingevuld: Klik op de plek waar de tekst ingevoegd moet worden Dubbelklik op het tekstobject Pas de tekst aan Klik buiten het tekstobject © 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
U ziet dat u uw tekst heeft toegevoegd: U kunt eventueel nu of later het tekstobject op een andere positie zetten.
U kunt nu het tekstveld toevoegen: Open het venster Object Invoegen - tabblad Formulieren Klik op Klik op
Klik in het veld Formulier waar het object moet komen
Zet het veld op de gewenste positie U kunt een veld op dezelfde manier vergroten of verkleinen als ieder ander object, door de handvatten te verslepen. Maak eventueel het veld groter of kleiner
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
17
Een formulier maken
18
U moet nu de eigenschappen van het tekstvak nog aanpassen. Dit doet u met behulp van de Inspecteur: Klik op Klik op
U ziet dat het kader van Inspecteur rechts in het venster verschijnt: Klik op het tekstvak In het kader van Inspecteur: Klik, indien nodig, bij op U ziet de eigenschappen van het object: : de titel die in de HTML-code voor het object wordt gebruikt : de naam die in de e-mail van het formulier wordt weergegeven Het enige dat u hoeft aan te passen zijn de Html Titel en Html Naam. Geef deze een duidelijke naam, zodat u bij het ontvangen van de e-mail vanuit het formulier weet waar de ingevulde informatie voor staat: Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Naam
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
19
Tip Houd titel en naam hetzelfde Het is verstandig zowel de titel als de naam hetzelfde te houden. Dit voorkomt misverstanden. Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Naam Klik buiten de Inspecteur
U ziet nu nog geen veranderingen in het formulier zelf. De veranderingen zijn aangebracht in de HTML-code die bij het bouwen van de website wordt aangemaakt. Op dezelfde manier kunt u andere velden toevoegen.
Tip Tekstvlak Een variant op het tekstvak is het tekstvlak . Dit is een tekstvak dat uit meerdere regels bestaat. Hierin kan daarom ook meer tekst ingetypt worden: Het tekstvlak wordt vaak gebruikt voor opmerkingen:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
20
7 Een selectievakje invoegen Een ander veld is het selectievakje. Dit is een vakje dat aan- of uitgevinkt kan worden. Hiermee kan de bezoeker aangeven of iets wel of niet van toepassing is. Bijvoorbeeld getrouwd/niet getrouwd. Bij een selectievakje is al een tekst gevoegd. U voegt als volgt een selectievakje in: Open het venster Object Invoegen - tabblad Formulieren Klik op Klik op
Klik in het veld Formulier waar het object moet komen
U ziet dat er drie selectievakjes tegelijk worden geplaatst: Als u er minder nodig heeft, kunt u de overbodige vakjes plus tekst verwijderen. Verwijder eventueel overbodige selectievakjes
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
21
Tip Meer selectievakjes Als u meer selectievakjes nodig heeft, kunt u de bestaande vakjes en tekst kopiëren.
Tip Meerdere objecten en velden selecteren U kunt meerdere objecten en velden tegelijk selecteren door tijdens het klikken de ingedrukt te houden. Zet het object op de gewenste positie
U kunt nu de tekst bij het selectievakje aanpassen. Dit werkt zoals bij een gewoon tekstobject: Dubbelklik op het tekstobject Pas de tekst aan Klik buiten het tekstobject
U moet nu de eigenschappen van het selectievakje zelf nog aanpassen. Dit doet u met behulp van de Inspecteur: Klik op het selectievakje Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Gehuwd
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
22
Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Gehuwd
Standaard is bij selectievakjes de eigenschap ingesteld dat er een apart venster opent met de naam van het selectievakje als er op geklikt is. Dit is onnodig en gaat snel irriteren. Daarom is het verstandig deze functie uit te zetten: Dubbelklik bij in het vak
U ziet een apart venster met daarin een opdracht die wordt uitgevoerd na het klikken: Klik op Klik op
U ziet nu nog geen veranderingen in het formulier zelf. De veranderingen zijn aangebracht in de HTML-code die bij het bouwen van de website wordt aangemaakt.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
23
8 Radioknoppen invoegen Een ander veld is de radioknop: ook wel keuzerondje genoemd. Dit is een rondje dat aangeklikt kan worden en altijd samen met andere keuzerondjes voorkomt. Door op het ene rondje van de groep rondjes te klikken, gaan de andere automatisch uit. Hiermee kan de bezoeker aangeven welke keuze hij maakt uit meerdere mogelijkheden. Radioknoppen hebben een eigen tekst. U voegt als volgt radioknoppen in: Open het venster Object Invoegen - tabblad Formulieren Klik op Klik op
Klik in het veld Formulier waar het object moet komen
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
U ziet dat er drie radioknoppen tegelijk worden geplaatst: Als u er minder nodig heeft, kunt u de overbodige radioknoppen plus tekst verwijderen. Verwijder eventueel overbodige radioknoppen
Let op! Zorg er altijd voor dat u minstens twee bij elkaar horende radioknoppen heeft. Gebruik anders selectievakjes.
Tip Meer radioknoppen Als u meer radioknoppen nodig heeft, kunt u de bestaande radioknoppen en tekst kopiëren.
Tip Meerdere objecten en velden selecteren U kunt meerdere objecten en velden tegelijk selecteren door tijdens het klikken de ingedrukt te houden. Zet het object op de gewenste positie
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
24
Een formulier maken
25
U kunt nu de tekst bij de keuzerondjes aanpassen. Dit werkt hetzelfde als bij tekst zonder opmaak: Dubbelklik op het tekstobject Pas de tekst aan Pas ook de andere teksten van de radioknoppen aan Klik buiten het tekstobject U moet nu de eigenschappen van de radioknoppen zelf nog aanpassen. Dit doet u met behulp van de Inspecteur:
Let op! Om aan te geven dat radioknoppen bij elkaar horen, moet u ze dezelfde Html Titel geven, bijvoorbeeld ‘Geslacht’. U onderscheidt de knoppen binnen de groep van elkaar door ze de naam van de optie te geven. Bijvoorbeeld ‘Man’ en ‘Vrouw’. Om duidelijk te maken dat een verzameling radioknoppen bij een categorie hoort, kunt u er eventueel een aparte tekst (tekstobject) bij plaatsen. Bijvoorbeeld een kop met de tekst ‘Geslacht’. Klik op de eerste radioknop van de groep Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Geslacht
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
26
Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Man
Het is gebruikelijk om bij een groep radioknoppen altijd alvast een radioknop aan te hebben staan. Dit doet u als volgt: Dubbelklik bij in het vak Klik op
Standaard is bij radioknoppen de eigenschap ingesteld dat er een apart venster opent met de naam van de knop als er op geklikt is. Dit is onnodig en gaat snel irriteren. Daarom is het verstandig deze functie uit te zetten: Dubbelklik bij in het vak
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
27
Een formulier maken
U ziet een apart venster met daarin een opdracht die wordt uitgevoerd na het klikken: Klik op Klik op
U kunt nu de eigenschappen van de andere radioknoppen op dezelfde manier aanpassen. Let er hierbij wel op dat u een aparte Html Waarde opgeeft (bijvoorbeeld Vrouw in plaats van Man) en dat u voor de andere radioknoppen in de groep de optie Html Staat niet meer aan hoeft te zetten. Pas de andere radioknop(pen) aan U ziet nu nog geen veranderingen in het formulier zelf. De veranderingen zijn aangebracht in de HTMLcode die bij het bouwen van de website wordt aangemaakt.
9 Een lijst invoegen Een veelgebruikt veld is de lijst. Dit is een veld dat uitgeklapt kan worden, waarna er een lijst met mogelijkheden verschijnt waarop geklikt kan worden. Bijvoorbeeld een lijst met beroepen. Er zijn twee soorten lijsten: een gewone lijst die al open is en waarin men alleen kan klikken en een keuzelijst met invoervak. De laatste kunt u openklappen. Ook kunt u daarin in een tekstvak tekst typen om een keuze in de lijst te maken. U kunt als volgt een keuzelijst met invoervak invoegen:
Tip Invoegen gewone lijst Het invoegen van een gewone lijst
werkt bijna identiek.
Open het venster Object Invoegen - tabblad Formulieren © 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
Klik op Klik op
Klik in het veld Formulier waar het object moet komen
De lijst wordt geplaatst: Zet het object op de gewenste positie
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
28
Een formulier maken
29
Het is verstandig een tekst bij de lijst te plaatsen, zodat duidelijk is waar deze voor wordt gebruikt: Voeg een tekstobject in Typ een andere naam, bijvoorbeeld: Beroep
U moet nu de eigenschappen van de lijst zelf nog aanpassen. Dit doet u met behulp van de Inspecteur: Klik op de lijst Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Beroep
Dubbelklik bij in het vak Typ een andere naam, bijvoorbeeld: Beroep
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
30
Een formulier maken
U moet nu nog de inhoud van de lijst opgeven. Dat doet u als volgt: Dubbelklik bij in het vak
U ziet het venster Aangepaste Script Assistent. Hierin kunt u de lijstopties typen.
Let op! Typ iedere optie op een eigen regel. U gaat niet naar de volgende regel door te drukken op
. Daarvoor moet u drukken op
+
.
Vervang de teksten bij door de lijstopties, bijvoorbeeld: Timmerman Bakker Slager Klik op
U ziet nu nog geen veranderingen in het formulier zelf. De veranderingen zijn aangebracht in de HTML-code die bij het bouwen van de website wordt aangemaakt.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
Tip Modules Bij Web Easy zijn ook nog een aantal modules toegevoegd. Dit zijn voorgefabriceerde velden, zoals lijsten met allerlei opties al ingevuld. Open het venster Object Invoegen tabblad Formulieren Klik op een module Klik op
Klik op de plaats waar de module moet komen
10 Een knop invoegen Als u alle objecten aan het formulier heeft toegevoegd, kunt u de verzendknop toevoegen. Hiermee kunnen de bij een formulier ingevulde gegevens worden opgestuurd: Open het venster Object Invoegen - tabblad Formulieren Klik op Onder in het venster: Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
31
Een formulier maken
32
Klik in het veld Formulier waar het object moet komen
U ziet het venster Objecteigenschappen: Dubbelklik op
U ziet nu een venster waarin u het e-mailadres moet invullen waarnaar het formulier de e-mail moet versturen met de ingevulde gegevens: Vervang de tekst door uw mailadres Klik op Ook kunt u het onderwerp van de e-mail aanpassen. Dit laatste is niet noodzakelijk: Dubbelklik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
Vervang de tekst door een ander onderwerp Klik op
De knop wordt geplaatst: Zet het object op de gewenste positie
Tip Wissen Er is een speciale knop, het veld , waarmee u de ingevulde gegevens in een formulier in een keer kunt laten wissen. Het toevoegen van de knop kan een goede service zijn voor de bezoekers van uw website:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
33
Een formulier maken
34
Als u tevreden bent met het formulier, kunt u de website opslaan: Sla het document op U kunt ook eventueel de Inspecteur sluiten: Klik op Klik op
11 Het formulier uittesten Voordat u uw website met formulier op internet zet, is het nodig dat u het formulier eerst uittest. Dit doet u door de websitevoorbeeld te openen: Open het websitevoorbeeld van de webpagina met het formulier U ziet de website in uw internetbrowser: U ziet de pagina met het formulier:
U kunt nu het formulier uittesten door het in te vullen en de gegevens via e-mail aan uzelf te laten opsturen: Klik in het vak bij
Typ een naam, bijvoorbeeld: Piet Jansen
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
35
Een formulier maken
Vul de andere tekstvakken in
Klik bij
op
Klik op
Tip Gegevens wijzigen Met de knop wissen.
kunt u alle ingevulde gegevens in het formulier
Als u de gegevens in het formulier heeft ingevuld, kunt u de gegevens versturen: Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
36
Hoe de procedure nu verder loopt, is afhankelijk van de internetbrowser. Voor de procedure met Mozilla Firefox kunt u verder lezen op pagina 37. De onderstaande vensters ziet de bezoeker van uw website bij het versturen van het formulier als de internetbrowser Internet Explorer gebruikt wordt: U ziet dit venster: Klik op
Mogelijk ziet u dit venster: Klik, indien nodig, op
Mogelijk ziet u dit venster: Klik op
De e-mail verzonden door het formulier wordt nu automatisch verzonden naar het aangegeven e-mailadres.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
37
De onderstaande vensters ziet de bezoeker van uw website bij het versturen van het formulier als de internetbrowser Mozilla Firefox gebruikt wordt: U ziet dit venster: Klik op
U kunt de e-mail gaan ophalen. Open Windows Mail of Outlook Express U ziet de e-mail die vanuit het formulier verstuurd is: De e-mail is herkenbaar aan het onderwerp dat u eraan heeft meegegeven. Dubbelklik op de e-mail
HELP! Geen e-mail ontvangen Als u geen e-mail ontvangen heeft, kan dat verschillende oorzaken hebben. Wacht eerst even en probeer dan nogmaals de e-mail op te halen. Wanneer dit niet werkt: controleer of het e-mailadres dat u heeft opgegeven bij het formulier klopt. De e-mail wordt geopend. Als de inhoud van de e-mail er zo uitziet, hoeft u er niets meer aan te veranderen: U hoeft de rest van de handelingen in dit PDFbestand niet meer uit te voeren.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
38
Hoe de procedure nu verder loopt is verschillend vanuit Internet Explorer of Mozilla Firefox. Voor de procedure met Mozilla Firefox kunt u verder lezen op pagina 41. Bij een formulier verzonden vanuit Internet Explorer gaat u als volgt te werk: Het e-mailbericht is leeg. Wel is er een bijlage toegevoegd. Hierin staan de verstuurde formuliergegevens:
U moet nu eerst het bestand in de bijlage koppelen aan een programma waarin u de bijlage kunt lezen. Dit hoeft u slechts eenmalig te doen. Kies hiervoor Word. Als dit programma niet op uw computer is geïnstalleerd, kies dan WordPad. Eerst gaat u de bijlage opslaan: Rechtsklik in het vak bij Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
U ziet het venster Bijlagen opslaan: U moet de map selecteren waarin de bijlage moet komen te staan. Klik op
Selecteer de map waarin de bijlage opgeslagen moet worden, bijvoorbeeld
Klik op
U ziet het venster Bijlagen opslaan weer: Klik op
De bijlage is opgeslagen.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
39
40
Een formulier maken
U kunt nu de e-mail en het e-mailprogramma sluiten: Klik op
Sluit het venster van het e-mailprogramma U kunt nu het bestand koppelen aan een programma: Open Computer Open de map Documenten Dubbelklik op
U ziet het venster Windows: Klik een rondje
bij
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
41
Een formulier maken
Klik op
Als Word niet geïnstalleerd is: Klik op
Klik een vinkje
bij
Klik op
Het programma wordt gekoppeld aan de bijlage en meteen geopend. Voortaan zal dit type bestand bij dubbelklikken direct openen in dit programma. U ziet de opgestuurde gegevens van het formulier:
Bij een formulier verzonden vanuit Mozilla Firefox gaat u als volgt te werk: Open Word of WordPad Ga naar het venster met de e-mail
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
42
Een formulier maken
U ziet de opgestuurde gegevens van het formulier: Selecteer de tekst
Druk op
+
Ga naar het venster van Word of WordPad
Druk op
+
De formuliertekst wordt in het document geplaatst: U kunt nu de e-mail en het e-mailprogramma sluiten: Klik op
Sluit het venster van het e-mailprogramma U ziet dat de gegevens niet erg goed te lezen zijn omdat ze in een lange zin achter elkaar staan. U kunt ze overzichtelijker presenteren.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
43
Een formulier maken
12 Een formuliermail aanpassen en lezen in Word In Word past u als volgt een formuliermail aan:
Druk op
+
U ziet het venster Zoeken en vervangen: Typ bij
:&
Klik op
Klik in het vak bij
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
44
Een formulier maken
Klik op
Klik op
Klik op
U gaat nu nog de + -tekens vervangen door spaties: Typ bij
:+
Vervang de tekst bij door een spatie Klik op
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
Klik op
Ieder veld van het formulier staat nu op een eigen regel: Daarnaast staan er nu spaties waar er + -tekens stonden:
Let op: wanneer het formulier in Mozilla Firefox is gemaakt, moet u zelf nog het @-teken toevoegen in het mailadres:
Het formulier is nu goed te gebruiken. U kunt het opslaan onder een unieke naam, zoals de naam van degene die hem verstuurd heeft of het e-mailadres:
Klik op Klik op
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
45
46
Een formulier maken
U ziet het venster Opslaan als: Typ bij een nieuwe bestandsnaam, bijvoorbeeld: PietJansen Kies eventueel een andere map Klik op
De gegevens van het formulier zijn opgeslagen. Op dezelfde manier kunt u andere formulieren bewerken en opslaan. Sluit het venster van Word
13 Een formuliermail aanpassen en lezen in WordPad Als u geen Word tot uw beschikking heeft, kunt u WordPad gebruiken. U moet dan wel meer handmatig doen dan in Word, zoals de verschillende velden zelf op een eigen regel zetten. Dat doet u door achter ieder & -teken zelf op de Entertoets te drukken. U kunt daarbij gebruikmaken van de zoekfunctie: Klik op
U ziet het venster Zoeken: Typ bij
:&
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
Het eerste scheidingsteken wordt gevonden: Klik op de geselecteerde & in de tekst
Druk op
De & wordt verwijderd en het eerste veld staat op een eigen regel: Zoek met alle &tekens in de tekst en pas ze aan met
Als alle &-tekens gevonden zijn, ziet u dit venster: Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
47
48
Een formulier maken
Alle velden staan nu op een eigen regel: Klik op
U gaat nu nog de + -tekens vervangen door spaties: Klik op Klik op
Typ bij
:+
Typ bij een spatie Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een formulier maken
Als alle + -tekens gevonden zijn, ziet u dit venster: Klik op
Klik op
Ieder veld van het formulier staat nu op een eigen regel: Daarnaast staan er nu spaties waar er + -tekens stonden: Let op: wanneer het formulier in Mozilla Firefox is gemaakt, moet u zelf nog het @-teken toevoegen in het mailadres:
Het formulier is nu goed te gebruiken. U kunt het opslaan onder een unieke naam, zoals de naam van degene die hem verstuurd heeft of het e-mailadres: Klik op Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
49
Een formulier maken
50
U ziet het venster Opslaan als: Typ bij een nieuwe bestandsnaam, bijvoorbeeld: PietJansen Kies eventueel een andere map Klik op
De gegevens van het formulier zijn opgeslagen. Op dezelfde manier kunt u andere formulieren bewerken en opslaan. Sluit het venster van WordPad
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
