Input Feld als Pflichtfeld einfügen
// clean data
$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.
// formcheck
if(!$inputfeld) {
$fehler['inputfeld'] = "<span class='errormsg'><strong>Pflichtfeld</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.
// ---- create mail-message for admin
$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.
// ---- create mail-message for customer
$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.
<!-- Input Feld - Anfang -->
<div class="row">
<div class="col-sm-4 <?php echo (isset($_POST['inputfeld']) && ''!=$_POST['inputfeld'] ? 'not-empty-field ' : ''); ?> <?php if ($fehler["inputfeld"] != "") { echo 'error'; } ?>">
<label class="control-label" for="border-right4"><i id="user-icon" class="material-icons">account_circle</i><span>Input Feld *</span></label>
<input onclick="setActive(this);" onfocus="setActive(this);" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="" value="<?php echo $_POST['inputfeld']; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right4" />
<?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"
3. Icon klickbar gestalten: Separate Anleitung lesen
4. Neues Icon finden und einfügen: Separate Anleitung lesen
5. Icon positionieren: Separate Anleitung lesen
<!-- 2 Input Felder nebeneinander - Anfang -->
<div class="row">
<!-- linkes Input Feld - Anfang -->
<div class="col-sm-4 <?php echo (isset($_POST['inputfeld']) && ''!=$_POST['inputfeld'] ? 'not-empty-field ' : ''); ?> <?php if ($fehler["inputfeld"] != "") { echo 'error'; } ?>">
<label class="control-label" for="border-right4"><i id="user-icon" class="material-icons">account_circle</i><span>Input Feld *</span></label>
<input onclick="setActive(this);" onfocus="setActive(this);" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="" 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 echo (isset($_POST['inputfeld']) && ''!=$_POST['inputfeld'] ? 'not-empty-field ' : ''); ?> <?php if ($fehler["inputfeld"] != "") { echo 'error'; } ?>">
<label class="control-label" for="border-right5"><i id="user-icon" class="material-icons">account_circle</i><span>Input Feld *</span></label>
<input onclick="setActive(this);" onfocus="setActive(this);" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> type="text" name="inputfeld" class="field" placeholder="" 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"
3. Icon klickbar gestalten: 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"
3. Icon klickbar gestalten: Separate Anleitung lesen
4. Neues Icon finden und einfügen: Separate Anleitung lesen
5. Icon positionieren: Separate Anleitung lesen
Input Feld als optionales Feld einfügen
// clean data
$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.
// ---- create mail-message for admin
$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.
// ---- create mail-message for customer
$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.
<!-- Input Feld - Anfang --> <div class="row"> <div class="col-sm-8 <?php echo (isset($_POST['inputfeld']) && ''!=$_POST['inputfeld'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right4"><i id="user-icon" class="material-icons">account_circle</i><span>Input Feld</span></label> <input onclick="setActive(this);" onfocus="setActive(this);" aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="" value="<?php echo $_POST['inputfeld']; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right4" /> </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"
3. Icon klickbar gestalten: Separate Anleitung lesen
4. Neues Icon finden und einfügen: Separate Anleitung lesen
5. Icon positionieren: Separate Anleitung lesen
<!-- 2 Input Felder nebeneinander - Anfang --> <div class="row"> <!-- linkes Input Feld - Anfang --> <div class="col-sm-4 <?php echo (isset($_POST['inputfeld']) && ''!=$_POST['inputfeld'] ? 'not-empty-field ' : ''); ?> "> <label class="control-label" for="border-right4"><i id="user-icon" class="material-icons">account_circle</i><span>Input Feld</span></label> <input onclick="setActive(this);" onfocus="setActive(this);" aria-label="Input Feld" type="text" name="inputfeld" class="field" placeholder="" 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 <?php echo (isset($_POST['inputfeld']) && ''!=$_POST['inputfeld'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right7"><i id="user-icon" class="material-icons">account_circle</i><span>Input Feld</span></label> <input onclick="setActive(this);" onfocus="setActive(this);" aria-label="Telefon" type="text" name="inputfeld" class="field" placeholder="" value="<?php echo $_POST['inputfeld']; ?>" maxlength="<?php echo $zeichenlaenge_inputfeld; ?>" id="border-right7" /> </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"
3. Icon klickbar gestalten: 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"
3. Icon klickbar gestalten: Separate Anleitung lesen
4. Neues Icon finden und einfügen: Separate Anleitung lesen
5. Icon positionieren: Separate Anleitung lesen
Selectbox als Pflichtfeld einfügen
// clean data
$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.
// formcheck
if(isset($selectbox) && $selectbox == "") {
$fehler['selectbox'] = "<span class='errormsg'><strong>Pflichtfeld</strong></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.
// ---- create mail-message for admin
$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.
// ---- create mail-message for customer
$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.
<!-- Selectbox Feld - Anfang -->
<div class="row">
<div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?> <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?>">
<label class="control-label select-label" for="border-right2" style="z-index: 1;" ><i id="dropdown-icon" class="material-icons">arrow_drop_down</i><span>Selectbox *</span></label>
<input autocomplete="off" onclick="setActive(this);" onfocus="setActive(this);" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Selectbox" type="text" name="selectbox" class="field select-input readonly" placeholder="" value="<?php echo $_POST['selectbox']; ?>" id="border-right2" />
<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>
<ul class="select-box">
<li class="placeholder">Selectbox</li>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<i id="dropdown-icon-without-icons" class="material-icons keyboard_arrow_down" onclick="setActive(document.getElementById('border-right2'));">keyboard_arrow_down</i>
</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"
value="<?php echo $_POST['selectbox']; ?>"
2. Ersetzen Sie jeweils Option 1, Option 2 ... durch Ihre Vorgaben:
<li>Option 1</li>
<li>Option 2</li>
3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:
aria-label="Selectbox"
<span>Selectbox *</span>
<li class="placeholder">Selectbox</li>
4. Icon klickbar gestalten: Separate Anleitung lesen
5. Neues Icon finden und einfügen: Separate Anleitung lesen
6. Icon positionieren: Separate Anleitung lesen
<!-- 2 Selectbox Felder nebeneinander - Anfang -->
<div class="row">
<!-- linkes Selectbox Feld - Anfang -->
<div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?> <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?>">
<label class="control-label select-label" for="border-right2" style="z-index: 1;" ><i id="dropdown-icon" class="material-icons">arrow_drop_down</i><span>Selectbox *</span></label>
<input autocomplete="off" onclick="setActive(this);" onfocus="setActive(this);" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Selectbox" type="text" name="selectbox" class="field select-input readonly" placeholder="" value="<?php echo $_POST['selectbox']; ?>" id="border-right2" />
<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>
<ul class="select-box">
<li class="placeholder">Selectbox</li>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<i id="dropdown-icon-without-icons" class="material-icons keyboard_arrow_down" onclick="setActive(document.getElementById('border-right2'));">keyboard_arrow_down</i>
</div>
<!-- linkes Selectbox Feld - Ende -->
<!-- rechtes Selectbox Feld - Anfang -->
<div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?> <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?>">
<label class="control-label select-label" for="border-right2" style="z-index: 1;" ><i id="dropdown-icon" class="material-icons">arrow_drop_down</i><span>Selectbox *</span></label>
<input autocomplete="off" onclick="setActive(this);" onfocus="setActive(this);" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Selectbox" type="text" name="selectbox" class="field select-input readonly" placeholder="" value="<?php echo $_POST['selectbox']; ?>" id="border-right2" />
<?php if ($fehler["selectbox"] != "") { echo $fehler["selectbox"]; } ?>
<ul class="select-box">
<li class="placeholder">Selectbox</li>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<i id="dropdown-icon-without-icons" class="material-icons keyboard_arrow_down" onclick="setActive(document.getElementById('border-right2'));">keyboard_arrow_down</i>
</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"
value="<?php echo $_POST['selectbox']; ?>"
2. Ersetzen Sie jeweils Option 1, Option 2 ... durch Ihre Vorgaben:
<li>Option 1</li>
<li>Option 2</li>
3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:
aria-label="Selectbox"
<span>Selectbox *</span>
<li class="placeholder">Selectbox</li>
4. Icon klickbar gestalten: 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"
value="<?php echo $_POST['selectbox']; ?>"
2. Ersetzen Sie jeweils Option 1, Option 2 ... durch Ihre Vorgaben:
<li>Option 1</li>
<li>Option 2</li>
3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:
aria-label="Selectbox"
<span>Selectbox *</span>
<li class="placeholder">Selectbox</li>
4. Icon klickbar gestalten: Separate Anleitung lesen
5. Neues Icon finden und einfügen: Separate Anleitung lesen
6. Icon positionieren: Separate Anleitung lesen
Selectbox als optionales Feld einfügen
// clean data
$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.
// ---- create mail-message for admin
$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.
// ---- create mail-message for customer
$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.
<!-- Selectbox Feld - Anfang -->
<div class="row">
<div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>">
<label class="control-label select-label" for="border-right3" style="z-index: 1;" ><i id="dropdown-icon" class="material-icons">arrow_drop_down</i><span>Selectbox</span></label>
<input onclick="setActive(this);" onfocus="setActive(this);" aria-label="Selectbox" type="text" name="selectbox" class="field select-input readonly" placeholder="" value="<?php echo $_POST['selectbox']; ?>" id="border-right3" />
<ul class="select-box">
<li class="placeholder">Selectbox</li>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<i id="dropdown-icon-without-icons" class="material-icons keyboard_arrow_down" onclick="setActive(document.getElementById('border-right3'));">keyboard_arrow_down</i>
</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"
value="<?php echo $_POST['selectbox']; ?>"
2. Ersetzen Sie jeweils Option 1, Option 2 ... durch Ihre Vorgaben:
<li>Option 1</li>
<li>Option 2</li>
3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:
aria-label="Selectbox"
<span>Selectbox</span>
<li class="placeholder">Selectbox</li>
4. Icon klickbar gestalten: Separate Anleitung lesen
5. Neues Icon finden und einfügen: Separate Anleitung lesen
6. Icon positionieren: Separate Anleitung lesen
<!-- 2 Selectbox Felder nebeneinander - Anfang -->
<div class="row">
<!-- linkes Selectbox Feld - Anfang -->
<div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>">
<label class="control-label select-label" for="border-right3" style="z-index: 1;" ><i id="dropdown-icon" class="material-icons">arrow_drop_down</i><span>Selectbox</span></label>
<input onclick="setActive(this);" onfocus="setActive(this);" aria-label="Selectbox" type="text" name="selectbox" class="field select-input readonly" placeholder="" value="<?php echo $_POST['selectbox']; ?>" id="border-right3" />
<ul class="select-box">
<li class="placeholder">Selectbox</li>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<i id="dropdown-icon-without-icons" class="material-icons keyboard_arrow_down" onclick="setActive(document.getElementById('border-right3'));">keyboard_arrow_down</i>
</div>
<!-- linkes Selectbox Feld - Ende -->
<!-- rechtes Selectbox Feld - Anfang -->
<div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>">
<label class="control-label select-label" for="border-right3" style="z-index: 1;" ><i id="dropdown-icon" class="material-icons">arrow_drop_down</i><span>Selectbox</span></label>
<input onclick="setActive(this);" onfocus="setActive(this);" aria-label="Selectbox" type="text" name="selectbox" class="field select-input readonly" placeholder="" value="<?php echo $_POST['selectbox']; ?>" id="border-right3" />
<ul class="select-box">
<li class="placeholder">Selectbox</li>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<i id="dropdown-icon-without-icons" class="material-icons keyboard_arrow_down" onclick="setActive(document.getElementById('border-right3'));">keyboard_arrow_down</i>
</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"
value="<?php echo $_POST['selectbox']; ?>"
2. Ersetzen Sie jeweils Option 1, Option 2 ... durch Ihre Vorgaben:
<li>Option 1</li>
<li>Option 2</li>
3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:
aria-label="Selectbox"
<span>Selectbox</span>
<li class="placeholder">Selectbox</li>
4. Icon klickbar gestalten: 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"
value="<?php echo $_POST['selectbox']; ?>"
2. Ersetzen Sie jeweils Option 1, Option 2 ... durch Ihre Vorgaben:
<li>Option 1</li>
<li>Option 2</li>
3. Ersetzen Sie Selectbox mit der gewünschten Feld-Beschreibung bei den folgenden Stellen:
aria-label="Selectbox"
<span>Selectbox</span>
<li class="placeholder">Selectbox</li>
4. Icon klickbar gestalten: Separate Anleitung lesen
5. Neues Icon finden und einfügen: Separate Anleitung lesen
6. Icon positionieren: Separate Anleitung lesen
Checkbox als Pflichtfeld einfügen
// clean data
$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.
// formcheck
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.
// ---- create mail-message for admin
$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.
// ---- create mail-message for customer
$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.
<!-- Checkbox Feld - Anfang -->
<div class="row checkbox-row <?php if ($fehler["checkbox"] != "") { echo 'error_container'; } ?>">
<div class="col-sm-8 <?php if ($fehler["checkbox"] != "") { echo 'error'; } ?>">
<label for="INDIVIDUELLE_ID" class="checkbox-inline">
<i id="dataprotection-icon" class="material-icons material-icons-pos1">security</i>
<i id="EINMALIGE_BEZEICHNUNG" class="material-icons material-icons-pos2 <?php echo ($_POST['checkbox']=='akzeptiert' ? 'checked' : ''); ?>"><?php echo ($_POST['checkbox']=='akzeptiert' ? 'check_box' : 'check_box_outline_blank'); ?></i>
<input style="position:absolute; opacity:0; height:1px; -webkit-appearance:revert; -moz-appearance:revert; appearance:revert; top:27px; <?php echo ($cfg['Icons_aktivieren'] ? 'left:55px;' : ''); ?>" type="checkbox" onclick="document.getElementById('EINMALIGE_BEZEICHNUNG').innerHTML = (this.checked ? 'check_box' : 'check_box_outline_blank'); (this.checked ? document.getElementById('EINMALIGE_BEZEICHNUNG').classList.add('checked') : document.getElementById('EINMALIGE_BEZEICHNUNG').classList.remove('checked'));" <?php if($cfg['HTML5_FEHLERMELDUNGEN']) { ?> required <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Checkbox" id="INDIVIDUELLE_ID" name="checkbox" value="akzeptiert" <?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>><div> <span>Beschreibung für die Checkbox als Pflichtfeld *</span></div>
</label>
<?php if ($fehler["checkbox"] != "") { echo $fehler["checkbox"]; } ?>
</div>
</div>
<div class="CHECKBOX_MARGIN_BOTTOM"></div>
<style>
.kontaktformular #INDIVIDUELLE_ID{
position:absolute;
opacity:0;
height:1px;
-webkit-appearance:revert;
-moz-appearance:revert;
appearance:revert;
top:27px;
}
body.safari .kontaktformular #INDIVIDUELLE_ID{
top: 3px;
}
.CHECKBOX_MARGIN_BOTTOM{
margin-bottom:13px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:13px;
}
@media (max-width: 655px)
{
.CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
}
</style>
<!-- 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:
$fehler["checkbox"] (kommt 4x vor)
name="checkbox"
<?php echo ($_POST['checkbox']=='akzeptiert' ? 'check_box' : 'check_box_outline_blank'); ?>
<?php echo ($_POST['checkbox']=='akzeptiert' ? 'checked' : ''); ?>
<?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.1 Ersetzen Sie EINMALIGE_BEZEICHNUNG (kommt 4x vor) mit einer individuellen Bezeichnung. Wichtig: Sofern Sie weitere Checkboxen in das Kontaktformular einfügen möchten, müssen Sie diese Bezeichnung jeweils (individuell) ändern.
4.2 Ersetzen Sie INDIVIDUELLE_ID (kommt 2x zw. <div> </div> vor und 2x zw. <style> </style>) mit einer individuellen Bezeichnung. Wichtig: Sofern Sie weitere Checkboxen in das Kontaktformular einfügen möchten, müssen Sie diese Bezeichnung jeweils (individuell) ändern.
5. 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.
6. Warum gibt es internes Stylesheet? Der Code beinhaltet internes Stylesheet, um den Abstand nach unten ggf. zu vergrößern bzw. zu verkleinern. Auch dient der CSS Code dazu, eine HTML5 Fehlermeldung für die Checkbox zu generieren. (sofern diese nicht angeklickt wird)
Informationen zum Stylesheet:
<style>
.CHECKBOX_MARGIN_BOTTOM{
margin-bottom:13px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:13px;
}
@media (max-width: 655px)
{
.CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
}
</style>
Beschreibung: Der CSS Befehl margin-bottom definiert den Abstand zum nächsten Feld. 13px in der Desktop-Version und -10px in der Mobile-Version. Über die (jeweilige) CSS Klasse "body.safari" kann margin-bottom für den Safari Browser definiert werden.
7. Icon klickbar gestalten: Separate Anleitung lesen
8. Neues Icon finden und einfügen: Separate Anleitung lesen
9. Icon positionieren: Separate Anleitung lesen
Checkbox als optionales Feld einfügen
// clean data
$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.
// ---- create mail-message for admin
$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.
// ---- create mail-message for customer
$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.
<!-- Checkbox Feld - Anfang -->
<div class="row checkbox-row ">
<div class="col-sm-8 ">
<label for="INDIVIDUELLE_ID" class="checkbox-inline">
<i id="dataprotection-icon" class="material-icons material-icons-pos1">security</i>
<i id="EINMALIGE_BEZEICHNUNG" class="material-icons material-icons-pos2 <?php echo ($_POST['checkbox']=='akzeptiert' ? 'checked' : ''); ?>"><?php echo ($_POST['checkbox']=='akzeptiert' ? 'check_box' : 'check_box_outline_blank'); ?></i>
<input style="display: none;" type="checkbox" onclick="document.getElementById('EINMALIGE_BEZEICHNUNG').innerHTML = (this.checked ? 'check_box' : 'check_box_outline_blank'); (this.checked ? document.getElementById('EINMALIGE_BEZEICHNUNG').classList.add('checked') : document.getElementById('EINMALIGE_BEZEICHNUNG').classList.remove('checked'));" aria-label="Checkbox" id="INDIVIDUELLE_ID" name="checkbox" value="akzeptiert" <?php if ($_POST['checkbox']=='akzeptiert') echo(' checked="checked" '); ?>><div> <span>Beschreibung für die Checkbox als optionales Feld</span></div>
</label>
</div>
</div>
<div class="CHECKBOX_MARGIN_BOTTOM"></div>
<style>
.CHECKBOX_MARGIN_BOTTOM{
margin-bottom:13px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:13px;
}
@media (max-width: 655px)
{
.CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
}
</style>
<!-- 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 echo ($_POST['checkbox']=='akzeptiert' ? 'check_box' : 'check_box_outline_blank'); ?>
<?php echo ($_POST['checkbox']=='akzeptiert' ? 'checked' : ''); ?>
<?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.1 Ersetzen Sie EINMALIGE_BEZEICHNUNG (kommt 4x vor) mit einer individuellen Bezeichnung. Wichtig: Sofern Sie weitere Checkboxen in das Kontaktformular einfügen möchten, müssen Sie diese Bezeichnung jeweils (individuell) ändern.
4.2 Ersetzen Sie INDIVIDUELLE_ID (kommt 2x vor) mit einer individuellen Bezeichnung. Wichtig: Sofern Sie weitere Checkboxen in das Kontaktformular einfügen möchten, müssen Sie diese Bezeichnung jeweils (individuell) ändern.
5. 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.
6. Warum gibt es internes Stylesheet? Der Code beinhaltet internes Stylesheet, um den Abstand nach unten ggf. zu vergrößern bzw. zu verkleinern.
Informationen zum Stylesheet:
<style>
.CHECKBOX_MARGIN_BOTTOM{
margin-bottom:13px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:13px;
}
@media (max-width: 655px)
{
.CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
body.safari .CHECKBOX_BOTTOM{
margin-bottom:-10px;
}
}
</style>
Beschreibung: Der CSS Befehl margin-bottom definiert den Abstand zum nächsten Feld. 13px in der Desktop-Version und -10px in der Mobile-Version. Über die (jeweilige) CSS Klasse "body.safari" kann margin-bottom für den Safari Browser definiert werden.
7. Icon klickbar gestalten: Separate Anleitung lesen
6. Neues Icon finden und einfügen: Separate Anleitung lesen
7. Icon positionieren: Separate Anleitung lesen
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.
Neues Icon finden und einfügen
Auf der Website https://material.io/resources/icons/?style=baseline können Sie über die Suchfunktion (linke Spalte: "Filter by name") weitere Icons finden. Nachdem Sie auf das gewünschte Icon geklickt haben, klicken Sie links auf "Selected Icon". Kopieren Sie nun die entsprechende Bezeichnung (rechts neben dem Icon) und fügen Sie diese zwischen <i> und </i> ein.
Beispiel: Bei der Suche nach phone finden wir u.a. das Icon unter https://material.io/resources/icons/?search=phone&icon=call&style=baseline. Nun muss die Bezeichnung call lediglich kopiert und zwischen <i> und </i> eingefügt werden. Also:
<i id="phone-icon" class="material-icons">call</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 Google Material Icons ein Bestandteil des Kontaktformulars sind.
Icon positionieren
Um ein Icon zu positionieren, müssen Sie dem i-Element eine id zuweisen. Anhand des folgenden Beispiels möchten wir es verdeutlichen: Bei dem Input Feld Betreff ist das i-Element wie folgt definiert: <i id="subject-icon" class="material-icons">edit</i>
Beschreibung: Über class="material-icons" und über edit wird das Icon eingefügt. Über id="subject-icon" wird der CSS Befehl für das Icon geladen. In der Datei style-kontaktformular.css finden Sie hierzu zwei Klassen:
1. CSS Klasse:
#subject-icon{
padding-top: 1px;
padding-left:2px;
font-size:25px;
}
2. CSS Klasse:
body.safari .kontaktformular .row #subject-icon{
margin-top: -4px;
font-size:25px;
}
Beschreibung: 1. CSS Klasse
Die erste CSS Klasse beinhaltet den CSS Befehl für alle bekannten Browser (Chrome/Edge/Firefox), außer Safari.
Beschreibung: 2. CSS Klasse
Die zweite CSS Klasse beinhaltet den CSS Befehl für den Browser Safari. Warum: Safari interpretiert die Werte anders, als die populären Browser. Durch die separate CSS Klasse wird auch in Safari eine einheitliche Darstellung gewährleistet! (= Cross Browser Kompatibilität ✔) Übrigens: Diese spezielle CSS Klasse wird über eine Useragent Weiche in der kontakt.php angesprochen. Tipp: Über den Dienst saucelabs.com können Sie das entsprechende Template unter dem aktuellen Safari testen. Dies funktioniert auch mit einem kostenlosen Test-Account. Ein lokaler Test des Safari-Browsers ist unter Windows leider nicht mehr möglich. Der Sinn und Zweck von Emulatoren wird dadurch aufgewertet. ;-)
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.
Hintergrundfarbe ändern
Ein Tipp vorab: Installieren Sie das Tool Pixie, um den HTML Farbcode Ihrer gewünschten Farbe zu ermitteln. Nachdem Sie das Tool geöffnet haben, "überfahren" Sie mit der Maus die gewünschte Farbe. Anschließend sehen Sie in dem Tool unter "HTML" den entsprechenden Farbcode. Diesen können Sie (unter Windows) nun einfach mit STRG+ALT+C kopieren.
Öffnen Sie die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und suchen Sie nach:
Hier können Sie den HTML Farbcode FFFFFF ändern. Wenn Sie den Hintergrund transparent setzen möchten, so tragen Sie statt einem Farbcode den Wert "transparent" ein. Also: background-color: transparent;
Buttonfarbe ändern
Ein Tipp vorab: Installieren Sie das Tool Pixie, um den HTML Farbcode Ihrer gewünschten Farbe zu ermitteln. Nachdem Sie das Tool geöffnet haben, "überfahren" Sie mit der Maus die gewünschte Farbe. Anschließend sehen Sie in dem Tool unter "HTML" den entsprechenden Farbcode. Diesen können Sie (unter Windows) nun einfach mit STRG+ALT+C kopieren.
Öffnen Sie die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und suchen Sie nach:
Hier können Sie den HTML Farbcode 26a69a ändern. Wichtig: Die Raute (#) muss bestehen bleiben.
Iconfarbe ändern
Ein Tipp vorab: Installieren Sie das Tool Pixie, um den HTML Farbcode Ihrer gewünschten Farbe zu ermitteln. Nachdem Sie das Tool geöffnet haben, "überfahren" Sie mit der Maus die gewünschte Farbe. Anschließend sehen Sie in dem Tool unter "HTML" den entsprechenden Farbcode. Diesen können Sie (unter Windows) nun einfach mit STRG+ALT+C kopieren.
Um die Farbe der Icons zu ändern, öffnen Sie zunächst die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und fügen Sie nach /* style common labels */ die folgenden CSS Befehle ein, um die Icons bspw. rot zu färben:
Um die "Focus-Farbe" (Klick auf das Icon) zu ändern, müssen Sie die Farbcodes bei den folgenden CSS Befehlen ändern:
Um die "Visited-Farbe" (Farbe nach dem Ausfüllen des Feldes) zu ändern, müssen Sie die Farbcodes bei den folgenden CSS Befehlen ändern:
Sie können rgba(0,0,0,0.87) auch durch einen HTML Farbcode ersetzen. Zum Beispiel: #ff0000
Farbe des Platzhalters ("Placeholder") ändern
Ein Tipp vorab: Installieren Sie das Tool Pixie, um den HTML Farbcode Ihrer gewünschten Farbe zu ermitteln. Nachdem Sie das Tool geöffnet haben, "überfahren" Sie mit der Maus die gewünschte Farbe. Anschließend sehen Sie in dem Tool unter "HTML" den entsprechenden Farbcode. Diesen können Sie (unter Windows) nun einfach mit STRG+ALT+C kopieren.
Um die Farbe des Platzhalters zu ändern, öffnen Sie zunächst die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und suchen Sie nach:
Hier können Sie den Farbcode grey ändern. Info: Sie können diesen auch durch einen HTML Farbcode ersetzen. Zum Beispiel: #ff0000
Farbe der Feldbeschreibung ändern
Ein Tipp vorab: Installieren Sie das Tool Pixie, um den HTML Farbcode Ihrer gewünschten Farbe zu ermitteln. Nachdem Sie das Tool geöffnet haben, "überfahren" Sie mit der Maus die gewünschte Farbe. Anschließend sehen Sie in dem Tool unter "HTML" den entsprechenden Farbcode. Diesen können Sie (unter Windows) nun einfach mit STRG+ALT+C kopieren.
Öffnen Sie die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und suchen Sie nach:
Hier können Sie den HTML Farbcode 26a69a ändern. Wichtig: Die Raute (#) muss bestehen bleiben.
Um die "Visited-Farbe" (Farbe nach dem Ausfüllen des Feldes) zu ändern, müssen Sie die folgenden CSS Befehle vor .kontaktformular .row .active-field .control-label span{ einfügen:
Hier können Sie den HTML Farbcode anpassen. (zum Beispiel: #ff0000 für rot)
Farbe der "Linie" (= Eingabefeld) ändern.
Ein Tipp vorab: Installieren Sie das Tool Pixie, um den HTML Farbcode Ihrer gewünschten Farbe zu ermitteln. Nachdem Sie das Tool geöffnet haben, "überfahren" Sie mit der Maus die gewünschte Farbe. Anschließend sehen Sie in dem Tool unter "HTML" den entsprechenden Farbcode. Diesen können Sie (unter Windows) nun einfach mit STRG+ALT+C kopieren.
Öffnen Sie die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und fügen Sie vor .kontaktformular .row .field:focus, diese CSS Klasse ein:
Hier können Sie den Farbcode (Beispiel: #ff0000) anpassen.
Um die "Focus-Farbe" (Klick auf die "Linie") zu ändern, müssen Sie den Farbcode bei der folgenden CSS Klasse ändern:
Um die "Visited-Farbe" (Farbe nach dem Ausfüllen der "Linie") zu ändern, fügen Sie die folgende CSS Klasse vor .kontaktformular .row .field:focus, ein:
Hier können Sie den Farbcode (Beispiel: #000000) anpassen.
Breite anpassen
Öffnen Sie die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und suchen Sie nach:
Hier können Sie die Breite (width: 520px;) ändern. Hinweis: Da unser Kontaktformular ein Responsive Design besitzt, passt sich die Breite bei einer niedrigen Auflösung (Smartphones, Tablets) automatisch an. (max-width: 655px)
Formular zentrieren
Das Kontaktformular kann mit dem CSS Flexbox-Modell zentriert werden. Öffnen Sie die Datei style-kontaktformular.css mit einem Editor (Empfehlung Windows: Notepad2; Empfehlung MacOS: Brackets) und fügen Sie innerhalb von body { } diesen Code ein:
Befolgen Sie außerdem die nachfolgenden Schritte:
1. Ersetzen Sie padding: 30px 25px 20px 25px; (zwischen body {}) mit:
padding: 30px 25px 20px 0px;
2. Fügen Sie nach @media (max-width: 655px) { diese CSS Klasse ein:
body {
padding: 30px 15px 20px 0px;
}