Zelf een mailformulier bouwen

In diverse artikelen op deze site worden mogelijkheden besproken om zelf een mailformulier voor je website te programmeren.
In het item mailto: gebruiken wordt beschreven hoe je met het protocol mailto: een formulier kunt laten versturen met behulp van de standaard e-mail cliént op de PC, tablet of smartphone van de bezoeker van je site. Daar worden ook de nadelen van het gebruik van mailto: genoemd.

Een tijd lang waren internetdiensten populair waarop je een mailformulier kon maken voor je eigen website. De HTML-, CSS- en JavaScript-code kon je downloaden om in je site in te bouwen en de afhandeling aan de server-kant werd door de internetdienst gedaan.
Helaas wordt dit soort diensten zeldzaam en/of worden niet meer onderhouden. Je zult dus zelf aan de slag moeten om een mailformulier te maken dat op een veilige manier wordt verstuurd.
Op deze pagina wordt uitgelegd hoe je zoiets aanpakt.

•   Er worden twee items besproken:

1. Het formulier aan de gebruikerskant.
2. Het verwerken aan de serverkant.

Het formulier aan de gebruikerskant
Het mailformulier wordt gemaakt met een <form>-tag, die tenminste het attribuut action= moet hebben, anders kan het niet verzonden worden. De waarde van action is de naam van een script op de webserver dat moet worden uitgevoerd als het bericht wordt verzonden.

Het tweede attribuut wat niet mag ontbreken is method=. Hiermee geef je op hoe het bericht moet worden verstuurd: Via de URL (get) of via de body van het bericht (post). De default-waarde is get. Dus als je method weglaat wordt get gebruikt. Dat houdt een risico in.

Informatie die via de URL (dus met get) wordt verstuurd is voor iedereen (lees: door elke server) leesbaar. Gevoelige informatie (inclusief wachtwoorden) is dus niet veilig. Daarom moet je altijd post gebruiken. Het bericht wordt dan in de body van het bericht gezet en versleuteld verstuurd.

Het derde attribuut dat hier besproken wordt is onsubmit. Hiermee kun je een JavaScript-function aanroepen, die wordt uitgevoerd vóórdat het formulier daadwerkelijk wordt verstuurd. Deze function moet true of false teruggeven. Als de function true retourneert wordt het formulier verzonden; als de function false teruggeeft wordt het formulier niet verzonden.
Het event submit wordt afgevuurd als er op de submit-knop (zie verder) wordt getikt of geklikt. onsubmit reageert daar op.
Een voorbeeld van een dergelijke function wordt gegeven in het item Geldigheid testen van formulier-velden, waarmee je kunt nagaan of bepaalde velden zijn ingevuld of niet.

De minimale code voor een <form>-tag is dus:
        <form action="...serverside script..." method="post" onsubmit=".....">
Het attribuut onsubmit mag worden weggelaten.

Een goed mailformulier bevat in elk geval twee knoppen:
•   Een Reset-knop. Deze maakt het formulier leeg, zodat de het opnieuw kan invullen.
        <input type="reset">Overnieuw</input>
•   Een Versturen-knop. Als er een onsubmit-attibuut is, wordt de betreffende JavaScript-function gestart. Als deze dan true teruggeeft wordt het formulier naar de server gestuurd.
        <input type="submit">Versturen</input>

HTML heeft een aantal tags die bedoeld zijn om binnen een formulier te worden gebruikt. De tag <form> kan bevatten:

Hieronder staat een opsomming van de verschillende input-types. Op voor een input-type specifieke attributen wordt niet ingegaan, behalve als dat nodig is om een input-type goed te laten werken.
Voor nadere informatie doorzoek je w3schools.com met de tagname of het type="..." attribuut.

<input type="...">		Beschrijving
button		Hiermee maak je een 'gewone knop. Meestal wordt er een JavaScript-function gestart via onclick().
checkbox		Hiermee maak je een checkbox, een vierkantje waar een vinkje in kan staan (of niet). Zie de items Radiobuttons en Checkboxen, Maak je eigen formulier-elementen met CSS III: Checkboxen en Labels gebruiken in een formulier.
color		Hiermee maak jee een kleurenkiezer. In een mailformulier zal dat niet vaak voorkomen, tenzij je een achtergrondkleur voor je nieuwe website moet kiezen. Zie het item Over <input type="color">.
date		Afhankelijk van het platform toont dit een invoerveld met een kalender-icon of een invoerveld met een pijltje naar beneden. Als je er op klikt, verschijnt er een kalender, waarmee een datum (dag, maand en jaar) gekozen kan worden, vergelijk het item Popup-kalender.
datetime-local		Dit is een combinatie van type="date" en type="time".
email		Dit is een tekstveld, speciaal ontwikkeld voor het opgeven van een e-mailadres. Door het keyword multiple mee te geven kunnen in dit veld meerdere e-mail adressen worden opgegeven, gescheiden door komma's.
file		Vanuit de browser kun je een bestand aanwijzen om te uploaden naar de webserver. Door het keyword multiple mee te geven kunnen in dit veld meerdere bestanden worden opgegeven, gescheiden door komma's. Het uploaden van bestanden naar de server vraagt soms speciale maatregelen aan de serverkant, zoals het instellen of vergroten van buffers om de upload op te vangen.
hidden		Dit is hetzelfde als een gewoon tekst-invoer veld, maar het is niet zichtbaar op het scherm. Je kunt hier in zetten wat je maar wilt, zolang het maar tekst is. De inhoud kun je wijzigen met JavaScript. Wees er op bedacht dat de inhoud van een hidden veld gewoon leesbaar is als je in een desktop-browser de code van de pagina oproept. De tem hidden betekent dus alleen "verborgen", niet "geheim".
image		Hiermee maak je een submit-knop van een plaatje. Attributen die je voor een <img> gebruikt zijn ook hier mogelijk. In elk geval is src="..." nodig.
month		Afhankelijk van het platform toont dit een invoerveld met een soort kalender-icon of een invoerveld met een pijltje naar beneden. Als je er op klikt, verschijnt er een kalender, waarmee een maand (met jaar) gekozen kan worden. Niet ondersteund door FireFox.
number		Hiermee maak je een invoerveld dat alleen getallen accepteert. Dat Dat kunnen gehele, gebroken, positieve en negatieve getallen zijn (nul inclusief). De hoogste en laagste toegestane waarden geef je op met de attributen max resp. min. Als je met de muis over een number-veld gaat, verschijnt er in Chromium-browsers rechts een pijltje omhoog/omlaag, waarmee je de inhoud van het veld kunt verhogen of verlagen. De stapgrootte bepaal je met step. De waarde in het veld bepaal je met value. In FireFox is het pijltje omhoog/omlaag permanent zichtbaar.   Op het moment dat dit geschreven wordt gaan alle grote browsers verkeerd om met dit type invoerveld: de decimale punt en komma worden door elkaar gehaald. Onder de Samsung-versie van Android is het niet mogelijk om negatieve getallen in te voeren. Dat beperkt de bruikbaarheid tot gehele getallen die ≥ 0 zijn.
password		Hiermee maak je een invoerveld, speciaal voor het ingeven van data die niet bestemd is voor de ogen van "meelezers" op je scherm, in het bijzonder wachtwoorden. In plaats van de ingetypte tekst verschijnen er sterretjes of dikke stippen in het invoerveld. Wees er op bedacht dat de informatie onbeschermd wordt verstuurd. Een formulier dat <input type="password"> bevat moet daarom altijd worden verzonden met method="post"!
radio		Hiermee maak je een radiobutton, een rondje dat open kan zijn of gevuld. Zie de items Radiobuttons en Checkboxen, Maak je eigen formulier-elementen met CSS II: Radio-buttons en Labels gebruiken in een formulier.
range		Hiermee maak je een eenvoudige schuifregelaar. Zoals de vorige zin al aangeeft is deze beperkt in zijn mogelijkheden. Zie het item Over <input type="range"> voor meer informatie over dit element. Voor alternatieven voor deze schuifregelaar raadpleeg je de items Schuifregelaars voor het instellen van formuliervelden I: horizontaal en Schuifregelaars I: horizontaal. Je vindt daar ook links naar verticale uitvoeringen.
reset		Zie eerder in dit artikel.
search		Hiermee kun je een invoerveld maken met daarbij een submit-knop. Het script aan de serverkant draagt de invoer, al of nabewerkt, over aan de zoekmachine.
submit		Zie eerder in dit artikel.
tel		Invoerveld, speciaal ontwikkeld voor het ingeven van een telefoonnummer.
text		Dit is het meest algemene invoerveld. Alle denkbare tekst kun je er in kwijt. Het is ook het default: Als het attribuut type wordt weggelaten wordt type="text" gebruikt. Dat gebeurt ook als er een type wordt opgegeven dat door de browser niet wordt herkend. Zie ook de items Tekst-invoer en Maak je eigen formulier-elementen met CSS I: Invoer velden.
time		Afhankelijk van het platform toont dit een invoerveld met een klok-icon of een invoerveld met een pijltje naar beneden. Als je er op klikt, verschijnt er een dialog of een lijst waarmee een tijdstip kan worden ingesteld.
url		Dit is een tekstveld, speciaal ontwikkeld voor het opgeven van een URL. Het lijkt niet altijd goed te werken: Een geldige URL wordt niet altijd als zodanig herkend. Wees dus voorzichtig met de toepassing.
week		Afhankelijk van het platform toont dit een invoerveld met een soort kalender-icon of een invoerveld met een pijltje naar beneden. Als je er op klikt verschijnt er een maandkalender met een highlight per week of een lijst waar je een weeknummer en een jaar kunt kiezen. Niet ondersteund door FireFox.

Het is eenvoudig om van een invoerveld een verplicht veld te maken. Daarvoor neem jet keyword required op in de <input>-tag.

Het formulier wordt afgesloten met </form>.

Het verwerken aan de serverkant
De website, waar het mailformulier in staat, stuurt een bericht vanaf de gebruikers-PC naar de server waar je website wordt gehost. In het attribuut action= staat een script genoemd dat op de server moet worden uitgevoerd. In het attribuut method staat genoemd op welke manier het bericht moet worden verstuurd: get of post. Daardoor 'weet' de server op welke manier het bericht wordt aangeboden: Via de URL (get) of via de body van het bericht (post).

Het script aan op de server pakt de informatie op, voegt daar desgewenst opmaak aan toe en stuurt die door naar een SMPT-server die de verdere verzending van het bericht verzorgt.
In de huidige stand van de techniek worden aan de serverkant meestal de talen PHP, Python en Node.js gebruikt. Als je host werkt met MS-Windows webserver software, kun je gewoonlijk ook ASP (Classic of .NET) gebruiken.
Het hangt van je persoonlijke voorkeur af welke programmeertaal je gebruikt. Je bent ook gebonden aan de mogelijkheden die de webhost je biedt. Een goede host biedt op zijn minst PHP aan. Als je website is gemaakt in een CMS, gebruik je het beste de taal waarin dat CMS is geschreven.

Informatie over programmertalen die gemaakt zijn om aan de serverkant te werken valt buiten het bestek van deze site en blijven daarom onbesproken.