4.5.4 Weitere Workshops und Anwendungen

• 1 Kontaktformular Sterlingsangels
• 2 Formular als E-Mail senden
• 3 Webmeister
• 4 Schlund+Partner

-

1 Kontaktformular Sterlingsangels

a) Website Sterlingsangels

• Sterlingsangels (Webmaster: Louis):
  Home
  Stylesheet

• Kontaktformular von Sterlingsangels:
  Kontaktformular
  Stylesheet Kontaktformular

b) Kontaktformular

1) Eintrag im Quelltext:

<form action="../php/formulare.php" method="post">
<p></p>
 <input type="hidden" name="senden" value="1">
 <label for="name">Name</label>
 <input type="text" name="name" id="name" size="25"
  tabindex="56" value=""><br>
 <label for="betreff">Betreff</label>
 <input type="text" name="betreff" id="betreff" size="25"
  tabindex="56" value=""><br>

 <label for="nachricht">Nachricht</label>
 <textarea name="nachricht" id="nachricht" cols="40"
  rows="7" tabindex="57" class="nachricht">
  </textarea><br>

 <!--<label for="name">Name</label>
 <input type="text" name="name" id="name" size="25"
  tabindex="58" value="">-->
			
 <label for="email">E-Mail</label>
 <input type="text" name="email" id="email"
 size="25" tabindex="59"
 onfocus="if(this.value=='optional'){this.value='';
 this.style.color='#000'}"
 onblur="if(this.value==''){this.value='optional';
 this.style.color='#a3a3a3';}"
 class="optional" value="optional"
 >

 <!--<label for="adresse">Adresse</label>
 <input type="text" name="adresse" id="adresse"
 size="25" tabindex="60"
 onfocus="if(this.value=='optional'){this.value='';
 this.style.color='#000'}"
 onblur="if(this.value==''){this.value='optional';
 this.style.color='#a3a3a3';}"
 class="optional" value=""
 >

 <label for="telefon">Telefon</label>
 <input type="text" name="telefon" id="telefon"
 size="25" tabindex="61"
 onfocus="if(this.value=='optional'){this.value='';
 this.style.color='#000'}"
 onblur="if(this.value==''){this.value='optional';
 this.style.color='#a3a3a3';}"
 class="optional" value=""
 >-->

 <input class="senden" type="submit" value="Senden"
 tabindex="65" >
</form>

2) Anzeige des Formulars: (nicht in Original-Darstellung)

c) Umwandlung und Anzeige der Variablen

Prinzip:

• Die Variablen werden als "Post-Variablen" gesendet. Da wir im Dokument "normale" Variablen verwenden möchten, müssen die Post-Variablen in normale Variablen umgewandelt werden.
• Auf der Original-Website wurde dies nicht vorgesehen, da eine Bestätigung, des erfolgreichen Versandes (ohne Widerholung des Textes) gegeben wird.
• Die Umwandlung und Anzeige der Variablen ist hier nur zur Instruktion.

1) Umwandlung der Post-Variablen in normale Variablen

<?php
$name = $_POST ['name'];
$betreff = $_POST ['betreff'];
$nachricht = $_POST ['nachricht'];
$email = $_POST ['email'] 
?>

2) 2) Anzeige der gespeicherten Variablen

<div class="box-gelb">
<span style="font-size:1.2em; font-weight:bold;
color:red">Posteingang</span><br>
<?php
echo "
Sie haben folgende Angaben gemacht:<br>
<hr>
Name: $name<br>
Betreff: $betreff<br>
Nachricht: $nachricht<br>
E-Mail: $email
<hr>
- Es erfolgt natürlich keine Weiterleitung - 
";
?>
</div>

d) Bestätigung bei erfolgreicher Sendung:

Prinzip:

• Der Benutzer erhält nach erfolgter Sendung seiner Mitteilung eine Betstätigung, dass seine Mitteilung erfolgreich gesandt wurde.

1) Im Stylesheet wird folgender Eintrag für #content gegeben:

#content {
background:#fff;
margin:20px 10px 10px 10em;
padding:1.2em;
border:solid 2px #c03;
font-size:0.8em;
}

2) Eintrag im Quelltext:

<div id="content">
<!-- Hier beginnt der Seiteninhalt -->
		
Ihre Mitteilung wurde gesendet!<br><br>
Vielen Dank für Ihre Nachricht.

<!-- Hier endet der Seiteninhalt -->
</div>

3) Anzeige:

-

2 Formular als E-Mail senden

• Turski: Formular als E-Mail senden mit JavaScript

-

3 Webmeister

• Webmeister - PHP Workshop: Ein Gästebuch mit PHP

-

4 Schlund+Partner

• Schlund+Partner: Gästebuch - Anleitung zur Benutzung