Das Formular

Mail-/ Kontaktformular Schritt 1:

Als ersten erstellen wir uns im HTML das Formular.
Dieses Thema habe ich schon ein bisschen unter GET und POST behandelt.

Ein Kontaktformular sollte mindestens folgende Merkmale aufweisen:

  • Anrede: => am besten über ein Select-Feld
  • Vorname: => Input Textfeld
  • Name: => Input Textfeld
  • E-Mail: => Input Mailfeld
  • Kommentar: => Textarea
  • Button Senden
  • Button Löschen
Zusätzlich benötigen wir Noch eine Fehlerausgabe und ein Inputfeld für die Prüfung auf Mensch.

Sehen wir uns ein Input-Feld an z.B.:
<input type="text" class="" name="vorname" value="">

Die Namen der Input-Felder sind sehr wichtig, denn darüber können wir im PHP die jeweiligen Einträge erfassen.
Aber dazu später mehr.
Die Klasse class="" und den Value value="" sind wichtig, wenn auch derzeit leer.

 

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

Bitte entferne aus dem Feld unten alle Vokale.

  

Code 

HTML:

<div id="error" class="">Fehlerausgabe</div>
<form name="skillflow" method="post" 
action="form_1.php" enctype="multipart/form-data">
	<span class="label">Anrede: </span>
	<select name="anrede" class="mySelect">
		<option value="frau" selected>Frau</option>
		<option value="herr">Herr</option>
		<option value="divers">Divers</option>
	</select>
	<br>
	<span class="label">Vorname: </span>
	<input type="text" class="" name="vorname" value="">
	<br>
	<span class="label">Name: </span>
	<input type="text" class="" name="name" value="">
	<br>
	<span class="label">E-Mail: </span>
	<input type="email" class="" name="email" value="">
	<br>
	<div class="nachricht-text">Nachricht:</div>
	<textarea name="kommentar" class="comment"></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;
}

.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 !important;
	padding: 1px 0;
	background-color: white;
	border:1px solid white;
}
option{
	color:black !important;
	background-color: white;
	padding:5px 0;
}

input[type="text"], 
input[type="email"]{
	width:200px;
	font-size:14px;
	padding:5px 0;
	color:black !important;
	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 !important;
	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 !important;
    background-color: white;
    cursor: pointer;
	border:1px solid white;
}






PHP: