Een formulier plaatsen op uw website

Op uw website kunt u een formulier plaatsen dat kan worden gebruikt door bezoekers om informatie te sturen of te vragen, om zich aan te sluiten bij een mailing list, om zich te abonneren op een nieuwsbrief, enz. Hiervoor wordt ook gebruikt gemaakt van een cgi-bin script dat draait op onze servers.

Hieronder wordt u stap voor stap uitgelegd hoe een formulier wordt opgebouwd.

De functies van het formulier

In dit script dat beschikbaar is op onze servers kunt u 4 functies aanpassen (2 verplicht, 2 niet verplicht) die u ingeeft in uw HTML-pagina. De code voor deze functies ziet er uit als volgt:

<input type="hidden" name="functie" value="waarde van de functie">

  • input type="...": met input worden items in het formulier geplaatst die te maken hebben met de werking ervan, type="..." precizeert wat er precies geplaatst wordt. Dit kunnen tekstvelden, keuzevakjes, knoppen en zo verder zijn, in dit geval wordt het gebruikt voor het ingeven van een functie.
  • name="..." value="...": in deze code wordt de optie name="..." gebruikt om de eigenlijke functie te plaatsen (hier kunt u dus niet kiezen), in de optie value="..." geeft u zelf de invulling van de functie. Deze functies zijn de volgende:
    1. <input type="hidden" name="to" value="uw_emailadres"> (verplicht)
      Met deze functie kiest u het emailadres naar waar het formulier wordt gestuurd nadat er wordt geklikt op de knop "verzenden"
    2. <input type="hidden" name="next" value="http://users.skynet.be/alias/page html"> (verplicht)
      Er moet vanzelfsprekend ergens vastgelegd worden welke pagina de bezoeker te zien krijgt nadat het formulier is verstuurd.
    3. <input type="hidden" name="subject" value="email_onderwerp">(niet verplicht)
      U kunt ook kiezen welk onderwerp de email heeft die verstuurd wordt door het script, dit kunt u dan bijvoorbeeld gebruiken om de boodschappen in uw inbox te filteren.
    4. <input type="hidden" name="lang" value="taal">  (niet verplicht)
      Er bestaan 2 varianten van het script voor het formulier op onze Servers (zie verder). Kies hier de taal waarin de tussenpagina wordt getoond aan de bezoeker. U heeft de keuze tussen "fr" (Frans), "nl" (Nederlands) en "en" (Engels).

De code om het formulier te laten werken

Zoals bij de 4de functie aangehaald bestaan er 2 varianten van het script. Let op wanneer u hiervoor de code ingeeft, want ze verschillen beide maar met 1 letter. Het verschil wordt gemaakt in de code die gebruikt wordt om het script aan te roepen op de server:

<form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
<input...>
<input...>
...
</form>

Dit is het "eenvoudige" script: de bezoeker vult het formulier in, klikt op "verzenden" en krijgt vervolgens de door u gekozen pagina te zien

<form method="post" action="http://users.skynet.be/cgi-bin/form.cgi">
<input...>
<input...>
...
</form>

Na het klikken op "verzenden" krijgt de bezoeker eerst een tussenpagina te zien en daarna pas de door u gekozen pagina. Aan de tussenpagina kunt u dus niets veranderen, wel de taal veranderen met de optie  <input type="hidden" name="lang" value="taal"> (zie hierboven). Op deze pagina staat een schematisch overzicht van de inhoud van het formulier zoals dit is ingegeven door de bezoeker.

Invoervelden en knoppen

Bij het opstellen van een formulier is het zeer belangrijk dat u zo vaak mogelijk gebruik maakt van de optie name="...". Als een lijst met keuzemogelijkheden bijvoorbeeld niet zijn eigen naam heeft "weet" het script niet dat deze mogelijkheden bij elkaar horen en zal u dus ook niet weten wat er precies werd aangeduid door de bezoeker.

Checkbox <input type="checkbox">

Gebruik deze optie om een keuzelijst te maken. Een bezoeker kan zoveel mogelijkheden aanduiden als hij/zij zelf wil.

  • Opties:
    • name="...": door een naam te geven "weet" het script wanneer meerdere checkboxen bij elkaar horen.
    • checked: gebruik deze optie voor een checkbox die standaard aangeduid is.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="checkbox" name="checkbox">Dit is een checkbox<br>
    <input type="checkbox" checked name="checkbox">Deze is standaard aangeduid
    <form>
Radiobuttons <input type="radio">

Soms wil u een lijst waaruit maar 1 item per keer kan worden aangeduid. Hiervoor worden de zogenaamde 'radio-buttons' gebruikt. Vergeet niet de reeks een naam te geven indien u wil weten welk item is aangeduid.

  • Opties:
    • name="...": geef een naam aan bij elkaar horende keuzes.
    • checked: ook in een lijst met radio-buttons kunt u een item standaard aanduiden.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="radio" name="reeks1"> er kan maar 1 radio-button uit dezelfde reeks aangeduid zijn<br>
    <input type="radio" name="reeks1"> reeks 1<br>
    <input type="radio" name="reeks1"> reeks 1
    <br>
    <br>
    <input type="radio" name="reeks2"> reeks 2<br>
    <input type="radio" name="reeks2" checked> deze is standaard aangeduid<br>
    <input type="radio" name="reeks2"> reeks 2<br>
    </form>
Tekstveld<input type="text">

Als u wil dat de bezoeker ook commentaar kan meesturen kunt u hiervoor dit tekstveld inschakelen. Het is echter niet mogelijk op deze manier een echte tekstbox te maken (dus met meerdere lijnen): het veld bevindt zich maximum op 1 regel. Daarom wordt in de praktijk ook meer gebruik gemaakt van de tag <textarea>...</textarea>

  • Opties:
    • name="...": gebruik dit attribuut om te verduidelijken in welk tekstveld welke tekst werd gezet.
    • maxlength="...": geef het maximum aantal karakters op dat kan worden ingevoerd.
    • size="...": de breedte van het zichtbare tekstveld in aantal karakters.
    • value="...": u kunt standaard een bepaalde (verwijderbare) tekst in het veld zetten.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="text" name="text" > dit is een eenvoudig tekstveld<br><br>
    <input type="text" name="text15" maxlength="15"> in dit veld kunt u maximum 15 karakters kwijt<br><br>
    <input type="text" name="textstandaard" size=50 value="standaardwaarde"> een veld dat 50 karakters breed is en met een standaard invoer
    </form>
Paswoordveld <input type="password">

Een paswoordveld is eigenlijk gewoon een tekstveld, alleen wordt alle inhoud ervan weergegeven als sterretjes. Met het cgi-script dat op onze servers draait is het niet mogelijk hier een functie aan te koppelen maar mogelijk kunt u het nog voor andere zaken gebruiken.

  • Opties:
    • name="...": gebruik dit attribuut om te verduidelijken in welk paswoordveld welke tekst werd gezet.
    • maxlength="...": geef het maximum aantal karakters op dat kan worden ingevoerd.
    • size="..."de breedte van het zichtbare tekstveld in aantal karakters.
    • value="..."u kunt standaard een bepaalde (verwijderbare) tekst in het veld zetten.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="password"> een basis wachtwoordveld<br><br>
    <input type="password" maxlength="8"> in dit wachtwoordveld kunt u maximum 8 karakters ingeven
    </form>
Resetknop  <input type="reset">

Wanneer een bezoeker een formulier foutief invult komt de reset-knop van pas om het formulier terug te laden met alle beginwaarden. Alle gewijzigde inhoud wordt dus gewist na het klikken op deze knop.

  • Opties:
    • name="...": wordt zelden gebruikt bij deze functie aangezien er meestal maar 1 resetknop aanwezig is op een formulier waarvan geen waarden moeten worden doorgestuurd.
    • value="...": standaard staat er "Reset" op de knop, maar u kunt deze tekst ook wijzigen met deze functie.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="text" maxlength="15"> vul hier iets in en klik op &quot;Reset&quot;<br><br>
    <input type="reset"><br><br>
    <input type="reset" value="Opnieuw"> U kunt de knop ook een andere tekst geven <br>
    </form>
Verzendknop  <input type="submit">

De knop der knoppen binnen een formulier. Na het klikken hierop wordt het formulier automatisch doorgestuurd naar het emailadres dat u hebt opgegeven in <input name="to" type="hidden" value="adres" />

  • Opties:
    • name="...": wordt zelden gebruikt bij deze functie aangezien er meestal maar 1 verzendknop aanwezig is op een formulier waarvan geen waarden moeten worden doorgestuurd.
    • value="...": standaard staat er "Submit Query" op de knop, maar u kunt deze tekst ook wijzigen met deze functie.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="submit"><br><br>
    <input type="submit" value="Versturen"> Ook van deze knop kunt u de tekst veranderen
    </form>
Een afbeelding als Verzendknop  <input type="image" src="...">

Naast de standaard knop om te versturen (zie hierboven) kunt u ook een afbeelding gebruiken als verzendknop. Let er in dit geval wel op dat de bedoeling van deze afbeelding duidelijk is. Net als hierboven wordt het formulier na het klikken op deze afbeelding automatisch doorgestuurd naar het emailadres dat u hebt opgegeven in <input name="to" type="hidden" value="adres" />

  • Opties:
    • src="...": wanneer u een afbeelding gebruikt moet u vanzelfsprekend een pad opgeven naar het bestand.
    • name="...": wordt zelden gebruikt bij deze functie aangezien er meestal maar 1 verzendknop aanwezig is op een formulier waarvan geen waarden moeten worden doorgestuurd.
    • align="...": U kunt de foto een specifieke plaats geven m.b.v. deze optie. U kunt kiezen tussen:
      • align="left": links uitlijnen (tekst komt rechts van de afbeelding)
      • align="right": rechts uitlijnen (tekst komt links van de afbeelding)
      • align="top": de afbeelding wordt bovenaan gecentreerd
      • align="bottom": de afbeelding wordt onderaan gecentreerd
      • align="absmiddle": de afbeelding wordt gecentreerd t.o.v. het midden van de tekst die op dezelfde regel staat.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="image" src="../../images/testfoto.jpg">U kunt een foto weergeven i.p.v. een knop om het formulier door te sturen<br><br>
    <input type="image" src="../../images/testfoto.jpg" align="right">de foto kan ook worden uitgelijnd
    </form>

Heeft deze info u geholpen?


Meer

Forum

Geen antwoord gevonden? Vraag het onze community waar klanten en experts elkaar helpen.

Forum