Indsæt følgende kode på samme side med en extension .php - CSS og javascript-delene kan eventuelt i separate sider.
<?php
// NÅR DER TRYKKES PÅ "SEND"..
if(isset($_POST['Afsend'])) { // SE name i FORM
// TJEK OM FELT ER UDFYLDT
if(trim($_POST['Navn']) == '') { // SE name i FORM - GÆLDER ALLE POSTS HERUNDER..
$hasError = true;
} else {
$navn_send = trim($_POST['Navn']);
}
// TJEK OM FELT ER UDFYLDT OG -EMAIL VALIDERER
if(trim($_POST['E-mail']) == '') {
$hasError = true;
} else if (!preg_match("/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", trim($_POST['E-mail']))) { // VALIDATION
$hasError = true;
} else {
$email_send = trim($_POST['E-mail']);
}
// SEND TELEFONNUMMER HVIS INDTASTET
$telefon_send = trim($_POST['Telefon']);
// TJEK OM FELT ER UDFYLDT
if(trim($_POST['Emne']) == '') {
$hasError = true;
} else {
$emne_send = trim($_POST['Emne']);
}
// TJEK OM FELT ER UDFYLDT
if(trim($_POST['Besked']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$besked_send = stripslashes(trim($_POST['Besked']));
} else {
$besked_send = trim($_POST['Besked']);
}
}
// HVIS IKKE DER ER FUNDET FEJL SÅ SEND
if(!isset($hasError)) {
$emailTo = 'mail@zpz.dk'; // INDSÆT MODTAGER MAIL
// AFSEND DISSE FELTER TIL MODTAGER - SKAL ! OMKRANSES AF " ANFØRSELSTEGN - IKKE HYPHENS '
$body =
"Afsender: $navn_send \n
E-mail: $email_send \n
Telefon: $telefon_send \n
Emne: $emne_send \n
Besked:\n
$besked_send";
$headers = 'From: MTES.dk <'.$emailTo.'>' . "\r\n"
. 'Reply-To: ' . $email_send;
mail($emailTo, $emne_send, $body, $headers);
$emailSent = true;
}
}
?>
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Kontaktform kode</title>
<link href="css/kontaktform.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#messages').click(function() {
$(this).fadeOut(300);
$('#message_overlay').fadeOut(500);
$('main, footer').show();
});
}); <!-- END OF doc ready -->
</script>
</head>
<body>
<!-- MEDDELELSER HVID BG -->
<div id="message_overlay"></div>
<!-- MEDDELELSER VED FEJL OG AFSENDT MAIL -->
<div id="messages">
<?php if(isset($hasError)) { // VED FEJL I FELTER ?>
<p>Udfyld felterne rigtigt <br/ >
for at sende beskeden!</p>
<?php echo '<style type="text/css">
#message_overlay {
display: block;
}
#messages {
display: block;
}
</style>';
?>
<?php } ?>
<?php if(isset($emailSent) && $emailSent == true) { //NÅR MAIL ER SENDT ?>
<p style="font-weight:bold">Tak for din henvendelse <br/ >
<?php echo $navn_send;?></p>
<p>Vi vil kontakte dig <br/ > snarest muligt</p>
<?php echo '<style type="text/css">
#message_overlay {
display: block;
}
#messages {
display: block;
}
main, footer {
display: none;
}
</style>';
?>
<?php } ?>
</div> <!-- END OF messages-->
<main>
<!-- FORM DER SKAL UDFYLFDES -->
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<h2>Kontaktform demo</h2>
<label for="name"><span class="form_star">*</span> Navn</label>
<input type="text" name="Navn" placeholder="Skriv navn eller firma" />
<label for="name"><span class="form_star">*</span> E-mail</label>
<input type="text" name="E-mail" placeholder="Indsæt e-mail" />
<label for="subject"> Telefon</label>
<input type="text" name="Telefon" placeholder="Eventuelt telefonnummer" />
<label for="name"><span class="form_star">*</span> Emne</label>
<input type="text" name="Emne" placeholder="Din henvendelse drejer sig om" />
<label for="name"><span class="form_star">*</span> Besked</label>
<textarea rows="5" name="Besked" placeholder="Tilføj din besked her" ></textarea>
<div class="button"/>
<input type="submit" value="Send" name="Afsend" class="button_overlay" />
</div>
</form>
</main>
</body>
</html>
html {
width: 100%;
height: 100%;
font-size: 62.5%;
-webkit-text-size-adjust: 100%; /* WEBKIT TEXT - JUSTERING */
}
body {
width: 100%;
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-size: 1.6rem;
color: #c6c6c6;
line-height: 1.2rem;
}
/* TIL MEDDELELSER VED FEJL OG AFSENDELSE */
#message_overlay {
display: none;
position: absolute;
z-index: 11;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #EEE;
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#messages {
display: none;
position: absolute;
z-index: 12;
top: 50%;
left: 50%;
width: 300px;
padding: 12px 20px 26px 20px;
margin-left: -150px;
margin-top: -100px;
background: white;
background-image: url(../images/icons/icon_close.png);
background-repeat: no-repeat;
background-position: 260px 10px;
/* border: 1px solid grey; */
border-radius: 12px;
cursor: pointer;
}
#messages > p {
font-size: 17px;
font-size: 1.7rem;
/* font-weight: bold;*/
color: #000c53;
line-height: 1.3;
margin-right: 16px; /* AFSTAND TIL IMG */
margin-bottom: 6px;
}
/* KONTAKTFORM */
form {
width: 400px;
padding-top: 22px;
margin: 30px;
/* MQ */
}
form > h2 {
color: #555;
}
/* OVERSKRIFTER */
label {
margin-left: 6px;
font-size: 17px;
font-size: 1.7rem;
color: #333;
}
label span.form_star {
color: red;
}
/* FELTER */
input, textarea {
display: block; /* PLACER FELTER VERTIKALT */
width: 100%;
height: 40px;
margin: 6px 0 22px 0;
padding-left: 6px;
border: 3px solid #DDD;
border-radius: 4px;
}
/* FELT TIL BESKEDEN */
textarea {
height: auto;
min-height: 66px;
}
/* PLACEHOLDER */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-size: 15px;
font-size: 1.5rem;
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 15px;
font-size: 1.5rem;
color: #999;
opacity: 1; /* FIREFOX "SLØRER" PLACEHOLDER MED OPACITY */
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 15px;
font-size: 1.5rem;
color: #999;
opacity: 1; /* FIREFOX "SLØRER" PLACEHOLDER MED OPACITY */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: 15px;
font-size: 1.5rem;
color: #999;
}
/* SEND BESKED-KNAP */
.button, .button_overlay {
position: relative;
width: 120px;
height: 48px;
padding: 0; /* RESET FRA STYLING I input + textarea */
margin: 0; /* RESET FRA STYLING I input + textarea */
background: #777;
border-radius: 8px;
cursor: pointer;
transition: 200ms background-color;
}
.button_overlay { /* TIL GRADIENT MED TRANSITION */
position: absolute;
z-index: 1;
top: 0;
left: 0;
padding-bottom: 6px; /* SKOUB TEXT OP */
background: linear-gradient(to bottom, #DDD, transparent);
border-radius: 8px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
1.6rem;
color: white;
}
.button:hover {
background: #333;
transition: 200ms background-color;
}
@media only screen and (max-width : 478px) {
form {
width: 240px;
/* MQ */
}
}