menu   Helpdesk
HelpHomeZoeken FAQHoofdmenu

WEB-formulier: uitleg voorbeeld 3

Voor de meer ervaren gebruikers! Met het tweede formulier als basis, hebben we in het derde voorbeeldformulier allerlei extra opmaakvelden en opties erbij gezet. Daarmee kan je het formulier nog mooier maken.

De tekst in het donkergele gedeelte is tekst van het voorbeeldformulier.
Je kunt de complete tekst in het donkergele gedeelte selecteren en op je computer bewaren als je eigen voorbeeld3.form bestand. Daar kan je dan weer in wijzigen en het gewijzigde bestand vervolgens in jouw eigen website plaatsen.

# Dit is een voorbeeld om de extra 'tags' te laten zien (voor gevorderden)

# Algemeen: 
# 1.  Een regel die begint met een # wordt gezien als commentaar
# 2.  De tags mogen zowel met hoofdletters als met kleine letters geschreven worden
# 3.  Vermijd onnodige spaties in de tags. Zo zal <form name="bla"> wel werken 
#     maar  < form name="bla"> niet!
# 4.  In de voorbeelden kan je zien welke tags compleet met begin-tag en eind-tag op één
#     regel geschreven moeten worden en welke over meerdere regels verspreid moeten staan
#     Voorbeeld: de form-tag moet op meerdere regels en de thank_you tag op één regel
#                 <form name="blaform">
#                   .. de rest van de tags ..
#                   <thank_you>blabla</thank_you>
#                 </form>

# De 'form name' MOET gelijk zijn aan het gedeelte voor de .form bestandsnaam  dus
# in dit geval hoort  <form name= "voorbeeld3"> bij het bestand  voorbeeld3.form
# Deze tag is verplicht en aan het einde van het formulier komt een sluit-tag
# De form-tag moet aan het begin van het formulier staan. Helemaal aan het eind zet je de sluit tag </form>.

<form name="voorbeeld3">

# De titel van het formulier kan je vrij kiezen:

  <title>Voorbeeldformulier 3</title>

# Uitzetten HTML-mail, schakelt tevens file-uploads uit: 

  <disable_html_mail>

# Toevoegingen aan het begin van de HTML-body:

  <header>
    text="<IMG SRC="/pics/logo1.gif" HEIGHT="74" WIDTH="59" BORDER="0" ALT="DSE">"
  </header>

# Standaard achtergrondkleur van formulier aanpassen (default is wit: #FFFFFF )

  <default_text_back>#FFFFCC</default_text_back>

# Standaard tekst-kleur van formulier (default is zwart: #000000 ):

  <default_text_fore>#000000</default_text_fore>

# Standaard kleur voor hyperlinks (default is blauw: #0000FF )

  <link_color>#0000BB</link_color>

#  Standaard kleur voor bezochte hyperlinks (default is rood: #FF00FF )

  <link_visited>#800080</link_visited>

# Standaard kleur voor aangeklikte links (default is blauw: #0000FF )

  <link_active>#FF0000</link_active>

# Symbool voor velden die de bezoeker verplicht moet invullen (default is *):

  <required_item>*</required_item>

# Kleur voor verplichte-velden-symbool (default is rood):

  <required_item_color>red</required_item_color>

# Extra HTML aan de onderkant:

  <footer>
    text="<A HREF="/info/disclaimer.shtml"><IMG SRC="/pics/hr.gif" WIDTH="488" border="0" HEIGHT="9" HSPACE="5" VSPACE="1"></A>"
  </footer>

# De 'mailto'-tag is verplicht. Vul daar het e-mail adres van de ontvanger (de formuliereigenaar) in.
# Dat mag ook een adres buiten DSE zijn.
# De 'displayas'-tag is de bijbehorende naam.
# Het adres waar de resultaten naar gestuurd worden, wordt getoond na versturen.
# Als je via de tag <confirmation_email> gekozen hebt om een kopie te ontvangen, zal je 
# deze gegevens als afzender van de bevestigingsmail terug zien.

  <mailto>
    address="vul-hier-een-geldig-account-in@dse.nl"
    displayas="vul hier de naam van de ontvanger in"
  </mailto>

# Zichtbaar maken van de ontvanger op het invulformulier. 
# Staat zonder die tag standaard uit (handig als je niet direct jouw e-mail adres wilt laten zien)

  <display_mail_to>

# De 'mailfrom'-tag is ook verplicht. Je kan de waarden achter 'address' en
# 'displayas' wijzigen in het emailadres en de naam van de verzender (de invuller). 
# De gegevens van de 'mailfrom'-tag worden gebruikt als afzender van de e-mail die de 
# formuliereigenaar krijgt. Dat zijn dus vast ingestelde gegevens.
# Wil de formuliereigenaar de echte naam en email als afzender te zien krijgen zal hij  
# aanvullend via een apart text-veld aan de bezoeker zijn/haar 'voornaam', 'achternaam' 
# en 'email' moeten vragen. Dat zal je zowiezo altijd al moeten doen als je wilt dat er
# een bevestigingsmail naar de echte invuller mag gaan.
# Voorbeeld:  <text>
#               name="voornaam"
#               label="jouw voornaam"
#             </text> 
#             <text>
#               name="achternaam"
#               label="jouw achternaam"
#             </text> 
#             <text>
#               name="email"
#               label="jouw emailadres"
#             </text> 
# Die waarden worden dan gebruikt als gegevens voor een eventuele bevestigins e-mail en 
# als afzender in de e-mail naar de eigenaar van het formulier. De eerdere waarde(n) in
# 'mailfrom' worden dan genegeerd. Wil je wel een bevestigingsmail versturen naar de echte
# invuller, maar in de mail naar de formuliereigenaar alleen de vaste waarde als afzender tonen,
# voeg je aan de de waarde van 'displayas' de string #STATIC# toe. B.v.
#    displayas="vul hier de naam van de vaste afzender in#STATIC#"

  <mailfrom>
    address="vul-hier-een-echt-account-in@dse.nl"
    displayas="vul hier de naam van de vaste afzender in"
  </mailfrom>

# Bedankje op de tweede pagina (de 'success-pagina'):

  <thank_you>Bedankt voor het invullen. Je krijgt binnenkort een uitnodiging van de jury.</thank_you>

# Extra regel op de tweede pagina met organisatienaam en URL:

  <company_name>Stichting  Digitale  Stad  Eindhoven</company_name>
  <company_url>http://www.dse.nl/</company_url>

# Terugkeer-adres:

  <returnto_url>http://www.dse.nl/helpdesk/homepage/webforms/</returnto_url>

# Symbool waarmee fouten worden aangegeven (default is !):

  <error_item>!</error_item>

# Kleur voor fout-symbool (default is rood):

  <error_color>red</error_color>

 
# Het formulier is opgebouwd met behulp van een tabel. Je kan de defaultwaarden wijzigen:
# cellpadding staat default op 2;
# cellspacing staat default op 0;
# border staat default op 0;
# width staat default op 100%, zonder %-teken zijn het pixels;
# align is default center;
# back_color is default gelijk aan de gekozen achtergrondkleur van het formulier (default_text_back)

  <table>
    cellpadding="1"
    cellspacing="3"
    border="0"
    width="50%"
    align="left"
    back_color="#FFEE99"
  </table>

# Extra tags bij een aankruisvakje:
# label_location bepaalt aan welke kant van het veld het label staat;
# label_location kan "left" en "right" zijn, default is "left";
# align bepaalt aan welke kant van het formulier het veld staat
# en accepteert "right", "left" en "center" (default is "left");
# Zowel label_location als align werken ook bij de andere typen velden;
# Door default_value op "on" te zetten is het aankruisvak al aangevinkt.

  <checkbox>
    name="aanvinkbox"
    label="Ik doe mee aan de wedstrijd"
    default_value="on"
    label_location="left"
    align="left"
  </checkbox>

# Extra tags bij een tekstveld:
# Met validity_mask kun je de input controleren met behulp van een reguliere expressie;
# Door case_sensitive aan te zetten kun je die check onderscheid laten maken tussen
# hoofd- en kleine letters (default gebeurt dat niet);
# type accepteert "text", "password" en "textarea" (default is "text");
# bij textarea kun je het aantal rows en columns instellen;
# text_wrap bepaalt de manier van wrappen: off = niet wrappen, virtual = alleen wrappen
# in het formulier en versturen als lange regel, physical = wrappen en versturen zoals in
# het veld zichtbaar is.
# In dit voorbeeld worden de speciale namen "naam" en "email" gebruikt. Als de bezoeker die
# invult op het formulier zal die naam en e-mail de afzender worden van het e-mail bericht.

  <text>
    name="naam"
    label="Naam:"
    default_value="Vul hier je naam in"
    maxlength="35"
    size="20"
    required="true"
    validity_mask="^[A-Z]+[a-zA-Z]{1,35}"
    case_sensitive="true"
    type="text"
    rows="5"
    columns="80"
    text_wrap="virtual"
  </text>

  <text>
    name="email"
    label="E-mail-adres:"
  </text>

# Extra tags bij keuzerondjes:
# default_index bepaalt welk rondje is voorgeselecteerd, te beginnen bij rondje 0;
# note_align accepteert "top" en "bottom" (default is "bottom");
# note-tags kunnen ook bij text- en file_upload-velden worden toegepast.
 
  <radiobutton>
    name="geslacht"
    label="Jongen|Meisje"
    value="M|V"
    default_index="0"
    note="Man of vrouw kan natuurlijk ook"
    note_align="bottom"
    note_color="blue"
  </radiobutton>

# Extra tags bij uitschuifkeuzelijst:
# als values niet is gespecificeerd dan wordt items gebruikt;
# multiselect maakt een meervoudige keuzelijst ;
# size bepaalt het aantal zichtbare keuzes in een meervoudige keuzelijst ;
# width bepaalt het aantal pixels dat dan zichtbaar is (default is 150).

  <select>
    name="leeftijd"
    label="Leeftijdscategorie:"
    items="<12|12-16|16-21|21-30|>30"
    values="jonger dan 12|12 tot 16|16 tot 21|21 tot 30| ouder dan 30"
    default_index="2"
    multiselect="true"
    size="3"
    width="150"
  </select>

# Bestandsselectie (file upload) kent geen specifieke extra tags.
# I.v.m. een bug is het echter nodig om bij dit veld de achtergrondkleur
# expliciet op te geven met de table_back tag. Deze kan voorafgaand aan
# elk veld (tabel-rij) worden opgegeven.

  <table_back>#FFEE99</table_back>

# Op dezelfde manier is het mogelijk om per veld de tekstkleur aan te
# passen (default is zwart):

  <text_fore>black</text_fore>

  <file_upload>
    name="bestand"
    label="Bestand dat ik instuur:"
  </file_upload>

# Door de kleur "reset" op te geven wordt de standaard-kleur weer gebruikt:

  <table_back>reset</table_back>
  <text_fore>reset</text_fore>

# De bezoeker kan een bevestiging krijgen,
# mode accepteert always, never en prompt (default is never);
# Bij gebruik van prompt kun je een label neerzetten;

  <confirmation_email>
    mode="prompt"
    label="Bevestiging per e-mail ontvangen?"
  </confirmation_email>

</form>

---- Copyright Stichting Digitale Stad Eindhoven ----
DSE homepage - disclaimer - DSE Helpdesk - mail Helpdesk