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;
}