Quick Guide VivianCMS

Quick Guide VivianCMS Contactformulier creëren

Versie: 1.0 Startdatum: 24 juli 2006 Datum laatste wijziging: 24 juli 2006 Opmerking: Gepubliceerd op http://www.viviancms.nl

Inhoud 1 Inleiding............................................................................................................................................3 1.1 Contactformulier creëren.......................................................................................................... 3 2 Het formulier creëren....................................................................................................................... 4 2.1 Invulvelden creëren...................................................................................................................4 3 Het formulier in een document plaatsen...........................................................................................8 3.1 Knoppen instellen..................................................................................................................... 9 3.2 Creëren van een template..........................................................................................................9 3.3 Acties toewijzen aan knoppen................................................................................................ 11 3.4 Acties na invullen en verzenden............................................................................................. 13 4 Het formulier op de site.................................................................................................................. 14 5 Vragen of opmerkingen.................................................................................................................. 15

1 Inleiding VivianCMS is een content management systeem. VivianCMS is speciaal ontworpen om u in staat te stellen om uw website op een eenvoudige manier van inhoud te voorzien of van inhoud te wijzigen. Het doel van de “Quick Guides” is om bepaalde basisfuncties van VivianCMS op een eenvoudige, “stap-voor-stap” manier uit te leggen. Hierdoor zult u snel met VivianCMS aan de gang kunnen. In de “Quick Guide” geven we allereerst een beschrijving van de stappen die u moet doorlopen om een bepaalde mogelijkheid te gebruiken. Vervolgens vatten we deze stappen nog eens puntsgewijs voor u samen. Mocht u behoefte hebben aan een meer uitgebreide uitleg van bepaalde functies, dan verwijzen wij u naar de basishandleiding. Mocht u nog verzoeken hebben voor een “stap-voor-stap”-uitleg niet als quick guide beschikbaar is, meldt u dit dan via de vraagbaak (http://vivian.ivinity.nl/vraagbaken.html).

1.1 Contactformulier creëren In deze quick-guide zullen we een contactformulier creëren. Via een contactformulier kunnen bezoekers hun contactgegevens achterlaten op de website. Deze gegevens kunt u dan in VivianCMS inzien, of worden via de email automatisch naar u toegestuurd. Hierdoor wordt het voor bezoekers een fluitje van een cent om contact met u op te nemen als zij vragen aan u willen stellen, offertes willen aanvragen of om andere redenen contact met u zouden moeten opnemen. Om een contactformulier op uw site te zetten, moet u eerst een contactformulier creëren. Dit contactformulier plaatst u vervolgens in een document. Hier stelt u in wat er moet gebeuren als een bezoeker het formulier invult. Als u wilt dat de ingevulde gegevens naar uw e-mailadres worden gestuurd, moet u wel eerst een template aanmaken. Dit template geeft aan hoe de e-mail die naar u wordt toegestuurd eruit moet zien.

2 Het formulier creëren De eerste stap is het creëeren van een nieuw formulier. Dit doen we door naar de map te gaan waar we het formulier willen creëren en vervolgens te klikken op “nieuw-->formulier. Vervolgens geven we het nieuwe formulier met “hernoemen” een nieuwe naam. In dit geval kiezen we voor de naam “contact”. Het nieuwe formulier “contact” kunnen we openen door erop te dubbelklikken. We krijgen nu het volgende scherm te zien:

Zoals te zien is op het scherm, is het formulier op dit moment nog leeg. We zullen dit moeten gaan vullen met de velden die we nodig hebben. Kort samengevat: 1. Ga naar de map waar u het formulier wilt hebben. 2. Klik op “Nieuw --> formulier”. 3. Klik op “Hernoemen” om het formulier een nieuwe naam te geven. 4. Dubbelklik om het formulier te openen.

2.1 Invulvelden creëren Het creëren van nieuwe velden doen we door op de knop “Nieuw...” te klikken. We krijgen nu het volgende scherm te zien:

Hier moeten we aangeven wat voor type veld we willen creëren. In de het bovenste van de twee velden geven we het soort veld aan dat we willen

hebben, bijvoorbeeld een veld met tekst, met getallen, met de datum enzovoorts. In het onderste veld specificeren we onze keuze. In het geval van tekst kunnen we bijvoorbeeld aangeven of we een enkele lijn tekst willen, een tekstblok, een e-mailadres of een ander soort veld. Als we hebben aangegeven dat we een getallenveld willen, kunnen we aangeven of dit kommagetallen of gehele getallen moeten zijn. Voor een compleet overzicht van de mogelijkheden kunt u kijken in de handleiding. Ons formulier wordt een contactformulier, dus allereerst willen we graag weten wie contact met ons opneemt. We zullen dus eerst een veld moeten maken waar mensen hun naam kunnen invullen. Dit doen we door te kiezen voor het type “tekst” in het bovenste vak, en “tekst” in het onderste vak. Vervolgens klikken we op “Volgende”. We komen dan in het volgende scherm:

Hier vullen we vervolgens de verschillende velden in. Voor de functies van de verschillende velden kunt u kijken in de handleiding. We maken eerst een veld voor de voornaam van de persoon. Hiervoor vullen de velden Naam en Alias in. Beide velden noemen we “Voornaam”. Vervolgens klikken we op “Opslaan”. Op dezelfde manier creëren we een veld voor de achternaam, met Achternaam als naam en alias. We willen echter zeker de achternaam van de persoon weten, dus vinken we ook de checkbox achter “Verplicht” aan. De bezoeker is nu verplicht om dit veld in te vullen, anders wordt het formulier niet verstuurd. Als we nu in het overzichtsscherm kijken, zien we de twee velden die we hebben gecreëerd, met daarin aangegeven welke alias we voor het veld gebruiken, of het veld verplicht is en of er een markering in is aangegeven. Als we op “preview” klikken, zien we hoe het formulier er op de site uit zal zien. Door weer op “editor” te klikken komen we terug in het overzichtsscherm.

In ons contactformulier willen we graag weten hoe oud iemand is. Dit kunnen we doen door een getallenveld te creëren. Hiervoor klikken we weer op “Nieuw...”. In het scherm waar we het type moeten selecteren, selecteren we nu “Getallen” in het bovenste veld en “Geheel getal” in het onderste veld. Vervolgens klikken we weer op “Volgende”.

In het volgende scherm vullen we “Leeftijd” in als de naam en alias van het veld. Achter “min” en “max” vullen we we de waarden in waar de leeftijd tussenin moet liggen, bijvoorbeeld “1” als de minimale waarde van het veld en “200” als de maximale waarde van het veld. Ook vullen we het veld “achtervoegsel” in. Hier zetten we het woord “jaar”. Dit verschijnt nu achter het veld dat de bezoeker zal invullen. Omdat we de leeftijd van de bezoeker niet noodzakelijk hoeven te weten, kruisen we de checkbox achter “verplicht” niet aan. Als we nu op “Opslaan” klikken, verschijnt het veld weer in het overzichtsscherm. Met de knop “Preview” kunnen we weer kijken hoe het formulier er tot nog toe op de website uit zal zien.

Op deze manier kunnen we nu ook de rest van de veld vullen. We maken nog een aantal velden voor het adres en een veld voor de e-mail. Voor de adresvelden gaat alles zoals hierboven beschreven. Echter, voor de postcode geven we bij “min” en “max” het minimaal en maximaal aantal tekens in dat de postcode kan bevatten (in beide velden 6). Voor de e-mail selecteren we bij de typeselectie in het onderste vak “E-mail” in plaats van “Tekst”. Als laatste creëren we nog een tekstblok voor opmerkingen. Hiervoor selecteren we in het typeselectiescherm “Tekst” en “Tekstblok”.

Als u nu op “Volgende” klikt komt u weer in het instellingenscherm. Dit scherm heeft nu enkele extra opties:

We geven het tekstblok de naam “Opmerkingen” en de Alias “Opmerkingen”. Bij de beschrijving vullen we de tekst in: “Vul hier bijzonderheden in”. Deze tekst zal nu onder de naam te zien zijn. Met de checkbox “breed” kunt u bepalen of u een breed of smal tesktblok wilt hebben. Een breed tekstblok zal over de hele breedte van het formulier te zien zijn, een smal tekstblok zal even breed zijn als de normale tekstvakken. Daarnaast kunt u met de checkbox “Met opmaak” aangeven of u de bezoekers de mogelijkheid wilt geven om de tekst op te maken. Hiervoor zullen dan knoppen in beeld verschijnen. We kiezen er in ons geval voor om beide checkboxen uit te laten. Als we alle velden hebben ingesteld, kunnen we het resultaat weer bekijken in het overzichtsscherm en bij de preview.

Ons formulier is nu af. De volgende stap is om het formulier in een document te zetten. Kort samengevat: 1. Open het formulier. 2. Klik op “Nieuw...” om een nieuw veld te creëren. 3. Selecteer in het typescherm het type veld dat u wilt creëren en klik vervolgens op “Volgende”. 4. Vul de naam, alias en eventuele andere opties in in het veldbewerkscherm en klik op “Opslaan”. 5. Bekijk het resultaat in het overzichtsscherm, of klik op “preview” om een preview van het formulier te zien. Als u de preview bekijkt, klikt u weer op “editor” om terug te gaan naar het ovezichtsscherm.

3 Het formulier in een document plaatsen Om het formulier in een document te plaatsen, creëert u eerst het document en de cel waar het formulier in geplaatst moet worden (zie hiervoor de basishandleiding, of quick guide “Van document naar website”). In de cel die u hiervoor gecreëerd hebt, plaatst u vervolgens het formulier door te klikken op “Toevoegen ( )” --> “Formulier”.

Vervolgens krijgt u in de cel de tekst te zien: “Dubbelklik om een formulier te selecteren”. Als u op deze tekst dubbelklikt, opent het formulierbewerkscherm. U komt dan in het tabblad “formulier”.

Hier selecteert u het formulier door achter het document te klikken op “Kiezen...”. Vervolgens klikt u op toepassen. U kunt nu de andere opties in het formulier instellen. Kort samengevat: 1. Creëer een document. 2. Klik op “Toevoegen (

)” --> “Formulier”

3. Dubbelklik op “Dubbelklik om een formulier te selecteren”. 4. Klik in het tabblad “Formulier” achter het veld “Formulier” op “Kiezen...”. 5. Selecteer het formulier dat u wilt gebruiken en klik op “Toepassen”.

3.1 Knoppen instellen Als de bezoeker het formulier heeft ingevuld, moet hij dit kunnen versturen, bijvoorbeeld naar de site of naar uw e-mailadres. Hiervoor moeten we knoppen onder aan het formulier maken. Dit doen we onder het tabblad “Knoppen”. Allereerst moeten we instellen welke knoppen er zijn. Hiervoor klikken we op de knop “Toevoegen”. U komt nu in het scherm “nieuwe knop”.

Hier typt u de naam van de nieuwe knop in. Onder type geeft u aan of de knop een actie moet laten uitvoeren, of het formulier moet resetten. We gaan twee knoppen maken. Eerst maken we een knop voor het versturen van het formulier. We noemen deze knop “Versturen”, en selecteren het type “Actie”. Vervolgens klikken we op “Toevoegen”. De tweede knop moet het formulier resetten en alle tot dan toe ingevulde gegevens wissen. Deze knop noemen we “Wis” en hier selecteren we de actie “Reset”. Vervolgens klikken we weer op de knop “Toevoegen”.

Kort samengevat: 1. Klik op het tabblad “Knoppen”. 2. Klik op “Toevoegen”. 3. Type de naam van de nieuwe knop in het vak “Naam”. 4. Selecteer het type knop, “Actie” als de knop een actie moet verzorgen, “Reset” als de knop het formulier leeg moet maken. 5. Klik op “Toevoegen”.

3.2 Creëren van een template In VivianCMS is een template een document waar bepaalde velden automatisch door VivianCMS worden ingevuld. Hierdoor kunt u bijvoorbeeld automatisch e-mails versturen met een verschillende naam voor iedere

persoon waar deze naartoe wordt gestuurd. Om de gegevens van een contactformulier per e-mail naar u toe te laten sturen, moet u eerst een template voor deze e-mail creëren. In het template bepaald u op welke plaats welke gegevens moeten komen te staan voor de e-mail die naar toe wordt gestuurd. Omdat een template een document is, zult u eerst een document moeten creëren en hernoemen. Het document dat we gebruiken in deze quick guide noemen we “template contact”. Velden die we door VivianCMS willen laten invullen geven we aan met “{NAAM}” (zonder de aanhalingstekens). Hierbij is “NAAM” de alias die we aan een bepaald veld hebben gegeven. Als we bijvoorbeeld willen dat de voornaam en de achternaam van de persoon die het contactformulier heeft ingevuld, typen we “{VOORNAAM} {ACHTERNAAM}” in het document. Dit kunt u op elke willekeurige plaats in het document doen. De namen van een veld kunnen meerdere keren worden gebruikt in de template. Voor het template van ons contactformulier creëren we twee cellen, met in de eerste cel welke gegevens ingevuld moeten worden en in de tweede cel de velden die VivianCMS moet invullen. Hieronder ziet u een voorbeeld van dit document, samen met een voorbeeld van de e-mail die verstuurd is met daarin de contactgegevens van een bezoeker:

Kort samengevat: 1. Ga naar de map waar u het template wilt creëren en creëer een nieuw document (“Nieuw-->Document” en vervolgens een nieuwe naam geven met de knop “Hernoemen”). 2. Maak het document op zoals u de e-mail wilt ontvangen. Gebruik hierbij “tags” voor de velden die u ingevuld wilt hebben. Een tag heeft de vorm: {NAAM}. Vul in plaats van “NAAM” de naam van de alias in die u het veld hebt gegeven, altijd volledig in hoofdletters.

3.3 Acties toewijzen aan knoppen De knoppen die we aangemaakt hebben zijn nu te zien in het tabblad “Knoppen”. Hier kunnen we de knop die we willen bewerken selecteren. We selecteren nu de knop “Verzenden”. Vervolgens klikken we op “Nieuw” onder het tabblad acties om een nieuwe actie toe te voegen. Het scherm “Actie

toevoegen” zal nu in beeld verschijnen. Alleen aan actieknoppen kunnen acties gekoppeld worden. Aan resetknoppen kunnen geen verdere acties worden gekoppeld.

Allereerst geven we de actie een naam, in dit geval “verzenden”. Vervolgens kunnen we kiezen uit 3 types, namelijk “Verzenden via E-mail”, “Aan datalijst toevoegen” en “Script actie”. Wat deze actietypes precies doen staat verder beschreven in de handleiding. We willen graag dat het formulier naar ons toe wordt gestuurd via de e-mail, dus we selecteren de actie “Verzenden via Email”. Vervolgens klikken we op “Toevoegen”. Het actiebewerkscherm wordt nu geopend:

In het bewerkscherm kunt u invullen waar de e-mail naar toe gestuurd moet worden, wie de e-mail ontvangt, het afzendadres, de naam van de afzender en het onderwerp. Met behulp van de knop “template” kunt u uitkiezen welk template voor de e-mail gebruikt moet worden. Dezelfde tags die gebruikt worden in de templates, kunt u ook in de velden gebruiken die u hier moet invullen. Zo hebben we in bovenstaand voorbeeld “{ACHTERNAAM}” gebruikt als naam van de afzender. Dit zorgt ervoor dat in de e-mail die we ontvangen als het contactformulier is ingevuld, de achternaam van degene die het

contactformulier heeft ingevuld als afzender vermeld staat. Door te klikken op “Opslaan” worden de wijzigingen opgeslagen. Kort samengevat: 1. Open het document waar het formulier in is geplaatst. 1. Dubbelklik op het formulier. 2. Ga naar het tabblad “Knoppen”. 3. Selecteer een actieknop. 4. Klik op “Nieuw...”. 5. Geef de actie een naam en selecteer de juiste actie (hier “Verzenden via e-mail”). 6. Vul de gegevens in en kies het template. Hier kunnen tags gebruikt worden. 7. Klik op “Opslaan”.

3.4 Acties na invullen en verzenden Als de gebruiker het formulier heeft ingevuld en vervolgens op verzenden heeft geklikt, wordt eerst gecontroleerd of alles goed is ingevuld. Als dit het geval is, wordt het formulier verzonden. Vervolgens kunt u de gebruiker nog een bericht laten zien, het formulier leegmaken en de bezoeker naar een andere plek van de site doorverwijzen. Dit doet u met het tabblad “Goed resultaat” (onder het tabblad “Knoppen”).

Als we een bericht willen laten zien nadat het formulier is verstuurd, vinken we de checkbox “Bericht” aan. In het veld onder de checkbox kunnen we dan het bericht intypen dat de bezoeker te zien moet krijgen. Vervolgens kunnen we de bezoeker doorverwijzen naar een nieuwe pagina. Om dit te doen selecteren we “Statische pagina” of “Dynamische pagina” achter Doorverwijzen. Er zal nu een extra optie “Statische pagina” of “Dynamische pagina” verschijnen, waar u de juiste pagina kunt kiezen door te klikken op de knop “Kiezen...”. Als laatste kan het formulier leeggemaakt worden door de checkbox “Formulier wissen” aan te vinken. Dit kan vooral belangrijk zijn als u besluit geen doorverwijzing te maken. Door op “Bewerken” te klikken worden de geselecteerde opties opgeslagen. Kort samengevat: 1. Ga onder het tabblad “Knoppen” naar het tabblad “Goed resultaat”. 2. Selecteer of u een bericht wilt laten zien na invullen (hier wel, dus wordt de checkbox “Bericht” aangevinkt en een tekst ingevuld). 3. Kies of er naar een nieuwe pagina moet worden doorverwezen en kies deze eventueel uit (Hier “Statische pagina”, waarna achter statische pagina “welkom.html” als pagina is gekozen). 4. Als u het formulier wilt resetten na verzenden, vinkt u de checkbox achter “Formulier wissen” aan. 5. Klik op “Bewerken” als u de wijzigingen wilt opslaan.

4 Het formulier op de site Het formulier is nu klaar. Op de site kan de bezoeker het contactformulier invullen. Als de bezoeker het formulier ingevuld heeft en het wil versturen, klikt hij op “Versturen”. VivianCMS controleert vervolgens of alle verplichte velden zijn ingevuld en of alle ingevulde waarden kloppen. Vervolgens wordt het formulier naar het e-mailadres gestuurd dat wij hebben aangegeven. De bezoeker krijgt een bedankberichtje in beeld en wordt vervolgens naar een nieuwe pagina doorgestuurd.

Als u in VivianCMS het formulier wijzigt, zijn deze veranderingen direct op de site zichtbaar (velden toevoegen / verwijderen). Als u in het document het formulier aanpast (door bijvoorbeeld de acties van knoppen te wijzigen), dient u het document opnieuw definitief te maken voor de wijzigingen op de site te zien zijn.

5 Vragen of opmerkingen In deze quick-guide hebben we stap voor stap het creëren van een contactpagina doorlopen. We hopen dat de uitgebreide uitleg, gecombineerd met de stap-voor-stap aanwijzingen u een duidelijk beeld geven van de stappen die u moet doorlopen om dit voor elkaar te krijgen. Mocht u er met deze quick-guide niet uitkomen, kijkt u dan even op de ondersteuningspagina van VivianCMS (www.viviancms.nl/ondersteuning.html). Hier kunt u antwoord zoeken op uw vragen via de “Meest gestelde vragen”-pagina of de “User tips”. Mocht u er dan nog niet uitkomen of mocht u andere vragen of opmerkingen hebben, dan kunt u altijd uw vragen stellen via de “Vraagbaak”. Mocht u zelf een handige tip hebben die u gebruikt bij het maken van een contact formulier en u wilt dat delen met andere VivianCMS gebruikers, laat het aan ons weten! U kunt dit doen via de contactpagina op www.viviancms.nl/contact.html, of door een e-mail te sturen naar [email protected].