Formulieren

Een van de meest bekende manieren voor bezoekers om contact met je op te nemen is met behulp van een formulier. In tegenstelling tot een gewoon e-mail adres hoeft een gebruiker geen e-mail programma op te starten maar kan men direct, vanaf jouw site, contact met je zoeken.

Formulieren worden voor twee redenen gebruikt:

  1. Bezoekers van een website kunnen contact opnemen of bestellen.
  2. Informatie kan aan een database toegevoegd worden.

tabelVb2

In bovenstaand voorbeeld zijn twee contactformulieren te zien. De meeste websites hebben een contactformulier. Een formulier heeft een knop waarmee een bezoeker het kan versturen. De gegevens kunnen vervolgens naar een e-mail adres of naar een database gestuurd worden. Om een formulier te verzenden zijn er een aantal mogelijkheden:

  • Als e-mail naar een e-mail adres.
  • Met behulp van een scriptje (PHP, ASP).
  • Met behulp van een CGI script dat (meestal) door je serverbeheerder aangeleverd wordt.

Wij gaan hier 2 opties behandelen, de e-mail en de PHP variant.

 

Formulier elementen

Een formulier bestaat uit een form-tag met daarin een aantal andere tags die tekstvelden, buttons, checkboxes etc maken. De volgende elementen zijn de meest bekende:

Overzicht van de diverse formulier elementen

Overzicht van de diverse formulier elementen

 

De HTML-code van dit voorbeeld is zwart. De overige code (zoals de tabel) is grijs:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Form</title>
</head>

<body>
<form action=”” method=”get” name=”contactMe”>
<table width=”400″>
<tr>
<td><label for=”textfield”>Textfield</label></td>
<td><input type=”text” name=”textfield”></td>
</tr>
<tr>
<td><label for=”textarea”>Textarea</label></td>
<td><textarea name=”textarea” cols=”45″ rows=”5″></textarea></td>
</tr>
<tr>
<td><label for=”textarea”>Button</label></td>
<td><input type=”submit” name=”button” value=”Submit”></td>
</tr>
<tr>
<td><label for=”checkbox”>Checkbox</label></td>
<td><input type=”checkbox” name=”checkbox”></td>
</tr>
<tr>
<td><label for=”radio”>Radiobutton</label></td>
<td><input type=”radio” name=”radio” value=”radio”></td>
</tr>
<tr>
<td><label for=”select”>Menu / list</label></td>
<td><select name=”select”>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>

 

De form tag

<form action=”” method=”get” name=”contactMe”>…</form>

In de form tag bepaal je de volgende zaken:
action: bepaalt naar welke bestemming het formulier wordt verzonden. Dit kan een e-mail adres zijn of een ander document.
method: bepaalt hoe het formulier wordt verzonden. GET is standaard.
enctype: bepaalt het type inhoud.

Binnen de form tag plaats je het formulier zelf, de form tag omsluit als het ware de losse formulier elementen. Een aantal elementen wil ik hier even kort behandelen.

 

Input fields

Bij een input field kan iemand iets invoegen. Dit kan tekst zijn maar het kan ook een radiobutton of checkbox zijn. Tekst is gewoon tekst wat iemand kan invullen (een naam of adres of iets dergelijks).

Naast het doorgeven van een opmerking en/of een vraag kun je met formulieren ook keuzes of opties doorgeven. Denk maar aan het aanvinken van een aantal producten die je wilt bestellen. Of de keuze in betaalwijze (iDeal of creditcard bijvoorbeeld). Hiervoor gebruik je radiobuttons (slechts één keuze) of checkboxen (meerdere keuzes).

Tekst
<input type=”text”>
Dit is eventueel uit te bereiden met een class, name en id attribuut. In het voorbeeld hieronder zie je twee input field waarvan de tweede met behulp van CSS een rode rand heeft gekregen.

Text input field

Text input field

<input type=”text” id=”voornaam” name=”Voornaam”>
<input type=”text” id=”achternaam” name=”Achternaam” class=”rodeRand”>

Radiobutton (1 enkele optie aanbieden)
Soms wil je dat iemand slechts één optie kan invoeren, bijvoorbeeld als kezue voor een betaalmethode (iDeal, Visa, Master Card, contant etc.).  Meerdere opties tegelijkertijd aanvinken kan niet. Hiervoor gebruik je radiobuttons.

Radiobuttons

Radiobuttons

<input type=”radio” name=”Betaling” value=”Visa”> Visa<br>
<input type=”radio” name=”Betaling” value=”iDeal”> iDeal<br>
<input type=”radio” name=”Betaling” value=”Gift”> Gift card

Let even op het attribuut ‘name’. Dit is bij alle betaalwijzen hetzelfde, namelijk ‘Betaling’. Hierdoor “weet” de browser dat er maar 1 geselecteerd kan worden.

Checkboxen (meerdere opties aanbieden)
Het is gebruikelijk om in een formulier een klant meerdere opties aan te bieden, bijvoorbeeld iemand de gelegenheid bieden om meerdere opties aan te vinken bij iets of om meerdere zaken te bestellen. Dit doe je met checkboxes.

Checkboxen

Checkboxen

<input type=”checkbox” name=”Order a good mark” value=”Yes”>
A good mark for this module<br>
<input type=”checkbox” name=”Order more holidays” value=”Yes”>More holidays<br>
<input type=”checkbox” name=”Order the best job in the world” value=”Yes”>The best job in the world

Bij het attribuut “name” vul je in wat jij als bedrijf wilt weten bij het ontvangen van het formulier. Een beschrijving van het product kan een optie zijn. Achter “value” kun je dan zoiets als “Yes” of “OK’ invullen. Het resultaat voor jou zal bijvoorbeeld zijn: Order the best job in the world = Yes

Textarea
Met een textarea kan iemand meerdere regelst tekst invoeren. Dit kan handig zijn in het geval van een vraag of een opmerking.

Textarea

Textarea

Een textarea kun je een breedte en hoogte geven op twee manieren.

Enerzijds met width en height in je CSS:
textarea{
width:200px;
height:50px;
}

Anderzijds met cols en rows waarmee je kolommen en rijen opgeeft.
<textarea cols=”30″ rows=”5″></textarea>

Ik vind zelf width en height in een stylesheet prettiger werken omdat ik dan textfields en textareas dezelfde maten kan opgeven.

Button
Tot slot moet er natuurlijk een button zijn in een formulier waarmee de gebruiken het kan versturen danwel resetten.

Een reset en een verzend button.

Een reset en een verzend button.

<input name=”Reset” type=”reset” value=”Reset”>
<input name=”Submit” type=”submit” value=”Verstuur!”>

Value is de tekst die op de button geplaatst wordt.

 

Een PHP scriptje gebruiken om je site online te zetten

Hiervoor gebruik je een formtomail.php script. Je hoeft hier zelf geen PHP voor te kunnen maar je moet wel kunnen lezen. In het script wordt op bepaalde momenten (meestal bovenin) aangegeven waar je het email adres, waar de gegevens naar toe moeten, in moet vullen.

Zie http://www.pepermunt.net/website-maken/formulier-website.html voor een duidelijke tutorial.