Dag 16: Contactformulier met RS! Forms

Gisteren hebben we een commentaar systeem geïnstalleerd. Het kan echter ook voorkomen dat mensen contact met je op willen nemen voor vragen over de website (bijvoorbeeld om te adverteren of om links uit te wisselen). Daarom gaan we vandaag een contactformulier maken met RSForm.

RSform downloaden en installeren
RSform is verkrijgbaar in een gratis tryout versie, de standaardversie die €9 kost of de Pro versie die €19,- kost. Voor ons magazine maken we gebruik van de standaardversie. Wanneer je een account hebt aangemaakt en hebt betaald voor RSform dan kun je inloggen op de RSJoomla website. Zodra je bent ingelogd ga je in het linkermenu naar 'My License Codes'. Vul hier het domeinnaam van je website in om een 'License Code' te verkijgen. Bewaar deze goed want je hebt hem straks nodig bij de installatie van RSform. Achter de knop 'Domain name for license' staat 'downloads'. Hier kun je de component downloaden. (Voorlopig heb je alleen de component nodig, de andere delen zijn voor ons niet van toepassing).

Download hier de laatste versie van de component (in dit geval com_forme1.0.4.J15.zip). Installeer deze op de Joomla! website net zoals de Allvideos Plugin en JomComment.

Een formulier maken
Ga naar 'Components > RSform!'. Nu krijg je het control panel van RSform te zien. Hier kun je aan de rechterkant de 'License Code' invullen om de volledige versie van RSform te activeren. Om een nieuw formulier aan te maken gaan we naar 'Forms Manager'.

Rechtsbovenaan klik je op 'New' om een nieuw formulier aan te maken. Voor Poker Magazine maken we een contactformulier dus bij 'Form title' vullen we 'Contactformulier' in. Bij 'Form name' vullen we het versimpelde 'contact' in, dit veld wordt namelijk gebruikt in de achterliggende code en rare tekens zoals uitroeptekens of spaties kunnen zorgen voor conflicten binnen het systeem. Het is dus verstandig om geen hoofdletters of spaties te gebruiken. De 'Language ISO' en 'Return URL' laten we leeg.

Onder het tabje 'Form Style' is het mogelijk om aanpassingen te maken op de manier waarop het formulier opgemaakt wordt. Bij het formulier dat wij gaan maken zijn aanpassingen niet nodig.

Het volgende tabje 'Thank you' geeft je de mogelijkheid om een bericht te tonen nadat iemand het formulier heeft ingevuld. Hier kun je bijvoorbeeld de gebruiker bedanken voor het invullen van het formulier en hem of haar laten weten dat je zo snel mogelijk contact opneemt.

Bij het tabje 'Emails' kun je bepalen naar welk emailadres een ingevuld contactformulier gestuurd wordt. Bij 'Email data to' kun je je eigen emailadres invullen. In ons geval is dat ' Dit e-mailadres is beveiligd tegen spambots, u heeft JavaScript nodig om het te kunnen bekijken '. Bij 'Email data FROM' kun je een emailadres invullen dat gebruikers te zien krijgen wanneer de data ook naar hun toegestuurd wordt. Ook hier gebruiken we ' Dit e-mailadres is beveiligd tegen spambots, u heeft JavaScript nodig om het te kunnen bekijken '. Bij 'Email subject' en 'Email Text' kun je aangeven wat het onderwerp en het bericht is van de email die naar jou en (mogelijk) naar de gebruiker wordt verstuurd. Als laatste kun je onder 'Scripts' eventueel nog zelfgeschreven scripts toevoegen. Dit is in het geval van Poker Magazine niet nodig.

Het formulier bouwen
Nu we de standaardinstellingen voor het formulier ingesteld hebben moeten we het opslaan voordat we het formulier kunnen gaan bouwen. Druk op de 'Save' knop rechtsboven. Je ziet nu dat er een formulier is bijgekomen in het lijstje. Klik op het formulier dat je zojuist hebt aangemaakt. We belanden nu weer in het 'Form Edit' scherm maar we hebben nu rechtsboven de mogelijkheid om een nieuw veld toe te voegen aan het formulier door op de 'New Field' knop te drukken.

Ons formulier bestaat uit de volgende invoervelden:

• Naam
• Email adres
• Bericht
• Submit knop

Hoewel de submit knop niet een echt invoerveld is wordt het door RSform wel gezien als een apart veld. Wanneer we een invoerveld gaan aanmaken voor het invullen van een naam krijgen we de volgende opties te zien:

• Field id - Hier vullen we het 'id' dat gebruikt wordt in de programmeercode van het formulier. Hier mag je enkel letters (en geen hoofdletters) gebruiken. Wij vullen hier 'naam' in.
• Field Title - Hier komt de titel van het veld. Deze wordt ook aan de gebruiker getoond dus zorg ervoor dat het een duidelijke titel is zodat de gebruiker weet wat hij in moet vullen. Wij vullen hier 'Naam' in.
• Description - Dit veld kan gebruikt worden om een uitgebreidere uitleg van het invoerveld te geven. In het geval van 'Naam' is dit niet nodig.
• Validation - Validation kan gebruikt worden om een invoerveld te laten valideren. Het kan handig zijn om te controleren of het invoerveld überhaupt ingevuld is zoals het geval is bij 'Naam'. Wij willen graag dat iedereen die het formulier invult ook zijn naam invult en daarom kiezen wij 'alpha(A-Z,a-z)' als validatie methode. Zodra je een validatie methode kiest, krijg je de optie om het bericht aan te passen dat iemand te zien krijgt als het veld niet goed is ingevoerd.
  
• Field type - Een formulier kan verschillende soorten invoervelden hebben. Denk bijvoorbeeld aan een drop down menu, checkboxen of de mogelijkheid om een bestand te uploaden. Bij 'Field type' kun je aangeven om wat voor invoerveld het gaat. In het geval van de naam is het een 'text' veld.
• Default Value - Hier kun je standaard een tekst in het invoerveld zetten. Bijvoorbeeld 'Vul hier uw naam in'. Zodra de gebruiker dan op het invoerveld klikt verdwijnt de tekst en kan de gebruiker zijn eigen naam invullen. Bij ons formulier is dit overbodig.
• Additional Attributes - Dit kan gebruikt worden om het invoerveld te stylen door hier CSS in te plaatsen.
• Field Style - Hier kun je de manier waarop het veld wordt gegenereerd door de component beïnvloeden. Wij laten dit voor Poker Magazine voor wat het is.

We slaan dit veld op door op 'Save' te drukken en we gaan de andere drie invoervelden op dezelfde manier toevoegen. Voor het emailadres veld selecteren we bij 'Validation' de 'email' optie om ervoor te zorgen dat de gebruiker een geldig emailadres invoert. Het 'Field type' is net zoals bij de naam gewoon 'text'.

Voor het bericht veld gebruiken we 'textarea' als 'Field type' omdat de gebruiker dan een groter tekstvlak krijgt en een langer bericht kan typen. Als 'Validation' gebruiken we 'mandatory' omdat we gebruikers willen verplichten een bericht in te vullen als ze gebruik maken van het contactformulier. Bij het berichtveld vullen we het volgende in bij de 'Additional Attributes': 'cols="70" rows="10"'. Dit zorgt ervoor dat het invoerveld duidelijk opgemaakt wordt en de gebruiker de ruimte heeft om zijn bericht te typen.

Als laatste veld maken we de submit-knop. We kiezen hier bij 'Field type' voor 'submit button'. Bij 'Default value' vullen we 'Verzenden' in, dit komt dan op de knop te staan. Omdat de 'Field title' overbodig is halen we deze weg uit de 'Field Style'. De volgende tekst moet daar worden verwijderd: '{fieldtitle}'. We hebben nu alle velden toegevoegd en slaan het formulier op.

Meer informatie over RSform!
Wil je meer weten over de verschillende velden en waardes van RSform? Dan raden we je aan gebruik te maken van de knowledge base op de website van RSform.

Het formulier plaatsen
Zodra het formulier opgeslagen is krijgen we een overzicht te zien van alle formulieren die aangemaakt zijn. Als het goed is zien we nu ook het contactformulier dat we hebben aangemaakt. Om deze te publiceren klikken we op het rode bolletje met het kruisje dat dan veranderd in een groen vinkje.

Let op, het is belangrijk om het 'Form ID' te onthouden dat aan de rechterkant staat. Dit 'Form ID' wordt straks gebruikt bij het aanmaken van het menu item. Het formulier is nu gepubliceerd. Om ervoor te zorgen dat gebruikers kunnen navigeren naar het formulier moeten we er een menu item voor aanmaken.

Navigeer naar 'Menus' en kies dan het menu waarin je een link naar het formulier wil plaatsen. In ons geval is dat het 'Main menu'. Maak een nieuw menu item aan en kies voor 'RSform!'. Vul de titel in van het menu item, in dit geval 'contact' en vul aan de rechterkant het 'Form ID' in dat we hebben kunnen zien toen we het formulier publiceerde. Druk nu op save. Het formulier staat nu online en gebruikers kunnen contact met je opnemen via het formulier.

Samenvatting
Vandaag hebben we een formulier gemaakt met RSform. Gebruikers kunnen nu contact met ons opnemen via dit formulier. Morgen gaan we een eigen forum opzetten. Normaal gesproken is dit een enorme klus maar dankzij Joomla! is dit allemaal niet zo ingewikkeld.

Commentaar (2)