Das Formular PHP-Script

Mail-/ Kontaktformular Schritt 2: Das PHP-Script

Das Formular haben wir jetzt ja und wir können uns auf das PHP-Script konzentrieren.
Ich werde hier erst einmal auf das Grundlegende Skript eingehen und die Feinheiten im nächsten Schritt zeigen. So dass Ihr es einfach nachvollziehen könnt.

Als erstes sollte PHP herausfinden ob alle Felder ausgefüllt wurden.
Doch vorher sehen wir uns an was beim Versenden des Formulars passiert:
Mit dem Klick auf den Button Send <input type="submit" name="send" value="Send"> wird die Action des Formulars ausgeführt und die Inhalte der Felder werden übergeben an die Seite: form_2.php
<form method="post" action="form_2.php">
Also an diese Seite, denn wir rufen uns selbst auf.
Und mit diesem Aufruf wird unser PHP-Script zu arbeiten beginnen.

Sehen wir uns das genauer an:

Wir bewegen uns jetzt oberhalb des HTML-Dokumentes:

<?php 
$error = '';
// Erst wenn der Button namens send geklickt wurde
if ( isset( $_POST['send'] ) ) {
	// Die Methode isset() 
	// ermittelt ob $_POST true ist	
	// Um alle Felder zu prüfen erstellen wir ein Array mit den Feldnamen
	$fields = [];
	$fields[0] = 'anrede'; 
	$fields[1] = 'vorname'; 
	$fields[2] = 'name'; 
	$fields[3] = 'email'; 
	$fields[4] = 'kommentar'; 
	
	// foreach-Schleife um die Felder zu prüfen
	foreach ( $fields as $field ) {        
		// Die Methode trim() entfernt Leerzeichen 
		// Links und Rechts von der Eingabe, falls vorhanden 
		$value = trim( $_POST[ $field ] );
		if ( $value === '' ) {
			$error = $field;
			break;
		}
	}	
	if ( $error === '' ) {
		// Weiter zum Mailversand
	}
}

?>
<!DOCTYPE html>
<html>
<head>
...

Im Falle eines Fehlers:

Jetzt müssen wir unser HTML anpassen:
Ausgabe Fehlermeldung:
Im Vorfeld haben wir via CSS das Ausgabefeld auf visibility: hidden; gesetzt.
mit der Klasse: .showError setzen wir den Wert auf visibility:visible;

Und das machen wir wie folgt mitten in der Deklaration der Klasse:

<div id="error" class="
<?php 
	if( $error !== '' ){ echo 'showError'; }
?>
">Sie haben nicht alle Felder ausgefüllt</div>

Das gleiche machen wir jetzt mit dem jeweiligem Label. Z.B.: <span class="label">Vorname: </span>
Wir weisen eine zusätzliche Klasse zu label-error

Und das machen wir wie folgt mitten in der Deklaration der Klasse:

<span class="label
<?php 
	if( $error === 'vorname' ){ echo ' label-error'; }
?>
">

Jetzt müssen wir uns noch um eines kümmern:
Um den Value des jeweiligen Inputs: <input name="vorname" value="">
Sollte hier ein Eintrag vorhanden gewesen sein, dann sollten wir diesen tunlichst wieder reinschreiben.

Und das machen wir wie folgt mitten im Value:

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

Das gleiche Spiel wiederholen wir für alle Labels und Inputs als auch unserer Textarea.
Und unsere Anrede dürfen wir auch nicht vergessen.

Und das machen wir wie folgt:

<option value="frau" 
<?php 
if( isset( $_POST['send']) && $_POST['anrede'] == 'frau' ){ 
	echo 'selected'; 
} 
?>
>Frau</option>

Wenn Ihr Anregungen oder Kommentare zu den Thema habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Sie haben nicht alle Felder ausgefüllt

Code


HTML:

<div id="error" class="<?php 
if( $error !== '' ){
	echo 'showError';
} ?>">Sie haben nicht alle Felder ausgefüllt</div>
<form name="skillflow" method="post" 
action="form_2.php" enctype="multipart/form-data">
	<span class="label">Anrede: </span>
	<select name="anrede" class="mySelect">
		<option value="frau" <?php 
		if( $error !== '' && $_POST['anrede'] == 'frau' ){ 
			echo 'selected'; 
		} 
		?>>Frau</option>
		<option value="herr" <?php 
		if( $error !== '' && $_POST['anrede'] == 'herr' ){ 
			echo 'selected'; 
		} 
		?>>Herr</option>
		<option value="divers" <?php 
		if( $error !== '' && $_POST['anrede']  == 'divers' ){ 
			echo 'selected'; 
		} 
		?>>Divers</option>
	</select>
	<br>
	<span class="label<?php 
	if($error == 'vorname'){ 
		echo ' label-error';
	} 
	?>">Vorname: </span>
	<input type="text" class="" name="vorname" value="<?php 
	if( isset( $_POST['send']) ){ 
		echo $_POST['vorname']; } 
	?>">
	<br>
	<span class="label<?php 
	if($error == 'name'){ 
		echo ' label-error';
	} 
	?>">Name: </span>
	<input type="text" class="" name="name" value="<?php 
	if( isset( $_POST['send']) ){ 
		echo $_POST['name']; 
	} 
	?>">
	<br>
	<span class="label<?php 
	if($error == 'email'){ 
		echo ' label-error';
	} ?>">E-Mail: </span>
	<input type="email" class="" name="email" value="<?php 
	if( isset( $_POST['send']) ){ 
		echo $_POST['email']; 
	} 
	?>">
	<br>
	<div class="nachricht-text<?php 
	if($error == 'kommentar'){ 
		echo ' label-error';
	} 
	?>">Nachricht:</div>
	<textarea name="kommentar" class="comment">
	<?php 
	if( isset( $_POST['send']) ){ 
		echo $_POST['kommentar']; 
	} 
	?></textarea>
	<br>
	<div class="vocal-text">
		Bitte entferne aus dem Feld unten alle Vokale.
	</div>
	<input type="text" name="vocal" class="vocal-input" value="">
	<br>
	<input type="submit" class="mybutton" name="send" value="Send">
	  
	<input type="reset" class="mybutton" value="Delete">
</form>



CSS:

#error{
	width:100%;
	color:red;
	font-size:14px;
	font-weight:900;
	text-align:center;
	border:1px solid white;
	padding:5px 0;
	margin-bottom:15px;
	visibility:hidden;
}

.label{
	display:inline-block;
	width:75px;
	font-size:14px;
	padding:5px 3px;
	margin-right:5px;
	border:1px solid white;
}

select.mySelect{
	width:auto;
	color:black;
	padding: 1px 0;
	background-color: white;
	border:1px solid white;
}
option{
	color:black;
	background-color: white;
	padding:5px 0;
}

input[type="text"], 
input[type="email"]{
	width:200px;
	font-size:14px;
	padding:5px 0;
	color:black;
	background-color: white;
	border:1px solid white;
}

.nachricht-text{
	display:block;
	font-size:14px;
	margin:15px 0px 5px 0px;
}

textarea.comment{
	width: 95%;
    height: 150px;
	color:black;
	background-color: white;
	border:1px solid white;
}

.vocal-text{
	margin:10px 0px 0px 0px;
	
}

input.vocal-input{
	width: 99%;
    font-size: 18px;
    padding: 3px;
}

.mybutton {
    width: auto;
    padding: 2px 2px;
    color: black;
    background-color: white;
    cursor: pointer;
	border:1px solid white;
}


#error.showError{
	visibility:visible;
}

.label-error{
	font-weight:600;
	color:red !important;
}



PHP:

<?php 
$error = '';
// Erst wenn der Button namens send geklickt wurde
if ( isset( $_POST['send'] ) ) {
	// Die Methode isset() 
	// ermittelt ob $_POST true ist	
	// Um alle Felder zu prüfen erstellen wir ein Array mit den Feldnamen
	$fields = [];
	$fields[0] = 'anrede'; 
	$fields[1] = 'vorname'; 
	$fields[2] = 'name'; 
	$fields[3] = 'email'; 
	$fields[4] = 'kommentar'; 
	
	// foreach-Schleife um die Felder zu prüfen
	foreach ( $fields as $field ) {        
		// Die Methode trim() entfernt Leerzeichen 
		// Links und Rechts von der Eingabe, falls vorhanden
		$value = trim( $_POST[ $field ] );
		if ( $value === '' ) {
			$error = $field;
			break;
		}
	}	
	if ( $error === '' ) {
		// Weiter zum Mailversand
	}
}

?>