CSS kontaktform – Del 2

I sidste uge skrev jeg om, hvordan du kan lave en simpel kontaktform med HTML og CSS. Hvis du ikke har læst den endnu, er det en god idé at gøre det. I denne uge vil jeg skrive om, hvordan du kan få formen til faktisk at sende emails.

Da filen der indeholder kontaktformen er en HTML fil, skal den først laves til en PHP fil. Omdøb filen fra index.html til index.php

Indsæt følgende kode under <h3>Kontakt mig</h3>

<?php
 
// Hvis der er trykket på send knappen
if(isset($_POST['submit'])) {
 
}
 
?>

Næsten alt vores PHP kode vil være inde mellem { og }, og vil først blive kørt når der bliver trykket på Send knappen.

Først skal vi skaffe informationer fra kontaktformen: Navn, Email og Besked

$navn = $_POST['navn'];
$email = $_POST['email'];
$besked = $_POST['besked'];

Husk at koden skal være mellem { og }

Vi rykker videre med at skrive nogle informationer, der skal bruges for at kunne sende mailen. Skriv din email og det emne mailen skal have.

$adresse = ""; // Din email som mailen vil blive sendt til
$emne = "Emne her"; // Emnet som emailen skal have
 
$header = 'From: '. $email . "\r\n";

Nu skal vi have sendt den besked

if(!empty($_POST['navn']) && !empty($_POST['email']) && !empty($_POST['besked']) && filter_var($email,FILTER_VALIDATE_EMAIL) ) {
 
$sendt = mail($adresse, $emne, $besked, $header); // Send emailen
 
  if($sendt){
	echo '<p class="success">Din besked blev sendt.</p>'; // Succes besked
   } 
 
} else {
	echo '<p class="error">Der var en fejl med at sende beskeden. Tjek venligst alle felter.</p>'; // Fejl besked
}

Først tjekker vi om alle felter er udfyldt, og om emailen er gyldig. Hvis du vil læse mere om FILTER_VALIDATE_EMAIL, kan du læse Getting Clean With PHP på Net.tutsplus.com

Mail sender mailen, og hvis den er blevet sendt får brugeren en succes besked. Hvis en eller flere af felterne er tomme, får brugeren en fejlbesked.

Nu rykker vi videre til formen, hvor der skal gives fejlbeskeder. Erstat den gamle form med den nye

<p>
    <label for="navn">Navn</label> 
    <input type="text" name="navn" id="navn" value="<?php if(isset($_POST['submit'])) { echo $navn; } ?>" />
    <?php 
	// Hvis navn er tomt
	if(isset($_POST['submit']) && $navn == "") {
		echo '<span class="error" id="navn">Udfyld venligst navn</span>';
	}
	?>
</p>
 
<p>
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="<?php if(isset($_POST['submit'])) { echo $email; } ?>" />
    <?php 
	if(isset($_POST['submit']) && $email == "" ) {
		echo '<span class="error" id="email">Udfyld venligst email</span>'; 
	}
	// Valider email
	if(isset($_POST['submit']) && !filter_var($email,FILTER_VALIDATE_EMAIL) && $email != "") {
		echo '<span class="error" id="email">Udfyld venligst en gyldig email</span>'; 
	} 
	?>
</p>
<p>
	<textarea name="besked" id="besked" rows="10" cols="30"><?php if(isset($_POST['submit'])) { echo $besked; } ?></textarea>
    <?php 
	if(isset($_POST['submit']) && $besked == "") {
		echo '<span class="error" id="besked">Skriv venligst en besked</span>'; 
	}
	?>
</p>
<p>
	<input type="submit" name="submit" id="submit" value="Send" />
</p>

Her er noget af koden forklaret bedre

<?php 
// Hvis navn er tomt
if(isset($_POST['submit']) && $navn == "") {
	echo '<span class="error" id="navn">Udfyld venligst navn</span>';
}
?>

Hvis der er blevet trykket på Send knappen og navn feltet er tomt, vil der komme en fejlbesked

<input type="text" name="navn" id="navn" value="<?php if(isset($_POST['submit'])) { echo $navn; } ?>" />

Hvis der er blevet trykket på Send knappen vil navnet blive skrevet i input feltet, så brugeren er fri for at skrive det igen.

Det samme gælder for de andre. Dog er der også lidt email validering ved email feltet.

Download det samlet script, hvor der også er lidt ekstra CSS style og noget jQuery for at kunne lukke fejlbeskederne.

Download Kontaktform - PHP
268 downloads

Se demo

Skrevet 20. september 2009 af Jesper i Web

Score: 0

sep 20 2009

Disse indlæg kunne måske også interessere dig?

1 kommentar til “CSS kontaktform – Del 2” Tilføj en kommentar til CSS kontaktform – Del 2

Trackbacks

Skriv en kommentar