Neue Felder in einem HTML -Kontaktformular hinzufügen

Dieses Tutorial zeigt Ihnen, wie man in einem HTML –Kontaktformular neue Eintragsfelder hinzufügt . Dieses Tutorial ist eine Fortsetzung des Tutorials Wie erstellt man einen Kontaktformular in HTML. Falls Sie die Dateien aus diesem Tutorial haben, öffnen Sie die, sonst laden Sie die herunter

Teil 1. HTML

Via den gewünschten HTML-Editor öffnen Sie die Datei index.html. Es gibt dort 2 Input, 1 Textbereich-Element und zwei Buttons. Lassen ihn mal mit mehr Funktionen ausstatten (z.B.: Checkboxen, Radiobuttons und die DropDown-Liste). Das HTML-Syntax für alle diese Elemente ist sehr einfach. Platzieren Sie nun diesen Code direkt nach den Buttons „Submit/Senden“ und „Reset/Zurücksetzen“.

Zusätzliche Optionen:

	<input type="checkbox" name="check[]" value="USA">USA<br />
	<input type="checkbox" name="check[]" value="Canada">Canada<br />
	<input type="checkbox" name="check[]" value="Mexico">Mexico<br />

Sind Sie damit einverstanden?

<input type="radio" value="yes" name="cf_radio_button">Yes
<input type="radio" value="no" name="cf_radio_button">No

Wählen Sie einen Punkt aus DropDown:

<select size="1" name="cf_drop_down">
	<option>php</option>
	<option>html</option>
	<option>css</option>
	<option>asp</option>
	<option>ajax</option>
	<option>javascript</option>
</select>

Jetzt entdecken wir mal schon ein paar interessante Dinge, die sich in diesem Code befinden. Vielleicht haben Sie schon bemerkt, dass die Namen, die mit dem Checkboxen zugeweist werden, sich nicht unterscheiden, deswegen gibt es die eckige Klammer am Ende. Die Klammer definieren, dass das eine Array Variable ist. Das ist die Erklärung wie es funktioniert. Für jedes markierende Checkbox, das check[] Array bekommt den Wert von gedrückten Checkboxen. Zum Beispiel, wenn man die beiden „USA” und “Canada” Checkboxen markiert hat, sind die Werte checked_usa und check_canada als die Elemente von Ihrem check[] Array.

Es passiert nichts Besonderes mit den Radiobuttons oder DropDown. Wir weisen den gleichen Name “cf_radio_button” mit den beiden Radiobuttons zu, damit Sie gleichzeitig die beiden nicht auswählen können. Sie brauchen nicht für jede einen besonderen Namen geben.

Die Syntax der DropDown-Liste ist sehr einfach. Öffnen Sie den Tag <select>, dann platzieren Sie die Optionen, jede Option soll zwischen <option>…</option> Tags setzen, und schießen Sie mit dem </select> Tag. Der Tag <select> hat 2 zugewiesenen Attribute, eine ist den Name und die andere ist die Größe. Die Attribute Größe gibt die Anzahl den sichtbaren Optionen in einer DropDown-Liste. </select>

Das Ergebnis diese Mühe sollte dann wie folgt aussehen.

( Zum Vergrößern hier klicken)

Teil 2. PHP

Jetzt haben Sie schon die Elemente auf der Seite. Sie brauchen nun der Versand ihre Daten erreichen und zum E-Mail-Send hinzufügen. Unten ist der finale Code der contact.php Datei

<?php
// Grabbing data sent from the form and assigning it to variables
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

// Composing body of the message
$mail_to = 'gordon@template-help.com';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message."\n";
$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

// Creating headers of the message
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		history.back(1);
	</script>
<?php
}

else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to gordon@template-help.com');
		history.back(1);
	</script>
<?php
}
?>

Lassen Sie uns anschauen, welche Codeteile zugesetzt sind und was sie tatsächlich machen.

Die PHP Funktion foreach() lauft ein Array “check” durch und weist jedes Element von Array der Variable $value zu. Dann erstellen die Variable $check_boxes und erhöhen Sie die mit dem Wert von jedem Element in Ihrem Array

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

Wie Sie unten sehen können, definiert man die Radiobuttons und DropDown-Liste ganz ähnlich, um Textfelder hinzuzufügen. Erstellen eine PHP Variable und weisen Sie sie mit den Daten, die vom Radiobox oder DropDown-Liste sind, zu.

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

Dieser Stück Code ist ähnlich mit dem Code, den wir vorher erstellt haben. Wir fügen nun neue Daten in der fertigen E-Mail ein

$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

TIPP:Ein kleines Update, das nützlich sein konnte. In der bisherigen Version des Skripts steht nach der JavaScript – Alarmmeldung die manuelle Weiterleitung zur Seite, die Sie im Code feststellen, window.location = ‘contact_page.html’;. Wenn Sie ersetzen contact_page.html durch etwas anderes, müssen Sie auch den richtigen Dateiname in contact.php geben. Am besten ersetzen Sie diesen Code durch diesen

history.back(1);

Grundsätzlich erklärt der Code, was das Programm da macht. Es entspricht dem Drück auf den Button Back Ihres Browsers.