Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum.
Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden.
Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
Simpel Contactformulier met validation
Een eenvoudige contact pagina met php en/of html5 validation.
Werking:
Als eerste wordt er gekeken of het input veld (email) leeg is. "dit veld wordt niet weergegeven".
Waarom moet dit veld leeg zijn?
Spambots zullen altijd een type text:input of Text-email met de naam email invullen.
Wordt dit veld ingevuld (wat zal gebeuren door een spambot" dan krijgt men de melding:
Bewijs dat je een persoon bent en geen spambot.
Vervolgens kan men kiezen tussen Dhr. Mevr. en vermeld dan de naam, waarbij de naam verplicht is.
Dan zal het e-mail adres moeten worden vermeld, dit wordt ook gecontroleerd of het een geldig e-mail adres is, dit is tevens verplicht.
De website is optioneel, dit is geen verplicht veld.
En als laatste het bericht, dit is ook een verplicht veld.
Als je $validation op true zet dan wordt er in html5 aangegeven wat voor velden verplicht zijn.
Zet je $validation op false dan zal het php script een melding geven voor de lege velden.
De vermelding voor lege velden:
Vermeld uw naam, een geldig email adres en uw vraag of opmerking a.u.b.
Zodra er een onbekende error zou ontstaan dan wordt de verwijzing: index.php?status=error en krijgt men een error melding:
Onze excusses, maar er is een fout ontstaan.
Probeer het eventueel later opnieuw.
Is alles juist ingevuld en het script heeft het email verstuurt dan wordt de verwijzing index.php?status=success en men krijgt de melding:
Het bericht werd succesvol verzonden.
Indien nodig wordt er contact met u opgenomen.
Het php gedeelte: (regel 1 t/m 51)
// HTML5 formulier validation: true = ja / false = nee
$validation = true;
// Vermeld hier je e-mail adres!
$ontvanger = 'jouw@emailadres.nl';
// Weergave ondewerp van ontvangen email
$onderwerp = 'Contactformulier';
// Vermelding indien successvol verzonden:
$success = 'Het bericht werd succesvol verzonden.<br>Indien nodig wordt er contact met u opgenomen.';
// Vermelding voor lege velden:
$valid = 'Vermeld uw naam, een geldig email adres en uw vraag of opmerking a.u.b.';
// Formulier error vermelding:
$error = 'Onze excusses, maar er is een fout ontstaan.<br>Probeer het eventueel later opnieuw.';
// Vermelding voor spambot:
$spambot = 'Bewijs dat je een persoon bent en geen spambot.';
// PHP Script - Don't edit below!
$results = array();
if (isset($_GET['status'])) {
if ($_GET['status'] == "success") $results['message'] = $success;
if ($_GET['status'] == "error") $results['message'] = $error;
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (empty($_POST['email'])) {
if(empty($_POST['naam']) || empty($_POST['e-mail']) || empty($_POST['bericht']) || !filter_var($_POST['e-mail'], FILTER_VALIDATE_EMAIL)) {
$results['message'] = $valid;
} else {
$body = 'Naam: '.$_POST['aanhef'].'. '.$_POST['naam']."\r\n";
$body .= 'Website: '.$_POST['url']."\r\n";
$body .= 'Bericht: '.$_POST['bericht'];
$headers = 'MIME-Version: 1.0';
$headers .= 'Content-type: text/html; charset=UTF-8'."\r\n";
$headers .= 'From: '.$_POST['e-mail'];
$sendmail = mail($ontvanger, $onderwerp, $body, $headers);
if ($sendmail) {
header("Location: index.php?status=success");
} else {
header("Location: index.php?status=error");
}
}
} else {
$results['message'] = $spambot;
}
}Het HTML gedeelte: (regel 52 t/m 96)
<!DOCTYPE html>
<html lang="nl" dir="ltr">
<head>
<meta charset="utf-8">
<title>Formulier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<form class="form" method="post" <?php if ($validation = false) { echo "novalidate"; } ?> action="">
<input type="email" name="email" id="email" value="">
<ul>
<?php if (isset($results['message'])) { ?>
<li class="<?php if ($_GET['status'] == "success") { echo 'success'; } else { echo 'error'; } ?>">
<?php echo $results['message']; ?>
</li>
<?php } ?>
<li>
<label for="naam">Aanhef:</label>
<input type="radio" name="aanhef" value="Dhr" id="dhr">
<label for="dhr">Dhr.</label>
<input type="radio" name="aanhef" value="Mevr" id="mevr">
<label for="mevr">Mevr.</label>
<input type="text" name="naam" id="naam" required placeholder="Naam contactpersoon" value="">
</li>
<li>
<label for="e-mail">E-mail</label>
<input type="email" name="e-mail" id="e-mail" required placeholder="E-mail adres">
</li>
<li>
<label for="url">Website:</label>
<input type="text" name="url" id="url" placeholder="www.uw-domein.nl">
</li>
<li>
<label for="bericht">Bericht:</label>
<textarea name="bericht" required id="bericht" placeholder="Vermeld hier uw vraag of opmerking"></textarea>
</li>
<li>
<button type="submit">Versturen</button>
<button type="reset">Reset</button>
</li>
</ul>
</form>
</body>
</html>Het CSS gedeelte:
Je kunt dit gedeelte in de pagina plaatsen op regel 59 t/m 182, of geef een verwijzing naar de css extern.
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.4;
}
ul, li {
list-style: none;
margin: 0;
padding: 5px 0;
}
.form {
width: 100%;
max-width: 500px;
margin: 20px auto;
}
li.error,
li.success,
input[type=text],
input[type=email],
button,
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-radius: 4px;
margin: 4px 0;
padding: 6px 12px;
width: 100%;
}
input[type=text],
input[type=email],
button,
textarea {
font-family: inherit;
font-size: inherit;
line-height: normal;
outline: 0;
}
input[type=email]#email {
display: none;
}
button {
cursor: pointer;
width: auto;
}
textarea {
height: 150px;
line-height: 150%;
overflow-x: auto;
overflow-y: auto;
}
/* kleuren */
body {
background-color: #ffffff;
color: #333333;
}
label {
color: #555555;
}
li.error {
border-color: #f00000;
color: #f00000;
}
li.success {
border-color: #468847;
color: #468847;
}
input[type=text],
input[type=email],
textarea {
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
background-color: #ffffff;
border-color: #cccccc;
}
input:hover,
input:focus,
textarea:hover,
textarea:focus {
background-color: #ffffff;
border-color: #66afe9;
color: #222222;
}
:focus:invalid {
border-color: #f00000;
}
:required:focus:valid {
border-color: #468847;
}
button {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
background-color: #f9f9f9;
border-color: #dcdcdc;
color: #444444;
text-shadow: 0px 1px 0px #ffffff;
}
button:hover,
button:focus {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
background-color: #e9e9e9;
}Dit Topic is gesloten.