Contact Formulier Versturen

Formulier via emailprogramma versturen.

Wanneer je niet kan beschikken over php en mail() of sendmail() om een formulier te verzenden (zoals bij internet providers als daar zijn skynet, scarlet, telenet, ...), dan kan je gebruik maken van dit formulier.
Het formulier maakt gebruik om de ingevulde gegevens te verzenden via je standaard ingesteld emailprogramma (Outlook Express, Outlook, Windows Live Mail, ...)

Demo

Het formulier (formulier.html)

De gebruikte code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>ContactFormulier</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">


<script type="text/javascript" language="Javascript">
<!--
function SendEmail()
{
/* Definieren van je email adres "[email protected]" */

/* Plaats hier je gecodeerde gebruikersnaam. Gebruik hiervoor de online email encoder */
/* http://webhulp.cf/SpamfreeEmail/encoder.php */
var toonnaam="gebruikersnaam"; /* Dit is "gebruikersnaam" */

/* Plaats hier het gecodeerde "at" symbool */
var toontag="@";

/* Plaats hier het gecodeerde provider adres. Gebruik hiervoor de online email encoder */
/* http://http://webhulp.cf/SpamfreeEmail/encoder.php */
var toonhost="provider.com"; /* bv. skynet.be of telenet.be */

/* Plaats hier het onderwerp van de email */
	var subject = 'Contactformulier';

/* Terug samenvoegen van het email adres. Hieronder niets meer wijzigen */
	var to = toonnaam+toontag+toonhost;

/* Deze code zet de gegenereerde \n in textarea om in %0D%0A. Hieronder niets meer wijzigen */
	var mededeling = document.formulier.mededeling.value; 
	mededeling = mededeling.replace(/\n\r?/g, '%0D%0A');
	
/* Opmaak van de e-mail. */
	var mailer = 'mai'+'lto:'+to+'?subject='+subject+'&body='+
'Naam:%20%09%09%09%09'+document.formulier.aanspreektitel.value+
'%20'+document.formulier.naam.value+'%0D%0A%0A'+
'Email:%20%09%09%09%09'+document.formulier.email.value+'%0D%0A%0A'+
'Mededeling:%0D%0A'+(mededeling)+'%0D%0A%0A';

/* Openen van het standaard e-mail client programma. Hieronder niets meer wijzigen */
if (window.opera) {
	window.open(mailer, "_self");
} else {
	win = window.open(mailer,'emailWindow');
	if (win && win.open &&!win.closed) win.close();
}
} // -->
</script>


<script type="text/javascript" language="Javascript">
<!--
function Popup(){
  var win = window.open("bedankt.html", "form_popup" , 
"toolbar=no,scrollbars=yes,width=530px,height=370px,resizable=yes");
  win.focus();
  return true;
}
// -->
</script>

</head>

<body style="background-color: #455900; font-family: verdana; font-size: 12px; font-weight: bold;
color: #FED772;">

	<form name="formulier" action="javascript:document.write('ma'+'il'+'to:'+toonnaam+toontag+toonhost+')" onsubmit="return Popup();">

		Naam:<br />
			<select name="aanspreektitel" size="1">
				<option value="Dhr.">Dhr.</option>
				<option value="Mevr.">Mevr.</option>
				<option value="Fam.">Familie</option>
			</select>
			<input name="naam" size="27">
			<br /><br />

		Email:<br />
			<input name="email" size="39">
			<br /><br />

		Ik wil graag inlichtingen over ...<br />
			<textarea name="mededeling" id="mededeling" cols="31" rows="6" wrap="hard"></textarea>
			<br /><br />

			<input type="submit" onClick="SendEmail()" value="Verzenden">
			<input type="reset" value="Alles wissen">
			<br /><br/>

		<div style="font-size:10px;width: 210px; text-align:center; height:60px">
			Dit contactfomulier maakt gebruik<br />
			van je standaard ingesteld emailprogramma om te verzenden.
		</div>
		
	</form>
	
</body>

</html>

De gele tekst is commentaar bij het javascript en mag eventueel weggelaten worden.
De rode tekst moet je zelf nog aanpassen.
De groene tekst kan je eventueel aanpassen.
De paarse tekst moet je zelf nog aanpassen.

In bovenstaande javascript vind je hex codes zoals
%20 staat voor een "Space"
%09 staat voor een "Horizontal tab, move to next tab stop"
%0D staat voor een "Line feed"
%0A staat voor een "Carriage Return"

Wanneer je aan het formulier andere input velden wil toevoegen dan moet elk af te drukken "input name" in het formulier ook in het javascript worden toegevoegd met de juiste benaming en codes.

Voorbeeld:
Wil je ook in je formulier het "adres" toevoegen dan wordt dit in het formulier

Adres:<br />
<input name="adres" size="39">

In het bovenstaand javascript moet dan volgende code toegevoegd worden

'Naam:%20%09%09%09%09' + document.formulier.aanspreektitel.value + 
'%20' + document.formulier.naam.value + 
'%0D%0A%0A' + 
'Adres:%20%09%09%09%09' + document.formulier.adres.value + 
'%0D%0A%0A' +
'Email:%20%09%09%09%09' + document.formulier.email.value + 
'%0D%0A%0A' + 
'Mededeling:%0D%0A' + document.formulier.mededeling.value +
'%0D%0A%0A';

Dit is enkel een voorbeeld van een formulier; je kan de tekst, inputvelden, layout, ... wijzigen naar eigen behoeften!
Let er wel op dat je na toevoeging van een extra inputveld in het formulier, deze ook, zoals hierboven beschreven, in het javascript toevoegt!

Bedankt (bedankt.html)

De gebruikte code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>ContactFormulier</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

</head>

<body style="background-color: #455900; font-family: verdana; font-size: 12px; font-weight: bold;
color: #FED772;">

	<div style="text-align:center; line-height: 20px; font-weight: bold; font-family: verdana;
	color: #FFFFFF; width: 513px; height:140px; background-color: red">
	<span style="line-height: 35px; font-size: 20px; letter-spacing: 4px">
	<img src="./images/right-arrow.gif">  Let op  
	<img src="./images/left-arrow.gif"></span>
	<br /><br />
	Heb je in het emailprogramma
	<br />op de "verzenden" knop gedrukt?<br/>
	Dan pas is het ingevulde formulier verzonden.
	</div>
	<br /><br /><br />
	<div style="margin-left: 0px; width: 380px; font-family: Verdana; height:144px">
	Beste,<br /><br />
	Hartelijk bedankt voor het sturen van een emailbericht.<br />
	We beantwoorden je email zo snel mogelijk.<br />
	<br />
	Vriendelijke groeten.
	</div>
	<div style="text-align:center;margin-top:-15px;">
		<form method="post">
		<input type="button" value="Sluit venster" onclick="window.close()">
		</form>
	</div>


</body>

</html>

Dit is enkel een voorbeeld van een bedank pagina; je kan de tekst, layout, ... wijzigen naar eigen behoeften!

Wens je ook de aandacht-trekkende pijltje, zoals gebruikt in bedankt.html, dan kan je deze hieronder downloaden.
Neem "bewaren als"

OVERWEEG EEN DONATIE

Ben je tevreden over de gegeven informatie dan kan je als blijk van waardering voor de aangeboden hulp steeds een donatie overwegen. Dit om de aangeboden hulp ook in de toekomst te kunnen blijven garanderen.
Alvast bedankt.
Webmaster