Jetzt ganz easy ein individuelles Formular - auf Basis von Template I - erstellen!

Zum Einsatz kommt HTML5, CSS3, JavaScript & PHP!






Vorabinformationen - Bitte lesen!

  • kontakt.php & style-kontaktformular.css
    Es werden lediglich die Dateien kontakt.php und style-kontaktformular.css zum Bearbeiten des Kontaktformulars benötigt.
    Zum Öffnen der Dateien benutzen Sie bitte einen HTML Editor. (Empfehlung: Notepad2)
  • Entfernen von bestehenden Feldern
    Das Entfernen von bestehenden Feldern kann anhand des entsprechenden Tutorials gut nachvollzogen werden.
    Bei Fragen schreiben Sie uns!
  • Versionen zu Template I
    Schauen Sie sich auch gerne unsere Versionen zu Template I an. Es stehen insgesamt 10 Versionen zur Verfügung!
    Vielleicht ist schon eine geeignete Version für Sie dabei?







Input-, Selectbox- oder Checkbox Felder einfügen:



Input Feld als Pflichtfeld einfügen



Vorabinformation
Öffnen Sie die Datei kontakt.php mit einem Editor. (Empfehlung: Notepad2)
Befolgen Sie die nachfolgenden Schritte gewissenhaft bis zum Ende.


1. Scrollen Sie zu:

// clean data


1.1 Erstellen Sie eine Zeile in dieser Form:

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

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



2. Scrollen Sie zu:

// formcheck


2.1 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" (2x) 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


3.1 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


4.1 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. Input Feld im HTML Code einfügen - Bitte wählen Sie aus:

5.1 Ein Input Feld (als Pflichtfeld) einfügen.

5.2 Zwei Input Felder (als Pflichtfelder) nebeneinander einfügen.




5.1 Ein Input Feld (als Pflichtfeld) einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- Input Feld - Anfang -->

<div class="row">

<div class="col-sm-8 <?php if ($fehler["inputfeld"] != "") { echo 'error'; } ?>">

<label class="control-label" for="border-right5"><i id="subject-icon" class="fa fa-edit"></i></label>

<input <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="Input Feld *" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right5"/>

<?php if ($fehler["inputfeld"] != "") { echo $fehler["inputfeld"]; } ?>

</div>

</div>

<!-- Input Feld - Ende -->

Wichtige Informationen:
1. Ersetzen Sie inputfeld mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["inputfeld"] (kommt 3x vor)
name="inputfeld"
value="<?php echo $_POST[inputfeld]; ?>"
maxlength="<?php echo $zeichenlaenge_inputfeld; ?>"

Die Variable $zeichenlaenge_inputfeld können Sie anschließend in der Datei config.php unter // Maximale Zeichenlänge der Felder definieren // einfügen. Somit können Sie für das entsprechende Feld auch die Zeichenlänge definieren.

2. Ersetzen Sie Input Feld mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Input Feld"
placeholder="Input Feld *"

3. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

4. Neues Icon finden und einfügen: Separate Anleitung lesen

5. Icon positionieren: Separate Anleitung lesen




5.2 Zwei Input Felder (als Pflichtfelder) nebeneinander einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- 2 Input Felder nebeneinander - Anfang -->

<div class="row">

<!-- linkes Input Feld - Anfang -->

<div class="col-sm-4 <?php if ($fehler["inputfeld"] != "") { echo 'error'; } ?>">

<label class="control-label" for="border-right4"><i id="user-icon" class="fa fa-user"></i></label>

<input <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Input Feld" type="text" name="inputfeld" class="field"  placeholder="Input Feld *" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right4"/>
<?php if ($fehler["inputfeld"] != "") { echo $fehler["inputfeld"]; } ?>

</div>

<!-- linkes Input Feld - Ende -->


<!-- rechtes Input Feld - Anfang -->

<div class="col-sm-4 <?php if ($fehler["inputfeld"] != "") { echo 'error'; } ?>">

<label class="control-label" for="border-right5"><i id="user-icon" class="fa fa-user"></i></label>

<input <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField(this)" <?php } ?> type="text" name="inputfeld" class="field" placeholder="Input Feld *" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right5"/>
<?php if ($fehler["inputfeld"] != "") { echo $fehler["inputfeld"]; } ?>

</div>

<!-- rechtes Input Feld - Ende -->

</div>

<!-- 2 Input Felder nebeneinander - Ende -->

Wichtige Informationen
Code zwischen <!-- linkes Input Feld - Anfang --> und <!-- linkes Input Feld - Ende -->:


1. Ersetzen Sie inputfeld mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["inputfeld"] (kommt 3x vor)
name="inputfeld"
value="<?php echo $_POST[inputfeld]; ?>"
maxlength="<?php echo $zeichenlaenge_inputfeld; ?>"

Die Variable $zeichenlaenge_inputfeld können Sie anschließend in der Datei config.php unter // Maximale Zeichenlänge der Felder definieren // einfügen. Somit können Sie für das entsprechende Feld auch die Zeichenlänge definieren.

2. Ersetzen Sie Input Feld mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Input Feld"
placeholder="Input Feld *"

3. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

4. Neues Icon finden und einfügen: Separate Anleitung lesen

5. Icon positionieren: Separate Anleitung lesen



Wichtige Informationen
Code zwischen <!-- rechtes Input Feld - Anfang --> und <!-- rechtes Input Feld - Ende -->:


Vorweg: Da es sich um ein neues Input Feld handelt, müssen Sie die Punkte 1. - 4.1 wiederholen und dem Feld eine neue Variable (inkl. neuem Variablen-Namen) zuteilen.

1. Ersetzen Sie inputfeld mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["inputfeld"] (kommt 3x vor)
name="inputfeld"
value="<?php echo $_POST[inputfeld]; ?>"
maxlength="<?php echo $zeichenlaenge_inputfeld; ?>"

Die Variable $zeichenlaenge_inputfeld können Sie anschließend in der Datei config.php unter // Maximale Zeichenlänge der Felder definieren // einfügen. Somit können Sie für das entsprechende Feld auch die Zeichenlänge definieren.

2. Ersetzen Sie Input Feld mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Input Feld"
placeholder="Input Feld *"

3. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

4. Neues Icon finden und einfügen: Separate Anleitung lesen

5. Icon positionieren: Separate Anleitung lesen



6. Fertig! :-)






Input Feld als optionales Feld einfügen



Vorabinformation
Öffnen Sie die Datei kontakt.php mit einem Editor. (Empfehlung: Notepad2)
Befolgen Sie die nachfolgenden Schritte gewissenhaft bis zum Ende.


1. Scrollen Sie zu:

// clean data


1.1 Erstellen Sie eine Zeile in dieser Form:

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

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



2. Scrollen Sie zu:

// ---- create mail-message for admin


2.1 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


3.1 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. Input Feld im HTML Code einfügen - Bitte wählen Sie aus:

4.1 Ein Input Feld (als optionales Feld) einfügen.

4.2 Zwei Input Felder (als optionale Felder) nebeneinander einfügen.




4.1 Ein Input Feld (als optionales Feld) einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- Input Feld - Anfang -->

<div class="row">

<div class="col-sm-8">

<label class="control-label" for="border-right5"><i id="subject-icon" class="fa fa-edit"></i></label>

<input aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="Input Feld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right5"/>

</div>

</div>

<!-- Input Feld - Ende -->

Wichtige Informationen:
1. Ersetzen Sie inputfeld mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="inputfeld"
value="<?php echo $_POST[inputfeld]; ?>"
maxlength="<?php echo $zeichenlaenge_inputfeld; ?>"

Die Variable $zeichenlaenge_inputfeld können Sie anschließend in der Datei config.php unter // Maximale Zeichenlänge der Felder definieren // einfügen. Somit können Sie für das entsprechende Feld auch die Zeichenlänge definieren.

2. Ersetzen Sie Input Feld mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Input Feld"
placeholder="Input Feld"

3. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

4. Neues Icon finden und einfügen: Separate Anleitung lesen

5. Icon positionieren: Separate Anleitung lesen




4.2 Zwei Input Felder (als optionale Felder) nebeneinander einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- 2 Input Felder nebeneinander - Anfang -->

<div class="row">

<!-- linkes Input Feld - Anfang -->

<div class="col-sm-4">

<label class="control-label" for="border-right4"><i id="user-icon" class="fa fa-user"></i></label>

<input aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="Input Feld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right4"/>

</div>

<!-- linkes Input Feld - Ende -->


<!-- rechtes Input Feld - Anfang -->

<div class="col-sm-4">

<label class="control-label" for="border-right5"><i id="user-icon" class="fa fa-user"></i></label>

<input type="text" name="inputfeld" class="field" placeholder="Input Feld" value="<?php echo $_POST[inputfeld]; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right5"/>

</div>

<!-- rechtes Input Feld - Ende -->

</div>

<!-- 2 Input Felder nebeneinander - Ende -->

Wichtige Informationen
Code zwischen <!-- linkes Input Feld - Anfang --> und <!-- linkes Input Feld - Ende -->:

1. Ersetzen Sie inputfeld mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="inputfeld"
value="<?php echo $_POST[inputfeld]; ?>"
maxlength="<?php echo $zeichenlaenge_inputfeld; ?>"

Die Variable $zeichenlaenge_inputfeld können Sie anschließend in der Datei config.php unter // Maximale Zeichenlänge der Felder definieren // einfügen. Somit können Sie für das entsprechende Feld auch die Zeichenlänge definieren.

2. Ersetzen Sie Input Feld mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Input Feld"
placeholder="Input Feld"

3. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

4. Neues Icon finden und einfügen: Separate Anleitung lesen

5. Icon positionieren: Separate Anleitung lesen



Wichtige Informationen
Code zwischen <!-- rechtes Input Feld - Anfang --> und <!-- rechtes Input Feld - Ende -->:


Vorweg: Da es sich um ein neues Input Feld handelt, müssen Sie die Punkte 1. - 3.1 wiederholen und dem Feld eine neue Variable (inkl. neuem Variablen-Namen) zuteilen.

1. Ersetzen Sie inputfeld mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="inputfeld"
value="<?php echo $_POST[inputfeld]; ?>"
maxlength="<?php echo $zeichenlaenge_inputfeld; ?>"

Die Variable $zeichenlaenge_inputfeld können Sie anschließend in der Datei config.php unter // Maximale Zeichenlänge der Felder definieren // einfügen. Somit können Sie für das entsprechende Feld auch die Zeichenlänge definieren.

2. Ersetzen Sie Input Feld mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Input Feld"
placeholder="Input Feld"

3. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

4. Neues Icon finden und einfügen: Separate Anleitung lesen

5. Icon positionieren: Separate Anleitung lesen



5. Fertig! :-)






Selectbox als Pflichtfeld einfügen



Vorabinformation
Öffnen Sie die Datei kontakt.php mit einem Editor. (Empfehlung: Notepad2)
Befolgen Sie die nachfolgenden Schritte gewissenhaft bis zum Ende.


1. Scrollen Sie zu:

// clean data


1.1 Erstellen Sie eine Zeile in dieser Form:

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

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



2. Scrollen Sie zu:

// formcheck


2.1 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" (3x) 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


3.1 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


4.1 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. Selectbox im HTML Code einfügen - Bitte wählen Sie aus:

5.1 Eine Selectbox (als Pflichtfeld) einfügen.

5.2 Zwei Selectboxen (als Pflichtfelder) nebeneinander einfügen.




5.1 Eine Selectbox (als Pflichtfeld) einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- Selectbox Feld - Anfang -->

<div class="row">

<div class="col-sm-4 <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?>" >

<label class="control-label select-label" for="border-right3" style="pointer-events: none; z-index: 1;"><i id="caret-down-icon" class="fas fa-caret-down"></i></label>

<select id="border-right3" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php } ?>  aria-label="Selectbox" name="selectbox" class="field unselected" onchange="<?php if(!$cfg['HTML5_FEHLERMELDUNGEN']) { ?> checkField(this); <?php } ?>if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }" >

<option value="" selected >Selectbox *</option>

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

<option style="color:#000" value="Option 4 " <?php if($_POST['selectbox']=="Option 4 "){ echo "selected";}?> >Option 4</option>

<option style="color:#000" value="Option 5 " <?php if($_POST['selectbox']=="Option 5 "){ echo "selected";}?> >Option 5</option>

<option style="color:#000" value="Option 6 " <?php if($_POST['selectbox']=="Option 6 "){ echo "selected";}?> >Option 6</option>

</select>

<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>

<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

</div>

</div>

<!-- Selectbox Feld - Ende -->

Wichtige Informationen:
1. Ersetzen Sie selectbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["selectbox"] (kommt 3x vor)
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

2. Ersetzen Sie jeweils Option 1, Option 2, Option 3 ... durch Ihre Vorgaben:

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

Wichtig: Der Wert unter value="" und unter <?php if($_POST['selectbox']==""){ echo "selected";}?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden. Der (sichtbare) Wert unter <option>Option 1</option> kann hingegen eine andere Bezeichnung haben.

Achten Sie ggf. darauf, dass das Leerzeichen (nachfolgend rot markiert) innerhalb von value=" " (z.B. value="Option 1 ") vorhanden bleibt. Das Gleiche gilt für: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> Wozu das Leerzeichen: Das Einfügen des Leerzeichens ist immer dann sinnvoll, wenn im Mailinhalt ein Leerzeichen "produziert" werden soll. Beispielsweise wird somit bei der Advanced Version eines beliebigen Templates im Mailinhalt ein Leerzeichen zwischen Anrede (Herr/Frau) und Titel (Dr./Prof.) erstellt, sofern der Nutzer beide Optionen ausgewählt hat.

3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Selectbox"
<option value="" selected >Selectbox *</option>

4. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

5. Neues Icon finden und einfügen: Separate Anleitung lesen

6. Icon positionieren: Separate Anleitung lesen




5.2 Zwei Selectboxen (als Pflichtfelder) nebeneinander einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- 2 Selectbox Felder nebeneinander - Anfang -->

<div class="row">

<!-- linkes Selectbox Feld - Anfang -->

<div class="col-sm-4 <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?>" >

<label class="control-label select-label" for="border-right2" style="pointer-events: none; z-index: 1;" ><i id="caret-down-icon" class="fas fa-caret-down"></i></label>

<select  id="border-right2" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php } ?> aria-label="Selectbox" name="selectbox" class="field unselected" onchange="<?php if(!$cfg['HTML5_FEHLERMELDUNGEN']) { ?> checkField(this); <?php } ?>if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }">

<option value="" selected >Selectbox *</option>

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

</select>

<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>

<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

</div>

<!-- linkes Selectbox Feld - Ende -->


<!-- rechtes Selectbox Feld - Anfang -->

<div class="col-sm-4 <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?>" >

<label class="control-label select-label" for="border-right3" style="pointer-events: none; z-index: 1;" ><i id="caret-down-icon" class="fas fa-caret-down"></i></label>

<select  id="border-right3" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php } ?> aria-label="Selectbox" name="selectbox" class="field unselected" onchange="<?php if(!$cfg['HTML5_FEHLERMELDUNGEN']) { ?> checkField(this); <?php } ?>if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }">

<option value="" selected >Selectbox *</option>

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

</select>

<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>

<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

</div>

<!-- rechtes Selectbox Feld - Ende -->

</div>

<!-- 2 Selectbox Felder nebeneinander - Ende -->

Wichtige Informationen
Code zwischen <!-- linkes Selectbox Feld - Anfang --> und <!-- linkes Selectbox Feld - Ende -->:


1. Ersetzen Sie selectbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["selectbox"] (kommt 3x vor)
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

2. Ersetzen Sie jeweils Option 1, Option 2, Option 3 ... durch Ihre Vorgaben:

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

Wichtig: Der Wert unter value="" und unter <?php if($_POST['selectbox']==""){ echo "selected";}?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden. Der (sichtbare) Wert unter <option>Option 1</option> kann hingegen eine andere Bezeichnung haben.

Achten Sie ggf. darauf, dass das Leerzeichen (nachfolgend rot markiert) innerhalb von value=" " (z.B. value="Option 1 ") vorhanden bleibt. Das Gleiche gilt für: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> Wozu das Leerzeichen: Das Einfügen des Leerzeichens ist immer dann sinnvoll, wenn im Mailinhalt ein Leerzeichen "produziert" werden soll. Beispielsweise wird somit bei der Advanced Version eines beliebigen Templates im Mailinhalt ein Leerzeichen zwischen Anrede (Herr/Frau) und Titel (Dr./Prof.) erstellt, sofern der Nutzer beide Optionen ausgewählt hat.

3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Selectbox"
<option value="" selected >Selectbox *</option>

4. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

5. Neues Icon finden und einfügen: Separate Anleitung lesen

6. Icon positionieren: Separate Anleitung lesen



Wichtige Informationen
Code zwischen <!-- rechtes Selectbox Feld - Anfang --> und <!-- rechtes Selectbox Feld - Ende -->:


Vorweg: Da es sich um ein neues Selectbox Feld handelt, müssen Sie die Punkte 1. - 4.1 wiederholen und dem Feld eine neue Variable (inkl. neuem Variablen-Namen) zuteilen.

1. Ersetzen Sie selectbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["selectbox"] (kommt 3x vor)
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

2. Ersetzen Sie jeweils Option 1, Option 2, Option 3 ... durch Ihre Vorgaben:

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

Wichtig: Der Wert unter value="" und unter <?php if($_POST['selectbox']==""){ echo "selected";}?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden. Der (sichtbare) Wert unter <option>Option 1</option> kann hingegen eine andere Bezeichnung haben.

Achten Sie ggf. darauf, dass das Leerzeichen (nachfolgend rot markiert) innerhalb von value=" " (z.B. value="Option 1 ") vorhanden bleibt. Das Gleiche gilt für: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> Wozu das Leerzeichen: Das Einfügen des Leerzeichens ist immer dann sinnvoll, wenn im Mailinhalt ein Leerzeichen "produziert" werden soll. Beispielsweise wird somit bei der Advanced Version eines beliebigen Templates im Mailinhalt ein Leerzeichen zwischen Anrede (Herr/Frau) und Titel (Dr./Prof.) erstellt, sofern der Nutzer beide Optionen ausgewählt hat.

3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Selectbox"
<option value="" selected >Selectbox *</option>

4. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

5. Neues Icon finden und einfügen: Separate Anleitung lesen

6. Icon positionieren: Separate Anleitung lesen



6. Fertig! :-)






Selectbox als optionales Feld einfügen



Vorabinformation
Öffnen Sie die Datei kontakt.php mit einem Editor. (Empfehlung: Notepad2)
Befolgen Sie die nachfolgenden Schritte gewissenhaft bis zum Ende.


1. Scrollen Sie zu:

// clean data


1.1 Erstellen Sie eine Zeile in dieser Form:

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

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



2. Scrollen Sie zu:

// ---- create mail-message for admin


2.1 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


3.1 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. Selectbox im HTML Code einfügen - Bitte wählen Sie aus:

4.1 Eine Selectbox (als optionales Feld) einfügen.

4.2 Zwei Selectboxen (als optionale Felder) nebeneinander einfügen.




4.1 Eine Selectbox (als optionales Feld) einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- Selectbox Feld - Anfang -->

<div class="row">

<div class="col-sm-4" >

<label class="control-label select-label" for="border-right3" style="pointer-events: none; z-index: 1;"><i id="caret-down-icon" class="fas fa-caret-down"></i></label>

<select id="border-right3" aria-label="Selectbox" name="selectbox" class="field unselected" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }" >

<option value="" selected >Selectbox</option>

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

</select>

<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

</div>

</div>

<!-- Selectbox Feld - Ende -->

Wichtige Informationen:
1. Ersetzen Sie selectbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

2. Ersetzen Sie jeweils Option 1, Option 2, Option 3 ... durch Ihre Vorgaben:

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

Wichtig: Der Wert unter value="" und unter <?php if($_POST['selectbox']==""){ echo "selected";}?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden. Der (sichtbare) Wert unter <option>Option 1</option> kann hingegen eine andere Bezeichnung haben.

Achten Sie ggf. darauf, dass das Leerzeichen (nachfolgend rot markiert) innerhalb von value=" " (z.B. value="Option 1 ") vorhanden bleibt. Das Gleiche gilt für: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> Wozu das Leerzeichen: Das Einfügen des Leerzeichens ist immer dann sinnvoll, wenn im Mailinhalt ein Leerzeichen "produziert" werden soll. Beispielsweise wird somit bei der Advanced Version eines beliebigen Templates im Mailinhalt ein Leerzeichen zwischen Anrede (Herr/Frau) und Titel (Dr./Prof.) erstellt, sofern der Nutzer beide Optionen ausgewählt hat.

3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Selectbox"
<option value="" selected >Selectbox</option>

4. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

5. Neues Icon finden und einfügen: Separate Anleitung lesen

6. Icon positionieren: Separate Anleitung lesen




4.2 Zwei Selectboxen (als optionale Felder) nebeneinander einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- 2 Selectbox Felder nebeneinander - Anfang -->

<div class="row">

<!-- linkes Selectbox Feld - Anfang -->

<div class="col-sm-4" >

<label class="control-label select-label" for="border-right2" style="pointer-events: none; z-index: 1;" ><i id="caret-down-icon" class="fas fa-caret-down"></i></label>

<select  id="border-right2" aria-label="Selectbox" name="selectbox" class="field unselected" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }">

<option value="" selected >Selectbox</option>

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

</select>

<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

</div>

<!-- linkes Selectbox Feld - Ende -->


<!-- rechtes Selectbox Feld - Anfang -->				

<div class="col-sm-4" >

<label class="control-label select-label" for="border-right3" style="pointer-events: none; z-index: 1;" ><i id="caret-down-icon" class="fas fa-caret-down"></i></label>

<select id="border-right3" aria-label="Selectbox" name="selectbox" class="field unselected" onchange="if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }">

<option value="" selected >Selectbox</option>

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

</select>

<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

</div>

<!-- rechtes Selectbox Feld - Ende -->

</div>

<!-- 2 Selectbox Felder nebeneinander - Ende -->

Wichtige Informationen
Code zwischen <!-- linkes Selectbox Feld - Anfang --> und <!-- linkes Selectbox Feld - Ende -->:


1. Ersetzen Sie selectbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

2. Ersetzen Sie jeweils Option 1, Option 2, Option 3 ... durch Ihre Vorgaben:

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

Wichtig: Der Wert unter value="" und unter <?php if($_POST['selectbox']==""){ echo "selected";}?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden. Der (sichtbare) Wert unter <option>Option 1</option> kann hingegen eine andere Bezeichnung haben.

Achten Sie ggf. darauf, dass das Leerzeichen (nachfolgend rot markiert) innerhalb von value=" " (z.B. value="Option 1 ") vorhanden bleibt. Das Gleiche gilt für: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> Wozu das Leerzeichen: Das Einfügen des Leerzeichens ist immer dann sinnvoll, wenn im Mailinhalt ein Leerzeichen "produziert" werden soll. Beispielsweise wird somit bei der Advanced Version eines beliebigen Templates im Mailinhalt ein Leerzeichen zwischen Anrede (Herr/Frau) und Titel (Dr./Prof.) erstellt, sofern der Nutzer beide Optionen ausgewählt hat.

3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Selectbox"
<option value="" selected >Selectbox</option>

4. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

5. Neues Icon finden und einfügen: Separate Anleitung lesen

6. Icon positionieren: Separate Anleitung lesen



Wichtige Informationen
Code zwischen <!-- rechtes Selectbox Feld - Anfang --> und <!-- rechtes Selectbox Feld - Ende -->:


Vorweg: Da es sich um ein neues Selectbox Feld handelt, müssen Sie die Punkte 1. - 3.1 wiederholen und dem Feld eine neue Variable (inkl. neuem Variablen-Namen) zuteilen.

1. Ersetzen Sie selectbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>

2. Ersetzen Sie jeweils Option 1, Option 2, Option 3 ... durch Ihre Vorgaben:

<option style="color:#000" value="Option 1 " <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> >Option 1</option>

<option style="color:#000" value="Option 2 " <?php if($_POST['selectbox']=="Option 2 "){ echo "selected";}?> >Option 2</option>

<option style="color:#000" value="Option 3 " <?php if($_POST['selectbox']=="Option 3 "){ echo "selected";}?> >Option 3</option>

Wichtig: Der Wert unter value="" und unter <?php if($_POST['selectbox']==""){ echo "selected";}?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden. Der (sichtbare) Wert unter <option>Option 1</option> kann hingegen eine andere Bezeichnung haben.

Achten Sie ggf. darauf, dass das Leerzeichen (nachfolgend rot markiert) innerhalb von value=" " (z.B. value="Option 1 ") vorhanden bleibt. Das Gleiche gilt für: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> Wozu das Leerzeichen: Das Einfügen des Leerzeichens ist immer dann sinnvoll, wenn im Mailinhalt ein Leerzeichen "produziert" werden soll. Beispielsweise wird somit bei der Advanced Version eines beliebigen Templates im Mailinhalt ein Leerzeichen zwischen Anrede (Herr/Frau) und Titel (Dr./Prof.) erstellt, sofern der Nutzer beide Optionen ausgewählt hat.

3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Selectbox"
<option value="" selected >Selectbox</option>

4. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

5. Neues Icon finden und einfügen: Separate Anleitung lesen

6. Icon positionieren: Separate Anleitung lesen



5. Fertig! :-)






Checkbox als Pflichtfeld einfügen



Vorabinformation
Öffnen Sie die Datei kontakt.php mit einem Editor. (Empfehlung: Notepad2)
Befolgen Sie die nachfolgenden Schritte gewissenhaft bis zum Ende.


1. Scrollen Sie zu:

// clean data


1.1 Erstellen Sie eine Zeile in dieser Form:

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

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



2. Scrollen Sie zu:

// formcheck


2.1 Erstellen Sie eine Zeile in dieser Form:

if(isset($checkbox) && $checkbox == ""){ 
		$fehler['checkbox'] = "<span class='errormsg'>Sie müssen die <strong>Checkbox</strong> anklicken.</span>";
	}

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



3. Scrollen Sie zu:

// ---- create mail-message for admin


3.1 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. Scrollen Sie zu:

// ---- create mail-message for customer


4.1 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. Checkbox (als Pflichtfeld) im HTML Code einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- Checkbox Feld - Anfang -->

<div class="row">

<div class="row checkbox-row <?php if ($fehler["checkbox"] != "") { echo 'error_container_new_checkbox'; } ?>" style="background-image: url('img/border-right.png');background-position: 2.85rem center;-webkit-text-size-adjust:none;background-repeat: no-repeat;margin-bottom: 0rem;<?php if ($fehler["checkbox"] != "") { echo 'error_container_new_checkbox'; } ?>">

<style>
.error_container_new_checkbox { 
margin-bottom: 1.3rem !important; 
} 

@media (max-width: 655px) {
.error_container_new_checkbox { 
margin-bottom: 2.55rem !important; 
}
}
</style>

<div class="col-sm-8 <?php if ($fehler["checkbox"] != "") { echo 'error_new_checkbox'; } ?> ">

<style>
.kontaktformular .row .error_new_checkbox .control-label{
				color: #db0007;
				border-color: #db0007;
				margin-top: 0.19rem;
				height: 65.1%;
				padding: .45rem 1rem .5rem 1rem;			
}

/* safari iOS - start */
body.safari .kontaktformular .row .error_new_checkbox .control-label{
     margin-top: 0.43rem; 
}
/* safari iOS - end */

@media (max-width: 655px) {
.kontaktformular .row .error_new_checkbox .control-label{
				color: #db0007;
				border-color: #db0007;
				margin-top: 0.19rem;
				height: 65.1%;
				padding: .59rem 1rem .5rem 1rem;			
}

/* safari iOS - start */
body.safari .kontaktformular .row .error_new_checkbox .control-label{
     margin-top: 0.19rem; 
}
/* safari iOS - end */

}

.kontaktformular .row .error_new_checkbox .field,
.kontaktformular .row .error_new_checkbox .checkbox-inline input,
.kontaktformular.kontaktformular-validate .row .field:invalid,
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid{	/* style invalid fields only if user wants to send the form (integrated via js) */
				background-color: #ffeaec;
				border-color: #eac0c5;
}
</style>

<label class="control-label" for="inlineCheckbox13"><i id="dataprotection-icon" class="fas fa-user-shield "></i></label>

<label class="checkbox-inline">

<input <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField_new_checkbox(this)" <?php } ?> aria-label="Checkbox" type="checkbox" id="inlineCheckbox13" name="checkbox" value="akzeptiert" <?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>> <div style="padding-top:4px;padding-bottom:2px;"> <span>Beschreibung für die Checkbox als Pflichtfeld *</span></div>

</label>

<?php if ($fehler["checkbox"] != "") { echo $fehler["checkbox"]; } ?>

</div>

</div>

</div>

<!-- Checkbox Feld - Ende -->

Fügen Sie außerdem vor

<?php } ?>
</form>

den nachfolgenden JavaScript Code ein:

<!-- JavaScript Code - Checkbox - Anfang -->

<script type="text/javascript">

// set class kontaktformular-validate for form if user wants to send the form > so the invalid-styles only appears after validation
function checkField_new_checkbox(field){
if(''!=field.value){
						
// if field is checkbox: go to parentNode and do things because checkbox is in label-element
if('checkbox'==field.getAttribute('type')){
field.parentNode.parentNode.classList.remove("error_new_checkbox");						
field.parentNode.nextElementSibling.style.display = 'none';
}

// field is no checkbox: do things with field
else{
field.parentNode.classList.remove("error_new_checkbox");
field.nextElementSibling.style.display = 'none';
}
						
// remove class error_container from parent-elements
field.parentNode.parentNode.parentNode.classList.remove("error_container_new_checkbox");
field.parentNode.parentNode.classList.remove("error_container_new_checkbox");
field.parentNode.classList.remove("error_container_new_checkbox");
											
}
}
</script>

<!-- JavaScript Code - Checkbox - Ende -->

Wichtige Informationen:
1. Ersetzen Sie checkbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

$fehler["checkbox"] (kommt 4x vor)
name="checkbox"
<?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>

2. Ersetzen Sie akzeptiert durch eine individuelle Bezeichnung bei den folgenden Stellen:

value="akzeptiert"
<?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>

Wichtig: Der Wert unter value="" und unter <?php if ($_POST['checkbox']=='') echo(' checked="checked" '); ?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden.

Diese Bezeichnung erscheint später im Mailinhalt. Beispiel: Bei dem Checkbox Feld "Datenschutz" lautet der Mailinhalt demzufolge: Datenschutz: akzeptiert

3. Ersetzen Sie Checkbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Checkbox"

4. Ersetzen Sie Beschreibung für die Checkbox als Pflichtfeld * mit einer individuellen Beschreibung. Hinweis: Binden Sie den "Beschreibungstext" immer zwischen <span> </span> ein. Bei einem Link lassen Sie <span> </span> einfach weg.

5. Wozu dient der JavaScript Code? Der JavaScript Code dient lediglich dazu, dass - im Falle einer Fehlermeldung - die dynamische Ausblendung des Fehlermeldungstextes (einschließlich der roten Checkbox-Markierung) durchgeführt wird, nachdem die Checkbox angeklickt wurde. Wichtig: Der JavaScript Code muss - sofern Sie weitere Checkboxen als Pflichtfelder einfügen möchten - ebenfalls neu hinzugefügt werden. Es muss darauf geachtet werden, dass der Zusatz _new_checkbox umbenannt wird.

Der Zusatz _new_checkbox kommt bei diesen Stellen im vorangegangenen HTML- und JavaScript Code vor:

error_container_new_checkbox (kommt 7x vor)
error_new_checkbox (kommt 7x vor)
checkField_new_checkbox(this) (kommt 1x vor)
checkField_new_checkbox(field) (kommt 1x vor)

6. Warum gibt es internes Stylesheet? Der Code beinhaltet internes Stylesheet, da bestimmte CSS Befehle aus dem externen Stylesheet (style-kontaktformular.css), aufgrund des neu hinzugefügten Javascript Codes nicht funktionieren.

Informationen zum Stylesheet:
1.
<style>
.error_container_new_checkbox {
margin-bottom: 1.3rem !important;
}

@media (max-width: 655px) {
.error_container_new_checkbox {
margin-bottom: 2.55rem !important;
}
}
</style>


Beschreibung: Der CSS Befehl margin-bottom definiert - im Falle einer Fehlermeldung - den Abstand zum nächsten Feld. (1.3rem in der Desktop-Version und 2.55rem in der Mobile-Version)

2.
<style>
.kontaktformular .row .error_new_checkbox .control-label{
color: #db0007;
border-color: #db0007;
margin-top: 0.19rem;
height: 65.1%;
padding: .45rem 1rem .5rem 1rem;
}

/* safari iOS - start */
body.safari .kontaktformular .row .error_new_checkbox .control-label{
margin-top: 0.43rem;
}
/* safari iOS - end */

@media (max-width: 655px) {
.kontaktformular .row .error_new_checkbox .control-label{
color: #db0007;
border-color: #db0007;
margin-top: 0.19rem;
height: 65.1%;
padding: .59rem 1rem .5rem 1rem;
}

/* safari iOS - start */
body.safari .kontaktformular .row .error_new_checkbox .control-label{
margin-top: 0.19rem;
}
/* safari iOS - end */

}

.kontaktformular .row .error_new_checkbox .field,
.kontaktformular .row .error_new_checkbox .checkbox-inline input,
.kontaktformular.kontaktformular-validate .row .field:invalid,
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid{ /* style invalid fields only if user wants to send the form (integrated via js) */
background-color: #ffeaec;
border-color: #eac0c5;
}
</style>


Beschreibung: Der CSS Befehl padding: .45rem 1rem .5rem 1rem; (relevant für Firefox, Chrome, Edge) und der CSS Befehl margin-top: 0.43rem; (relevant für Safari) definiert den korrekten oberen Abstand des "Fehler-Icons" (= Icon mit roter Hintergrundfarbe). Die CSS Befehle werden unter @media (max-width: 655px) nochmals für die mobile Darstellung mit geänderten Werten genutzt.
Alle weiteren CSS Befehle dienen zum einen der korrekten farblichen Darstellung sowie der dynamischen Ausblendung der Fehlermeldung, im Falle des Anklickens der Checkbox.

Die Icon-Positionierung kann unter Punkt 9 (9. Icon positionieren) nochmal exakter vorgenommen werden.

7. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

8. Neues Icon finden und einfügen: Separate Anleitung lesen

9. Icon positionieren: Separate Anleitung lesen




6. Fertig! :-)






Checkbox als optionales Feld einfügen



Vorabinformation
Öffnen Sie die Datei kontakt.php mit einem Editor. (Empfehlung: Notepad2)
Befolgen Sie die nachfolgenden Schritte gewissenhaft bis zum Ende.


1. Scrollen Sie zu:

// clean data


1.1 Erstellen Sie eine Zeile in dieser Form:

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

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



2. Scrollen Sie zu:

// ---- create mail-message for admin


2.1 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.



3. Scrollen Sie zu:

// ---- create mail-message for customer


3.1 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. Checkbox (als optionales Feld) im HTML Code einfügen:


Scrollen Sie in den HTML Abschnitt und fügen Sie den nachfolgenden Code an eine geeignete Stelle ein.

<!-- Checkbox Feld - Anfang -->

<div class="row">

<div class="row checkbox-row" style="background-image: url('img/border-right.png');background-position: 2.85rem center;-webkit-text-size-adjust:none;background-repeat: no-repeat;margin-bottom: 0rem;">

<div class="col-sm-8">

<label class="control-label" for="inlineCheckbox13"><i id="dataprotection-icon" class="fas fa-user-shield "></i></label>

<label class="checkbox-inline">

<input aria-label="Checkbox" type="checkbox" id="inlineCheckbox13" name="checkbox" value="akzeptiert" <?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>> <div style="padding-top:4px;padding-bottom:2px;"> <span>Beschreibung für die Checkbox als optionales Feld</span></div>

</label>

</div>

</div>

</div>

<!-- Checkbox Feld - Ende -->

Wichtige Informationen:
1. Ersetzen Sie checkbox mit dem unter "// clean data" (siehe Punkt 1.1) definierten Variablen-Namen bei den folgenden Stellen:

name="checkbox"
<?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>

2. Ersetzen Sie akzeptiert durch eine individuelle Bezeichnung bei den folgenden Stellen:

value="akzeptiert"
<?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>

Wichtig: Der Wert unter value="" und unter <?php if ($_POST['checkbox']=='') echo(' checked="checked" '); ?> muss 100% identisch sein. D.h.: Auch etwaige Leerzeichen müssen berücksichtigt werden.

Diese Bezeichnung erscheint später im Mailinhalt. Beispiel: Bei dem Checkbox Feld "Datenschutz" lautet der Mailinhalt demzufolge: Datenschutz: akzeptiert

3. Ersetzen Sie Checkbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:

aria-label="Checkbox"

4. Ersetzen Sie Beschreibung für die Checkbox als optionales Feld mit einer individuellen Beschreibung. Hinweis: Binden Sie den "Beschreibungstext" immer zwischen <span> </span> ein. Bei einem Link lassen Sie <span> </span> einfach weg.

5. Icon klickbar gestalten & Trennlinie neben dem Icon einfügen: Separate Anleitung lesen

6. Neues Icon finden und einfügen: Separate Anleitung lesen

7. Icon positionieren: Separate Anleitung lesen




5. Fertig! :-)






Neue Icons finden, Icons klickbar gestalten & Icons positionieren:

Diese Tutorials sind in den oben aufgelisteten Tutorials bereits enthalten.



Icon klickbar gestalten

Nachdem Sie das neue Input-/Selectbox-/Checkbox Feld eingefügt haben, müssen Sie im label-Element den Wert unter for (<label class="control-label" for="">) definieren. Vergeben Sie hier eine eindeutige Bezeichnung. Die identische Bezeichnung muss ebenfalls im entsprechenden Input-/Selectbox-/Checkbox Element unter id (Input Feld: <input id="" ; Selectbox: <select id="" ; Checkbox: <input id="") eingefügt werden.

Wichtig: Verwenden Sie keine Bezeichnung eines vorhandenen Feldes! Eine Bezeichnung kann immer nur für ein Feld definiert werden. Ansonsten würde bei Klick auf das Icon das urspr. Feld markiert werden.

Trennlinie neben dem Icon einfügen

Zudem müssen Sie die CSS Datei (style-kontaktformular.css) entsprechend erweitern, indem Sie vor /* style input, select and textarea with border-right.png - end */ dies einfügen:

#Bezeichnung {
background-image: url('../img/border-right.png');
background-position: 2.85rem center;
-webkit-text-size-adjust:none;
background-repeat: no-repeat;
}

Ersetzen Sie Bezeichnung mit Ihrer (individuellen) Bezeichnung, welche Sie für "for" bzw. "id" definiert haben. Wichtig: Die Raute (#) muss bestehen bleiben!

Nun sollte auch die senkrechte Trennlinie in dem entsprechenden Feld angezeigt werden!




Neues Icon finden und einfügen

Auf der Website https://fontawesome.com/icons?d=gallery können Sie über die Suchfunktion weitere Icons finden. Auf der entsprechenden Unterseite des gewünschten Icons, müssen Sie nur noch den Code im i-Element, speziell den Wert unter class="" (<i class=""></i>) kopieren.

Beispiel: Bei der Suche nach telephone finden wir u.a. das Icon unter https://fontawesome.com/icons/phone?style=solid. Nun muss der angezeigte Code <i class="fas fa-phone"></i> bzw. speziell class="fas fa-phone" kopiert werden. class="fas fa-phone" muss nun in das i-Element unseres Input-/Selectbox-/Checkbox Feldes eingefügt werden. Also:

<i id="phone-icon" class="fa fa-phone"></i>

Wichtig: id="phone-icon" muss bestehen bleiben, da "phone-icon" die CSS Klasse (bzw. die Positionierung des Icons) anspricht. Mehr dazu im nachfolgenden Punkt! (Icon positionieren)

Info: Es ist nicht notwendig das Icon herunterzuladen, da die fontawesome Bibliothek ein Bestandteil des Kontaktformulars ist.




Icon positionieren

Um ein Icon zu positionieren, müssen Sie dem i-Element eine id zuweisen.

Anhand des folgenden Beispiels (Template 1 / Advanced Version) möchten wir es verdeutlichen:

Bei dem Input Feld Betreff ist das i-Element wie folgt definiert: <i id="subject-icon" class="fa fa-edit"></i>

Beschreibung: Über class="fa fa-edit" wird das Icon eingefügt (siehe: Neues Icon finden und einfügen). Über id="subject-icon" wird der CSS Befehl für das entsprechende Icon geladen. In der Datei style-kontaktformular.css finden Sie hierzu zwei Klassen:

1. CSS Klasse:
body.safari #subject-icon{
padding-left: 1.5px; }

2. CSS Klasse:
#subject-icon{
padding-left: 1.0px; }

Beschreibung: 1. CSS Klasse
Die 1. CSS Klasse beinhaltet den CSS Befehl für den Browser Safari. Warum: Safari interpretiert den Wert unter padding-left um 0.5px kleiner, als Firefox, Chrome und Edge. Dadurch ist es notwendig, diesen Wert um 0.5px zu erhöhen. Somit wird eine einheitliche Darstellung in allen gängigen Browsern gewährleistet! (= Cross Browser Kompatibilität ✔) Hinweis: Die Positionierung der Icons (im Hinblick auf die px Werte) kann bei anderen Templates (z.B. Template 4) dennoch abweichen. Es lohnt sich hier immer etwas mit den Werten herumzuspielen.

Übrigens: Für diesen Zweck (und nur für diesen) wurde eine Javascript Useragent Weiche in das Kontaktformular (kontakt.php) eingebaut. Tipp: Über den Dienst saucelabs.com können Sie das entsprechende Template unter Safari testen. Dies funktioniert auch mit einem kostenlosen Test-Account. Ein lokaler Test mit dem »aktuellen« Safari-Browser ist unter Windows leider nicht mehr möglich. Dadurch sind Webworker leider angehalten auf Emulatoren zurückzugreifen oder sich ein MacBook anzuschaffen. :-)

Beschreibung: 2. CSS Klasse
Die 2. CSS Klasse beinhaltet den CSS Befehl für alle weiteren Browser.

Hinweis: Um eine korrekte Positionierung der Icons bei mobilen Endgeräten zu gewährleisten, müssen die oben genannten CSS Befehle nochmals unter @media (max-width: 655px) { im CSS Code (style-kontaktformular.css) eingefügt und ggf. angepasst werden.











Template I (Advanced Version) im Ausgangszustand: