Vorige
Volgende

Vereisten : beide versies werken enkel met een server, dus op je webruimte of op je computer als je een webserver hebt draaien


versie voor gebruik met bootstrap 3 en 4

Contacteer ons








versie voor gebruik met standaard html5

Contacteer ons













Beide bovenstaande formulieren werken hier vanaf deze pagina, je kan het dus testen, de bovenste werkt met de bootstrap stylesheet, de tweede werkt ook onder standaard html5. Voor die laatste moet wel wat meer extra style toegevoegd worden dan voor de bootstrap versie.

Het mailformulier hierboven is een beetje aangepast zodat de mail ook verzonden wordt naar de afzender. Dus uw email adres correct invullen.
Je krijgt dan een bevestigingsmail als afzender dat is in de echte versie ook zo,maar in het voorbeeld ook de mail die naar de bestemmeling zou gestuurd worden. Straks de uitleg hoe je dit aanpast.
Download de zip voor jouw versie en pak deze uit.
Het mailformulier voor standaard html5 of mailformulier voor bootstrap

In het style gedeelte in de head van deze pagina zijn wat style's toegevoegd om het formulier er te laten uitzien zoals hier.
Ga je dit formulier gebruiken, plaats dan de style's in je stylesheet en haal ze weg uit de header.
Voor bootstrap zijn het de style's voor de class mail:hover, mailverzenden en mailverzenden:hover die dienen om de kader rond de invoervelden en de achtergrond van de verzendknop van kleur te veranderen als je er over komt met je cursor.

Voor standaard html5 moet je alle in de header geplaatste style's gebruiken.


Als je geen kennis hebt van php scripts, zou ik van de code voor dit formulier afblijven, en zeker van de php code zelf.
Uitgezonderd de uitleg die ik nu ga geven.
Denk eraan dat php crascht bij de minste fout, hoe klein ook.


Het php script.

<?php
if(isset($_POST['verzenden'])){
$to = $_POST['uw.mail@provider.be']; // Hier komt uw email adres
$from = $_POST['email']; // Het adres van de afzender
$first_name = $_POST['voornaam'];
$last_name = $_POST['familienaam'];
$subject = $_POST['onderwerp'];
$subject2 = "Copy van uw bericht aan uw organisatie";
$bericht = $_POST['bericht'];
$telefoon = $_POST['telefoonnummer'];
$message = $first_name . " " . $last_name . "\n\n" . "Email adres : " . $from . "\n\n" . "telefoonnummer : " . $telefoon . "\n\n" . "schreef het volgende :" . "\n\n" . $bericht;
$message2 = $first_name . "\n\n" . "Hierbij een copy van je bericht aan uw organisatie " . "\n\n" . $bericht;

$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers); // zend het bericht naar de bestemmeling u dus
mail($from,$subject2,$message2,$headers2); // zend een copy van het bericht naar de afzender
echo "Mail verzonden. " . "<br><br>" ." Bedankt " . $first_name . "<br> wij nemen zo snel mogelijk contact op.
<br><br>uw organisatie <br><br> <a href='javascript:javascript:history.go(-1)'>Terug naar website</a>";



Open de file verzenden.php in een zuivere tekst editor, zeker geen MS Word, OpenOffice Text of dergelijke.
Doe het met een echte code editor. Enkele voorbeelden, Notepad, Bluefish,

Op lijn 3 staat uw.mail@provider.be vervang dit door uw mailadres.Bv: janjansens@gmail.com Let wel op dat de teksthaakjes voor en na je mailadres er blijven staan.
Na deze aanpassing komt enkel de copy naar jouw mailadres de mail zelf gaat naar de afzender. Vervolgens zie je op lijn 8, 13 en op de laatste uw organisatie verander dit in de naam van jouw organisatie, club of van je zelf. Bv: Computerclub Lint

Bewaar de file terug.

Als je dit nu uitprobeert op een server (nogmaals dit werkt niet op je computer als je geen webserver hebt draaien) dan moet je in elk geval nog de 2 mails krijgen.
Heb je 2 mail adressen gebruik dan het mailadres dat je niet in het script hebt gezet als verzender. Dan moet de copy op het adres in het script vermeld terecht komen en de mail zelf in dat 2de mail adres.

De gebruikte style: Bootstrap heeft enkel het groene gedeelte nodig, voor standaard html5 of lager moet je al de style regels plaatsen, ook de groene

.mail:hover {
border:solid 1px red;
}

.mailverzenden{
border:solid 1px light-red;
background-color: red;
}

.mailverzenden:hover {
border:solid 1px red;
background-color: white;
}

.tabel-breedte{
width: 100%;
margin: 0 auto;
}
.formulier{
width: 100%;
}

.kolom{
padding: 0 20px;
vertical-align: top;
}

.kolom .cel{
width: 100%;
height: 32px;
border:solid 1px grey;
border-radius: 4px;
padding: 0 10px;
}

.berichtcel{
width: 100%;
border:solid 1px grey;
line-height: 24px;
border-radius: 4px;
padding: 0 10px;
}

.cel:hover{
border-color: red;
}
Vorige
Volgende