Kontaktform med placeholder og PHP-validation

Om kontaktformen

Kode med kommentarer

Indsæt følgende kode på samme side med en extension .php - CSS og javascript-delene kan eventuelt i separate sider.

kontakt.php

1. del - PHP
<?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;
	}
}
?>
2. del - head
<!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>
3. del - body
<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">&nbsp; 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>

kontaktform.css

CSS
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 */
}
}