Vorab-Informationen!

  • kontaktformular.com.zip: Laden Sie das Kontaktformular unter Download herunter. Auf der Download-Seite können Sie sich auch über die Funktionen informieren und alle Templates ausführlich testen!
  • Datei kontakt.php: Es wird lediglich die Datei kontakt.php zum Überarbeiten des Formulars benötigt. Zum Öffnen/Bearbeiten der Datei benutzen Sie bitte einen HTML Editor. (Empfehlung: Notepad2)
  • PHP Code: Der PHP Code ist grundsätzlich bei allen Templates identisch.
  • HTML Code: Der HTML Code unterscheidet sich bei jedem Template. Auf dieser Seite steht lediglich der HTML Code für das Template 1. Der HTML Code für die Templates 2 - 7 muss von Ihnen selbstständig angepasst werden. Tipp: Dies kann durch simples Copy and Paste durchgeführt werden!
  • Löschen/Entfernen von Feldern: Anhand der Anleitung zum Hinzufügen von Feldern kann auch das Entfernen von Feldern gut nachvollzogen werden. Bei Fragen schreiben Sie uns!



Tutorial: Kontaktformular - Template 1 - 7


- Ich möchte zusätzliche Input Felder als Pflichtfelder erstellen!
- Ich möchte zusätzliche Input Felder als optionale Felder erstellen!


- Ich möchte zusätzliche Select-Boxen/Auswahlliste als Pflichtfelder erstellen!
- Ich möchte zusätzliche Select-Boxen/Auswahlliste als optionale Felder erstellen!


- Ich möchte zusätzliche Checkboxen als Pflichtfelder erstellen!
- Ich möchte zusätzliche Checkboxen als optionale Felder erstellen!




Input Felder als Pflichtfelder

1. Scrollen Sie zu: // clean data

Erstellen Sie eine Zeile in dieser Form:

$inputfeld = stripslashes($_POST["inputfeld"]);

Beschreibung:
Ersetzen Sie "inputfeld" mit dem gewünschten Variablen-Namen. Der Variablen-Namen wird bei den nachfolgenden Schritten benötigt.



2. Scrollen Sie zu: // formcheck

Erstellen Sie eine Zeile in dieser Form:

if(!$inputfeld) { $fehler['inputfeld'] = "<span class='errormsg' style='color:red;font-size:.75rem;'>Fehlermeldung für das <strong>Input Feld</strong>.</span>"; }

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Fehlermeldung für das <strong>Input Feld</strong>." mit der gewünschten Fehlermeldung.



3. Scrollen Sie zu: // ---- create mail-message for admin

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neues Inputfeld: " . $inputfeld . "\n";

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neues Inputfeld:" mit der gewünschten Beschreibung.



4. Scrollen Sie zu: // ---- create mail-message for customer

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neues Inputfeld: " . $inputfeld . "\n";

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neues Inputfeld:" mit der gewünschten Beschreibung.



5. Nun fügen wir in den HTML Abschnitt das Input Feld ein!

Info: Der nachfolgende Code kann beispielhaft für das Template 1 angewandt werden. Da der HTML Abschnitt bei jedem Template - gut strukturiert - im unteren Teil der Datei kontakt.php steht, kann der entsprechende Code-Abschnitt für das Input Feld durch simples Copy and Paste hinzugefügt werden.


5.1: Das Input Feld fügen wir als einspaltiges Feld ein und nennen es "Input Feld".

<div class="row">
<label class="col-sm-3 control-label">Input Feld: *</label>
<div class="col-sm-8">
<?php if ($fehler["inputfeld"] != "") { echo $fehler["inputfeld"]; } ?>
<input type="text" name="inputfeld" class="field" placeholder="inputfeld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?> />
</div>
</div>

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Input Feld:" mit der gewünschten Beschreibung.


5.2: Wir können das Input Feld natürlich auch, zusammen mit einem anderen Input Feld (in diesem Beispiel mit "Vorname"), als zweispaltiges Feld einfügen:

<div class="row">
<label class="col-sm-3 control-label">Input Feld: *</label>
<div class="col-sm-2">
<?php if ($fehler["inputfeld"] != "") { echo $fehler["inputfeld"]; } ?>
<input type="text" name="inputfeld" class="field" placeholder="inputfeld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?> />
</div>

<label class="col-sm-4 control-label">Nachname: *</label>
<div class="col-sm-2">
<?php if ($fehler["name"] != "") { echo $fehler["name"]; } ?>
<input type="text" name="name" class="field" placeholder="Nachname" value="<?php echo $_POST[name]; ?>" maxlength="<?php echo $zeichenlaenge_name; ?>" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?> />
</div>
</div>

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Input Feld:" mit der gewünschten Beschreibung.



6. Fertig!


Input Felder als optionale Felder

1. Scrollen Sie zu: // clean data

Erstellen Sie eine Zeile in dieser Form:

$inputfeld = stripslashes($_POST["inputfeld"]);

Beschreibung:
Ersetzen Sie "inputfeld" mit dem gewünschten Variablen-Namen. Der Variablen-Namen wird bei den nachfolgenden Schritten benötigt.



2. Scrollen Sie zu: // ---- create mail-message for admin

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neues Inputfeld: " . $inputfeld . "\n";

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neues Inputfeld:" mit der gewünschten Beschreibung.



3. Scrollen Sie zu: // ---- create mail-message for customer

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neues Inputfeld: " . $inputfeld . "\n";

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neues Inputfeld:" mit der gewünschten Beschreibung.



4. Nun fügen wir in den HTML Abschnitt das Input Feld ein!

Info: Der nachfolgende Code kann beispielhaft für das Template 1 angewandt werden. Da der HTML Abschnitt bei jedem Template - gut strukturiert - im unteren Teil der Datei kontakt.php steht, kann der entsprechende Code-Abschnitt für das Input Feld durch simples Copy and Paste hinzugefügt werden.


4.1: Das Input Feld fügen wir als einspaltiges Feld ein und nennen es "Input Feld".

<div class="row">
<label class="col-sm-3 control-label">Input Feld: *</label>
<div class="col-sm-8">
<input type="text" name="inputfeld" class="field" placeholder="inputfeld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" />
</div>
</div>

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Input Feld:" mit der gewünschten Beschreibung.


4.2: Wir können das Input Feld natürlich auch, zusammen mit einem anderen Input Feld (in diesem Beispiel mit "Nachname"), als zweispaltiges Feld einfügen:

<div class="row">
<label class="col-sm-3 control-label">Input Feld: *</label>
<div class="col-sm-2">
<input type="text" name="inputfeld" class="field" placeholder="inputfeld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" />
</div>

<label class="col-sm-4 control-label">Nachname: *</label>
<div class="col-sm-2">
<input type="text" name="name" class="field" placeholder="Nachname" value="<?php echo $_POST[name]; ?>" maxlength="<?php echo $zeichenlaenge_name; ?>" />
</div>
</div>

Beschreibung:
1. Ersetzen Sie "inputfeld" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Input Feld:" mit der gewünschten Beschreibung.



5. Fertig!


Select Boxen als Pflichtfelder

1. Scrollen Sie zu: // clean data

Erstellen Sie eine Zeile in dieser Form:

$selectbox = stripslashes($_POST["selectbox"]);

Beschreibung:
Ersetzen Sie "selectbox" mit dem gewünschten Variablen-Namen. Der Variablen-Namen wird bei den nachfolgenden Schritten benötigt.



2. Scrollen Sie zu: // formcheck

Erstellen Sie eine Zeile in dieser Form:

if(isset($selectbox) && $selectbox == "") { $fehler['selectbox'] = " <span class='errormsg' style='color:red;font-size:.75rem;'>Bitte wählen Sie eine <strong>Option </strong> aus. </span>"; }

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Bitte wählen Sie eine <strong>Option </strong> aus." mit der gewünschten Fehlermeldung.



3. Scrollen Sie zu: // ---- create mail-message for admin

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neue Selectbox: " . $selectbox . "\n";

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Selectbox:" mit der gewünschten Beschreibung.



4. Scrollen Sie zu: // ---- create mail-message for customer

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neue Selectbox: " . $selectbox . "\n";

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Selectbox:" mit der gewünschten Beschreibung.



5. Nun fügen wir in den HTML Abschnitt die Selectbox ein!

Info: Der nachfolgende Code kann beispielhaft für das Template 1 angewandt werden. Da der HTML Abschnitt bei jedem Template - gut strukturiert - im unteren Teil der Datei kontakt.php steht, kann der entsprechende Code-Abschnitt für die Selectbox durch simples Copy and Paste hinzugefügt werden.


5.1: Die Selectbox fügen wir als einspaltiges Feld ein und nennen es "Auswahl".

<div class="row">
<label class="col-sm-3 control-label">Auswahl: *</label>
<div class="col-sm-8">
<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>
<select name="selectbox" class="field unselected" style="background-color: #fff;" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?>>
<option value="" selected >Wählen Sie aus!</option>
<option style="color:#000" value="Test 1" <?php if($_POST['selectbox']=="Test 1"){ echo "selected";}?> >Test 1</option>
<option style="color:#000" value="Test 2" <?php if($_POST['selectbox']=="Test 2"){ echo "selected";}?> >Test 2</option>
</select>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
</div>
</div>

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Auswahl:" mit der gewünschten Beschreibung.


5.2: Wir können die Selectbox natürlich auch, zusammen mit einem anderen Feld (in diesem Beispiel mit dem Input Feld "Vorname"), als zweispaltiges Feld einfügen:

<div class="row">
<label class="col-sm-3 control-label">Vorname: *</label>
<div class="col-sm-2">
<?php if ($fehler["vorname"] != "") { echo $fehler["vorname"]; } ?>
<input type="text" name="vorname" class="field" placeholder="Vorname" value="<?php echo $_POST[vorname]; ?>" maxlength="<?php echo $zeichenlaenge_vorname; ?>" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?> />
</div>

<label class="col-sm-4 control-label">Auswahl:</label>
<div class="col-sm-2">
<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>
<select name="selectbox" class="field unselected" style="background-color: #fff;" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?>>
<option value="" selected >Wählen Sie aus!</option>
<option style="color:#000" value="Test 1" <?php if($_POST['selectbox']=="Test 1"){ echo "selected";}?> >Test 1</option>
<option style="color:#000" value="Test 2" <?php if($_POST['selectbox']=="Test 2"){ echo "selected";}?> >Test 2</option>
</select>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
</div>
</div>

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Auswahl:" mit der gewünschten Beschreibung.



6. Fertig!


Select Boxen als optionale Felder

1. Scrollen Sie zu: // clean data

Erstellen Sie eine Zeile in dieser Form:

$selectbox = stripslashes($_POST["selectbox"]);

Beschreibung:
Ersetzen Sie "selectbox" mit dem gewünschten Variablen-Namen. Der Variablen-Namen wird bei den nachfolgenden Schritten benötigt.



2. Scrollen Sie zu: // ---- create mail-message for admin

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neue Selectbox: " . $selectbox . "\n";

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Selectbox:" mit der gewünschten Beschreibung.



3. Scrollen Sie zu: // ---- create mail-message for customer

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neue Selectbox: " . $selectbox . "\n";

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Selectbox:" mit der gewünschten Beschreibung.



4. Nun fügen wir in den HTML Abschnitt die Selectbox ein!

Info: Der nachfolgende Code kann beispielhaft für das Template 1 angewandt werden. Da der HTML Abschnitt bei jedem Template - gut strukturiert - im unteren Teil der Datei kontakt.php steht, kann der entsprechende Code-Abschnitt für die Selectbox durch simples Copy and Paste hinzugefügt werden.


4.1: Die Selectbox fügen wir als einspaltiges Feld ein und nennen es "Auswahl".

<div class="row">
<label class="col-sm-3 control-label">Auswahl: *</label>
<div class="col-sm-8">
<select name="selectbox" class="field unselected" style="background-color: #fff;" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }">
<option value="" selected >Wählen Sie aus!</option>
<option style="color:#000" value="Test 1" <?php if($_POST['selectbox']=="Test 1"){ echo "selected";}?> >Test 1</option>
<option style="color:#000" value="Test 2" <?php if($_POST['selectbox']=="Test 2"){ echo "selected";}?> >Test 2</option>
</select>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
</div>
</div>

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Auswahl:" mit der gewünschten Beschreibung.


4.2: Wir können die Selectbox natürlich auch, zusammen mit einem anderen Feld (in diesem Beispiel mit dem Input Feld "Vorname"), als zweispaltiges Feld einfügen:

<div class="row">
<label class="col-sm-3 control-label">Vorname: *</label>
<div class="col-sm-2">
<input type="text" name="vorname" class="field" placeholder="Vorname" value="<?php echo $_POST[vorname]; ?>" maxlength="<?php echo $zeichenlaenge_vorname; ?>" />
</div>

<label class="col-sm-4 control-label">Auswahl:</label>
<div class="col-sm-2">
<select name="selectbox" class="field unselected" style="background-color: #fff;" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }" >
<option value="" selected >Wählen Sie aus!</option>
<option style="color:#000" value="Test 1" <?php if($_POST['selectbox']=="Test 1"){ echo "selected";}?> >Test 1</option>
<option style="color:#000" value="Test 2" <?php if($_POST['selectbox']=="Test 2"){ echo "selected";}?> >Test 2</option>
</select>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
</div>
</div>

Beschreibung:
1. Ersetzen Sie "selectbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Auswahl:" mit der gewünschten Beschreibung.



5. Fertig!


Checkboxen als Pflichtfelder

1. Scrollen Sie zu: // clean data

Erstellen Sie eine Zeile in dieser Form:

$checkbox = stripslashes($_POST["checkbox"]);

Beschreibung:
Ersetzen Sie "checkbox" mit dem gewünschten Variablen-Namen. Der Variablen-Namen wird bei den nachfolgenden Schritten benötigt.



2. Scrollen Sie zu: // formcheck

Erstellen Sie eine Zeile in dieser Form:

if($checkbox == ""){ $fehler['checkbox'] = "<span class='errormsg' style='color:red;font-size:.75rem;'>Sie müssen die <strong>Checkbox</strong> ankreuzen.</span><br />"; }

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Sie müssen die <strong>Checkbox</strong> ankreuzen." mit der gewünschten Fehlermeldung.



3. Scrollen Sie zu: // ---- create mail-message for admin

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "\n\Checkbox: " . $checkbox . " \n";

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Checkbox:" mit der gewünschten Beschreibung.



4. Scrollen Sie zu: // ---- create mail-message for customer

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neue Checkbox: " . $checkbox . "\n";

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Checkbox:" mit der gewünschten Beschreibung.



5. Nun fügen wir in den HTML Abschnitt die Checkbox ein!

Info: Der nachfolgende Code kann beispielhaft für das Template 1 angewandt werden. Da der HTML Abschnitt bei jedem Template - gut strukturiert - im unteren Teil der Datei kontakt.php steht, kann der entsprechende Code-Abschnitt für die Checkbox durch simples Copy and Paste hinzugefügt werden.


<div style="margin-top:10px;">
<div class="row">
<label for="inlineCheckbox11" class="col-sm-3 control-label">Checkbox: * </label>
<label class="checkbox-inline">
<?php if ($fehler["checkbox"] != "") { echo $fehler["checkbox"]; } ?>
<input type="checkbox" id="inlineCheckbox11" name="checkbox" value="akzeptiert" <?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?> <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?>>
</label>Text für die Checkbox
</div>
</div>

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen. Achtung: Bitte belassen Sie for="inlineCheckbox11", class="checkbox-inline" und type="checkbox"!
2. Ersetzen Sie "Checkbox:" mit der gewünschten Formularbezeichnung. Ersetzen Sie außerdem "Text für die Checkbox" mit der gewünschten Beschreibung.



6. Fertig!


Checkboxen als optionale Felder

1. Scrollen Sie zu: // clean data

Erstellen Sie eine Zeile in dieser Form:

$checkbox = stripslashes($_POST["checkbox"]);

Beschreibung:
Ersetzen Sie "checkbox" mit dem gewünschten Variablen-Namen. Der Variablen-Namen wird bei den nachfolgenden Schritten benötigt.



2. Scrollen Sie zu: // ---- create mail-message for admin

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "\n\Checkbox: " . $checkbox . " \n";

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Checkbox:" mit der gewünschten Beschreibung.



3. Scrollen Sie zu: // ---- create mail-message for customer

Erstellen Sie eine Zeile in dieser Form:

$mailcontent .= "Neue Checkbox: " . $checkbox . "\n";

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen.
2. Ersetzen Sie "Neue Checkbox:" mit der gewünschten Beschreibung.



4. Nun fügen wir in den HTML Abschnitt die Checkbox ein!

Info: Der nachfolgende Code kann beispielhaft für das Template 1 angewandt werden. Da der HTML Abschnitt bei jedem Template - gut strukturiert - im unteren Teil der Datei kontakt.php steht, kann der entsprechende Code-Abschnitt für die Checkbox durch simples Copy and Paste hinzugefügt werden.


<div style="margin-top:10px;">
<div class="row">
<label for="inlineCheckbox11" class="col-sm-3 control-label">Checkbox: * </label>
<label class="checkbox-inline">
<?php if ($fehler["checkbox"] != "") { echo $fehler["checkbox"]; } ?>
<input type="checkbox" id="inlineCheckbox11" name="checkbox" value="akzeptiert" <?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?> <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php } ?>>
</label>Text für die Checkbox
</div>
</div>

Beschreibung:
1. Ersetzen Sie "checkbox" mit dem unter "// clean data" definierten Variablen-Namen. Achtung: Bitte belassen Sie for="inlineCheckbox11", class="checkbox-inline" und type="checkbox"!
2. Ersetzen Sie "Checkbox:" mit der gewünschten Formularbezeichnung. Ersetzen Sie außerdem "Text für die Checkbox" mit der gewünschten Beschreibung.



5. Fertig!



Individuelles Formular

Wir bieten auch die individuelle Programmierung auf Basis eines bestehenden Kontaktformulars! Schreiben Sie uns!