Kontaktformular.com

Wichtige 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 9. Der HTML Code für die Templates 10, 11, 12 und 13 muss von Ihnen selbstständig angepasst werden. Tipp: Dies kann durch simples Copy and Paste durchgeführt werden!
  Tutorials für die Templates 1, 2, 3, 4, 5, 6, 7 und 8 stehen separat zur Verfügung. Siehe Übersichtsseite.

• 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!

• Häufig gestellte Fragen (Design, Technik usw.) Werfen Sie einen Blick auf unsere FAQ Seite. Auf der FAQ Seite werden die wichtigsten Fragen aufgelistet. Sollte Ihre Frage nicht vorkommen, können Sie uns gerne kontaktieren.

Tutorials

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

Option 1Option 2Option 3Option 4Option 5
- 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'>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!

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!

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'>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!

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!

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'>Sie müssen die <strong>Checkbox</strong> ankreuzen.</span>"; }

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!

<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!

<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!