Das Formular - Prüfung auf Mensch

Mail-/ Kontaktformular Schritt 3: Prüfung auf Mensch

Bevor wir mit der Prüfung auf Mensch beginnen, benötigen wir noch eine Sache:
Wir müssen mit einer $_SESSION arbeiten oder wir müssen unser Formular um ein Feld erweitern
<input type="hidden" name="count" value="">
Ich persönlich würde lieber mit einer $_SESSION arbeiten.

Aber sehen wir uns die $_SESSION etwas genauer an:

Als Erstes müssen wir die Session starten. Dies erledigen wir mit dem Befehl:
session_start();

Wichtig!
session_start(); MUSS zwingend als erster Eintrag in unserem PHP-Script erfolgen: 

<?php
session_start();

$error = '';
// Erst wenn der Button namens send geklickt wurde
if ( isset( $_POST['send'] ) ) {
	...
}
?>

Als nächstes müssen wir unsere $_SESSION deklarieren:
$_SESSION['count'] = 0;
Aber ganz so einfach können wir es uns nicht machen. Denn so würde unsere $_SESSION mit jedem Aufruf der Seite auf 0 gesetzt.

Darum binden wir unsere $_SESSION ein wie folgt: 
<?php
session_start();

// SESSION nur auf 0 setzen, wenn noch nicht vorhanden.
if ( !isset( $_SESSION[ 'count' ]) ) {
    $_SESSION[ 'count' ] = 0;
}
...
?>

Als Prüfung würde ich vorgehen wie unter: Du Mensch?.
Nur eben nicht als JavaScript sondern als PHP-Script.

Doch sehen wir uns das Skript genauer an: 

<?php
session_start();

// SESSION nur auf 0 setzen, wenn noch nicht vorhanden.
if ( !isset( $_SESSION[ 'count' ]) ) {
    $_SESSION[ 'count' ] = 0;
}

// Erstellen eines Arrays mit den Fragen
$frage    = [];
$frage[0] = 'Eine Eule ruht';
$frage[1] = 'Aurelia organisiert';
$frage[2] = 'In einer Oase';
$frage[3] = 'Leo und Julia';

// Erstellen eines Arrays mit den Antworten
$antwort    = [];
$antwort[0] = 'n l rht';
$antwort[1] = 'rl rgnsrt';
$antwort[2] = 'n nr s';
$antwort[3] = 'L nd Jl';

// Erste Frage zuweisen an die Variable $fragetext
$fragetext = $frage[ $_SESSION[ 'count' ] ];

// Fehlerausgabe
$fehlerausgabe = 'Sie haben nicht alle Felder ausgefüllt';

$error = '';
// Erst wenn der Button namens send geklickt wurde
if ( isset( $_POST['send'] ) ) {
	...
}
?>

An dieser Stelle müssen wir die Variable $fragetext dem Value des Inputs "vocal" übergeben:
Und das machen wir auf alt bewährte Weise:
<input type="text" name="vocal" value=" <?php echo $fragetext; ?> ">

Jetzt prüfen wir die Eingabe: 
<?php

...

if ( isset( $_POST['send'] ) ) {
	
	// Prüfung der Felder
	...
	
	if ( $error === '' ) {
		// Weiter zum Mailversand
		
		// START::: Prüfung - Bist Du Mensch
		
		// Prüfung auf Übereinstimmung der jeweiligen Antwort
		if( trim( $_POST[ 'vocal' ] ) == $antwort[ $_SESSION['count'] ] ) {
			
			// Weiter zum Mailversand
			
		} else {
			// $SESSION erhöhen
			$_SESSION['count']++;
			
			// Nach vierten Versuch $SESSION auf 0 setzen
			if( $_SESSION[ 'count' ] > 3 ) {
				$_SESSION[ 'count' ] = 0;
			}
			$fragetext = $frage[ $_SESSION[ 'count' ] ];
			$fehlerausgabe = 'Du bist kein Mensch';
			$error = 'vocal';
		}		
		// ENDE::: Prüfung - Bist Du Mensch
		
	}
}
?>

Was ist noch zu tun?
Wir müssen noch die Variable $fehlerausgabe an der richtigen Stelle einbinden.
<div id="error" class="<?php if( $error !== '' ){ echo 'showError'; } ?>"><?php echo $fehlerausgabe; ?></div>
Der Fragetext $fragetext = $frage[ $_SESSION[ 'count' ] ]; erhöht sich automatisch.

An unserem HTML müssen wir jetzt nichts mehr ändern.
Im nächsten Schritt, werden wir die Mailfunktion einbauen und dann sollte es das gewesen sein.
War doch gar nicht so schwer bis hierher ;-)

 

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
Anrede:
Vorname:
Name:
E-Mail:
Nachricht:

Bitte entferne aus dem Feld unten alle Vokale.

  

Code 

HTML:

<div id="error" class="<?php 
if( $error !== '' ){
	echo 'showError';
} ?>"><?php echo $fehlerausgabe; ?></div>
<form name="skillflow" method="post" 
action="form_3.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<?php if($error == 'vocal'){ 
		echo ' label-error';
	} ?>">
		Bitte entferne aus dem Feld unten alle Vokale.
	</div>
	<input type="text" name="vocal" class="vocal-input" value="
	<?php echo $fragetext; ?>">
	<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 
session_start();

// SESSION nur auf 0 setzen, wenn noch nicht vorhanden.
if ( !isset( $_SESSION[ 'count' ]) ) {
    $_SESSION[ 'count' ] = 0;
}

// Erstellen eines Arrays mit den Fragen
$frage    = [];
$frage[0] = 'Eine Eule ruht';
$frage[1] = 'Aurelia organisiert';
$frage[2] = 'In einer Oase';
$frage[3] = 'Leo und Julia';

// Erstellen eines Arrays mit den Antworten
$antwort    = [];
$antwort[0] = 'n l rht';
$antwort[1] = 'rl rgnsrt';
$antwort[2] = 'n nr s';
$antwort[3] = 'L nd Jl';

// Erste Frage zuweisen an die Variable $fragetext
$fragetext = $frage[ $_SESSION[ 'count' ] ];

// Zusätzliche Fehlerausgabe
$fehlerausgabe = 'Sie haben nicht alle Felder ausgefüllt';

$error = '';

if (isset($_POST['send'])) {

	$fields = [];
	$fields[0] = 'anrede'; 
	$fields[1] = 'vorname'; 
	$fields[2] = 'name'; 
	$fields[3] = 'email'; 
	$fields[4] = 'kommentar'; 

    foreach ( $fields as $field ) {
        $value = trim($_POST[$field]);

        if ($value === '') {
            $error = $field;
            break;
        }
    }

	if ( $error === '' ) {
		if( trim($_POST[ 'vocal' ]) == $antwort[ $_SESSION['count'] ] ) {
			// Weiter zum Mailversand
			
		} else {
			// START::: Prüfung - Bist Du Mensch
			$_SESSION['count']++;
			if( $_SESSION[ 'count' ] > 3 ) {
				$_SESSION[ 'count' ] = 0;
			}
			
			$fragetext = $frage[ $_SESSION[ 'count' ] ];
			$fehlerausgabe = 'Du bist kein Mensch';
			$error = 'vocal';
		}		
		// ENDE::: Prüfung - Bist Du Mensch
		
	}
}

?>