Made with HTML, CSS, JavaScript & PHP - Fully customizable
Insert input field as mandatory field
// clean data
$inputfield = stripslashes($_POST["inputfield"]);
Description:
Replace "inputfield" (appears 2 times) with a variable name of your preference. You will need the name of the variable in the steps below.
// formcheck
if(!$inputfield) { $fehler['inputfield'] = "<span class='errormsg'>Error message for <strong>input field</strong>.</span>"; }
Description:
1. Replace "inputfield" (appears 2 times) with the variable name defined in "// clean data".
2. Replace "Error message for <strong>input field</strong>." with an error message of your choice.
// ---- create mail-message for admin
$mailcontent .= "New input field: " . $inputfield . "\n";
Description:
1. Replace "inputfield" with the variable name defined in "// clean data".
2. Replace "New input field:" with your description.
// ---- create mail-message for customer
$mailcontent .= "New input field: " . $inputfield . "\n";
Description:
1. Replace "inputfield" with the variable name defined in "// clean data".
2. Replace "New input field:" with your description.
<!-- Input field - start --> <div class="row"> <div class="col-sm-8 <?php if ($fehler["inputfield"] != "") { echo 'error'; } ?> <?php echo (isset($_POST['inputfield']) && ''!=$_POST['inputfield'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right5"><i id="subject-icon" class="fa fa-edit"></i></label> <input <?php if($cfg['HTML5_error_messages']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Input field" type="text" name="inputfield" class="field" placeholder="Input field *" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" id="border-right5" onclick="setActive(this);" onfocus="setActive(this);"/> <?php if ($fehler["inputfield"] != "") { echo $fehler["inputfield"]; } ?> </div> </div> <!-- Input field - end -->
Important information:
1. Replace inputfield with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["inputfield"] (appears 3 times)
name="inputfield"
value="<?php echo $_POST['inputfield']; ?>"
isset($_POST['inputfield']) && ''!=$_POST['inputfield']
maxlength="<?php echo $number_of_characters_inputfield; ?>"
You can then insert the variable $number_of_characters_inputfield in the config.php file in // Define maximum number of characters per field //. This also allows you to define the number of characters allowed in the corresponding field.
2. Replace Input field with a field description of your choice in the following places:
aria-label="Input field"
placeholder="Input field *"
3. Make the icon clickable and insert a dividing line next to it: Read separate instructions
4. Find and insert new icon: Read separate instructions
5. Position the icon: Read separate instructions
<!-- 2 input fields side by side - start--> <div class="row"> <!-- left input field - start --> <div class="col-sm-4 <?php if ($fehler["inputfield"] != "") { echo 'error'; } ?> <?php echo (isset($_POST['inputfield']) && ''!=$_POST['inputfield'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right4"><i id="user-icon" class="fa fa-user"></i></label> <input <?php if($cfg['HTML5_error_messages']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField(this)" <?php } ?> aria-label="Input field" type="text" name="inputfield" class="field" placeholder="Input field *" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" id="border-right4" onclick="setActive(this);" onfocus="setActive(this);"/> <?php if ($fehler["inputfield"] != "") { echo $fehler["inputfield"]; } ?> </div> <!-- left input field - end --> <!-- right input field - start --> <div class="col-sm-4 <?php if ($fehler["inputfield"] != "") { echo 'error'; } ?> <?php echo (isset($_POST['inputfield']) && ''!=$_POST['inputfield'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right5"><i id="user-icon" class="fa fa-user"></i></label> <input <?php if($cfg['HTML5_error_messages']) { ?> required style="box-shadow: 0 0 1px rgba(0,0,0, .4);" <?php }else{ ?> onchange="checkField(this)" <?php } ?> type="text" name="inputfield" class="field" placeholder="Input field *" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" id="border-right5" onclick="setActive(this);" onfocus="setActive(this);"/> <?php if ($fehler["inputfield"] != "") { echo $fehler["inputfield"]; } ?> </div> <!-- right input field - end --> </div> <!-- 2 input fields side by side - end-->
Important information
Code between <!-- left input field - start --> and <!-- left input field - end -->:
1. Replace inputfield with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["inputfield"] (appears 3 times)
name="inputfield"
value="<?php echo $_POST['inputfield']; ?>"
isset($_POST['inputfield']) && ''!=$_POST['inputfield']
maxlength="<?php echo $number_of_characters_inputfield; ?>"
You can then insert the variable $number_of_characters_inputfield in the config.php file in // Define maximum number of characters per field //. This also allows you to define the number of characters allowed in the corresponding field.
2. Replace Input field with a field description of your choice in the following places:
aria-label="Input field"
placeholder="Input field *"
3. Make the icon clickable and insert a dividing line next to it: Read separate instructions
4. Find and insert new icon: Read separate instructions
5. Position the icon: Read separate instructions
Important information
Code between <!-- right input field - start --> and <!-- right input field - end -->:
Before you start: Since this is a new input field, you have to repeat steps 1 to 4.1 and assign a new variable (with a new variable name) to the field.
1. Replace inputfield with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["inputfield"] (appears 3 times)
name="inputfield"
value="<?php echo $_POST['inputfield']; ?>"
isset($_POST['inputfield']) && ''!=$_POST['inputfield']
maxlength="<?php echo $number_of_characters_inputfield; ?>"
You can then insert the variable $number_of_characters_inputfield in the config.php file in // Define maximum number of characters per field //. This also allows you to define the number of characters allowed in the corresponding field.
2. Replace Input field with a field description of your choice in the following places:
aria-label="Input field"
placeholder="Input field *"
3. Make the icon clickable and insert a dividing line next to it: Read separate instructions
4. Find and insert new icon: Read separate instructions
5. Position the icon: Read separate instructions
Insert input field as an optional field
// clean data
$inputfield = stripslashes($_POST["inputfield"]);
Description:
Replace "inputfield" (appears 2 times) with a variable name of your preference. You will need the name of the variable in the steps below.
// ---- create mail-message for admin
$mailcontent .= "New input field: " . $inputfield . "\n";
Description:
1. Replace "inputfield" with the variable name defined in "// clean data".
2. Replace "New input field:" with your description.
// ---- create mail-message for customer
$mailcontent .= "New input field: " . $inputfield . "\n";
Description:
1. Replace "inputfield" with the variable name defined in "// clean data".
2. Replace "New input field:" with your description.
<!-- Input field - start --> <div class="row"> <div class="col-sm-8 <?php echo (isset($_POST['inputfield']) && ''!=$_POST['inputfield'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right5"><i id="subject-icon" class="fa fa-edit"></i></label> <input aria-label="Input field" type="text" name="inputfield" class="field" placeholder="Input field" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" id="border-right5" onclick="setActive(this);" onfocus="setActive(this);"/> </div> </div> <!-- Input field - end -->
Important information:
1. Replace inputfield with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="inputfield"
value="<?php echo $_POST['inputfield']; ?>"
isset($_POST['inputfield']) && ''!=$_POST['inputfield']
maxlength="<?php echo $number_of_characters_inputfield; ?>"
You can then insert the variable $number_of_characters_inputfield in the config.php file in // Define maximum number of characters per field //. This also allows you to define the number of characters allowed in the corresponding field.
2. Replace Input field with a field description of your choice in the following places:
aria-label="Input field"
placeholder="Input field"
3. Make the icon clickable and insert a dividing line next to it: Read separate instructions
4. Find and insert new icon: Read separate instructions
5. Position the icon: Read separate instructions
<!-- 2 input fields side by side - start--> <div class="row"> <!-- left input field - start --> <div class="col-sm-4 <?php echo (isset($_POST['inputfield']) && ''!=$_POST['inputfield'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right4"><i id="user-icon" class="fa fa-user"></i></label> <input aria-label="Input field" type="text" name="inputfield" class="field" placeholder="Input field" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" id="border-right4" onclick="setActive(this);" onfocus="setActive(this);"/> </div> <!-- left input field - end --> <!-- right input field - start --> <div class="col-sm-4 <?php echo (isset($_POST['inputfield']) && ''!=$_POST['inputfield'] ? 'not-empty-field ' : ''); ?>"> <label class="control-label" for="border-right5"><i id="user-icon" class="fa fa-user"></i></label> <input type="text" name="inputfield" class="field" placeholder="Input field" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" id="border-right5" onclick="setActive(this);" onfocus="setActive(this);"/> </div> <!-- right input field - end --> </div> <!-- 2 input fields side by side - end-->
Important information
Code between <!-- left input field - start --> and <!-- left input field - end -->:
1. Replace inputfield with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="inputfield"
value="<?php echo $_POST['inputfield']; ?>"
isset($_POST['inputfield']) && ''!=$_POST['inputfield']
maxlength="<?php echo $number_of_characters_inputfield; ?>"
You can then insert the variable $number_of_characters_inputfield in the config.php file in // Define maximum number of characters per field //. This also allows you to define the number of characters allowed in the corresponding field.
2. Replace Input field with a field description of your choice in the following places:
aria-label="Input field"
placeholder="Input field"
3. Make the icon clickable and insert a dividing line next to it: Read separate instructions
4. Find and insert new icon: Read separate instructions
5. Position the icon: Read separate instructions
Important information
Code between <!-- right input field - start --> and <!-- right input field - end -->:
Before you start: Since this is a new input field, you have to repeat steps 1 to 3.1 and assign a new variable (with a new variable name) to the field.
1. Replace inputfield with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="inputfield"
value="<?php echo $_POST['inputfield']; ?>"
isset($_POST['inputfield']) && ''!=$_POST['inputfield']
maxlength="<?php echo $number_of_characters_inputfield; ?>"
You can then insert the variable $number_of_characters_inputfield in the config.php file in // Define maximum number of characters per field //. This also allows you to define the number of characters allowed in the corresponding field.
2. Replace Input field with a field description of your choice in the following places:
aria-label="Input field"
placeholder="Input field"
3. Make the icon clickable and insert a dividing line next to it: Read separate instructions
4. Find and insert new icon: Read separate instructions
5. Position the icon: Read separate instructions
Insert a selectbox as a mandatory field
// clean data
$selectbox = stripslashes($_POST["selectbox"]);
Description:
Replace "selectbox" (appears 2 times) with a variable name of your preference. You will need the name of the variable in the steps below.
// formcheck
if(isset($selectbox) && $selectbox == "") { $fehler['selectbox'] = "<span class='errormsg'>Please choose an <strong>option</strong>.</span>"; }
Description:
1. Replace "selectbox" (appears 3 times) with the variable name defined in "// clean data".
2. Replace "Please choose an <strong>option</strong>." with an error message of your choice.
// ---- create mail-message for admin
$mailcontent .= "New selectbox: " . $selectbox . "\n";
Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.
// ---- create mail-message for customer
$mailcontent .= "New selectbox: " . $selectbox . "\n";
Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.
<!-- Selectbox field - start --> <div class="row"> <div class="col-sm-4 <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?> <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>" > <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_error_messages']) { ?> 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_error_messages']) { ?> checkField(this); <?php } ?>if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }" onclick="setActive(this);" onfocus="setActive(this);"> <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 field - end -->
Important information:
1. Replace selectbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["selectbox"] (appears 3 times)
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
isset($_POST['selectbox']) && ''!=$_POST['selectbox']
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
2. Replace option 1, option 2, option 3 ... with your options:
<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>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any. The (visible) text in <option>Option 1</option>, however, can be different.
Make sure that the space (highlighted in red below) remains within the quotation marks of value=" " (e.g., value="Option 1 "). The same applies to: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> This is why we need the space: Inserting the space is always a good idea if you want a space in the e-mail.
3. Replace Selectbox with a field description of your choice in the following places:
aria-label="Selectbox"
<option value="" selected >Selectbox *</option>
4. Make the icon clickable and insert a dividing line next to it: Read separate instructions
5. Find and insert new icon: Read separate instructions
6. Position the icon: Read separate instructions
<!-- 2 selectbox fields side by side - start--> <div class="row"> <!-- left selectbox field - start --> <div class="col-sm-4 <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?> <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>" > <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_error_messages']) { ?> 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_error_messages']) { ?> checkField(this); <?php } ?>if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }" onclick="setActive(this);" onfocus="setActive(this);"> <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> <!-- left selectbox field - end --> <!-- right selectbox field - start --> <div class="col-sm-4 <?php if ($fehler["selectbox"] != "") { echo 'error'; } ?> <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>" > <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_error_messages']) { ?> 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_error_messages']) { ?> checkField(this); <?php } ?>if(0!=this.selectedIndex){ this.setAttribute('class', 'field'); }else{ this.setAttribute('class', 'field unselected'); }" onclick="setActive(this);" onfocus="setActive(this);"> <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> <!-- right selectbox field - end --> </div> <!-- 2 selectbox fields side by side - end -->
Important information
Code between <!-- left selectbox field - start --> and <!-- left selectbox field - end -->:
1. Replace selectbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["selectbox"] (appears 3 times)
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
isset($_POST['selectbox']) && ''!=$_POST['selectbox']
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
2. Replace option 1, option 2, option 3 ... with your options:
<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>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any. The (visible) text in <option>Option 1</option>, however, can be different.
Make sure that the space (highlighted in red below) remains within the quotation marks of value=" " (e.g., value="Option 1 "). The same applies to: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> This is why we need the space: Inserting the space is always a good idea if you want a space in the e-mail.
3. Replace Selectbox with a field description of your choice in the following places:
aria-label="Selectbox"
<option value="" selected >Selectbox *</option>
4. Make the icon clickable and insert a dividing line next to it: Read separate instructions
5. Find and insert new icon: Read separate instructions
6. Position the icon: Read separate instructions
Important information
Code between <!-- right selectbox field - start --> and <!-- right selectbox field - end -->:
Before you start: Since this is a new selectbox field, you have to repeat steps 1 to 4.1 and assign a new variable (with a new variable name) to the field.
1. Replace selectbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["selectbox"] (appears 3 times)
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
isset($_POST['selectbox']) && ''!=$_POST['selectbox']
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
2. Replace option 1, option 2, option 3 ... with your options:
<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>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any. The (visible) text in <option>Option 1</option>, however, can be different.
Make sure that the space (highlighted in red below) remains within the quotation marks of value=" " (e.g., value="Option 1 "). The same applies to: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> This is why we need the space: Inserting the space is always a good idea if you want a space in the e-mail.
3. Replace Selectbox with a field description of your choice in the following places:
aria-label="Selectbox"
<option value="" selected >Selectbox *</option>
4. Make the icon clickable and insert a dividing line next to it: Read separate instructions
5. Find and insert new icon: Read separate instructions
6. Position the icon: Read separate instructions
Insert a selectbox as an optional field
// clean data
$selectbox = stripslashes($_POST["selectbox"]);
Description:
Replace "selectbox" (appears 2 times) with a variable name of your preference. You will need the name of the variable in the steps below.
// ---- create mail-message for admin
$mailcontent .= "New selectbox: " . $selectbox . "\n";
Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.
// ---- create mail-message for customer
$mailcontent .= "New selectbox: " . $selectbox . "\n";
Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.
<!-- Selectbox field - start --> <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="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'); }" onclick="setActive(this);" onfocus="setActive(this);"> <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 field - end -->
Important information:
1. Replace selectbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
isset($_POST['selectbox']) && ''!=$_POST['selectbox']
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
2. Replace option 1, option 2, option 3 ... with your options:
<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>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any. The (visible) text in <option>Option 1</option>, however, can be different.
Make sure that the space (highlighted in red below) remains within the quotation marks of value=" " (e.g., value="Option 1 "). The same applies to: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> This is why we need the space: Inserting the space is always a good idea if you want a space in the e-mail.
3. Replace Selectbox with a field description of your choice in the following places:
aria-label="Selectbox"
<option value="" selected >Selectbox</option>
4. Make the icon clickable and insert a dividing line next to it: Read separate instructions
5. Find and insert new icon: Read separate instructions
6. Position the icon: Read separate instructions
<!-- 2 selectbox fields side by side - start--> <div class="row"> <!-- left selectbox field - start --> <div class="col-sm-4 <?php echo (isset($_POST['selectbox']) && ''!=$_POST['selectbox'] ? 'not-empty-field ' : ''); ?>" > <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'); }" onclick="setActive(this);" onfocus="setActive(this);"> <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> <!-- left selectbox field - end --> <!-- right selectbox field - start --> <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="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'); }" onclick="setActive(this);" onfocus="setActive(this);"> <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> <!-- right selectbox field - end --> </div> <!-- 2 selectbox fields side by side - end -->
Important information
Code between <!-- left selectbox field - start --> and <!-- left selectbox field - end -->:
1. Replace selectbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
isset($_POST['selectbox']) && ''!=$_POST['selectbox']
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
2. Replace option 1, option 2, option 3 ... with your options:
<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>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any. The (visible) text in <option>Option 1</option>, however, can be different.
Make sure that the space (highlighted in red below) remains within the quotation marks of value=" " (e.g., value="Option 1 "). The same applies to: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> This is why we need the space: Inserting the space is always a good idea if you want a space in the e-mail.
3. Replace Selectbox with a field description of your choice in the following places:
aria-label="Selectbox"
<option value="" selected >Selectbox</option>
4. Make the icon clickable and insert a dividing line next to it: Read separate instructions
5. Find and insert new icon: Read separate instructions
6. Position the icon: Read separate instructions
Important information
Code between <!-- right selectbox field - start --> and <!-- right selectbox field - end -->:
Before you start: Since this is a new selectbox field, you have to repeat steps 1 to 3.1 and assign a new variable (with a new variable name) to the field.
1. Replace selectbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="selectbox"
<?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?>
isset($_POST['selectbox']) && ''!=$_POST['selectbox']
<script>if(0!=document.getElementsByName('selectbox')[0].selectedIndex){ document.getElementsByName('selectbox')[0].setAttribute('class', 'field'); }</script>
2. Replace option 1, option 2, option 3 ... with your options:
<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>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any. The (visible) text in <option>Option 1</option>, however, can be different.
Make sure that the space (highlighted in red below) remains within the quotation marks of value=" " (e.g., value="Option 1 "). The same applies to: <?php if($_POST['selectbox']=="Option 1 "){ echo "selected";}?> This is why we need the space: Inserting the space is always a good idea if you want a space in the e-mail.
3. Replace Selectbox with a field description of your choice in the following places:
aria-label="Selectbox"
<option value="" selected >Selectbox</option>
4. Make the icon clickable and insert a dividing line next to it: Read separate instructions
5. Find and insert new icon: Read separate instructions
6. Position the icon: Read separate instructions
Insert a checkbox as a mandatory field
// clean data
$checkbox = stripslashes($_POST["checkbox"]);
Description:
Replace "checkbox" (appears 2 times) with a variable name of your preference. You will need the name of the variable in the steps below.
// formcheck
if(isset($checkbox) && $checkbox == ""){ $fehler['checkbox'] = "<span class='errormsg'>Error message for <strong>checkbox</strong>.</span>"; }
Description:
1. Replace "checkbox" (appears 3 times) with the variable name defined in "// clean data".
2. Replace "Error message for <strong>checkbox</strong>." with an error message of your choice.
// ---- create mail-message for admin
$mailcontent .= "New checkbox: " . $checkbox . "\n";
Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.
// ---- create mail-message for customer
$mailcontent .= "New checkbox: " . $checkbox . "\n";
Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.
<!-- Checkbox field - start --> <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'; } ?> <?php echo (isset($_POST['checkbox']) && ''!=$_POST['checkbox'] ? 'not-empty-field ' : ''); ?>"> <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_error_messages']) { ?> 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="accepted" <?php if ($_POST['checkbox']=='accepted') echo(' checked="checked" '); ?> onclick="setActive(this);" onfocus="setActive(this);"> <div style="padding-top:4px;padding-bottom:2px;"> <span>Text for mandatory checkbox *</span></div> </label> <?php if ($fehler["checkbox"] != "") { echo $fehler["checkbox"]; } ?> </div> </div> </div> <!-- Checkbox field - end -->
<!-- JavaScript code - checkbox - start --> <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 - end -->
Important information:
1. Replace checkbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
$fehler["checkbox"] (appears 4 times)
name="checkbox"
<?php if ($_POST['checkbox']=='accepted') echo(' checked="checked" '); ?>
isset($_POST['checkbox']) && ''!=$_POST['checkbox']
2. Replace the word “accepted” with a text of your choice at the following positions:
value="accepted"
<?php if ($_POST['checkbox']=='accepted') echo(' checked="checked" '); ?>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any.
This text will later appear in the e-mail. Example: For the "Privacy policy" checkbox field, the e-mail will then read: Privacy policy: accepted
3. Replace Checkbox with a field description of your choice in the following places:
aria-label="Checkbox"
4. Replace Text for mandatory checkbox * with your own text. Note: Always insert the "description text" between the tags <span> </span>. In the case of links, simply leave out <span> </span>.
5. What is the JavaScript code for? The JavaScript code is merely a dynamic function that, in the event of an error message, hides the error message text (including the red checkbox mark) after the user clicks on the checkbox. Important: If you want to insert additional check boxes as mandatory fields, you also have to add the JavaScript code. Make sure to rename the addition _new_checkbox.
The addition _new_checkbox is used at these positions in the preceding HTML and JavaScript code:
error_container_new_checkbox (appears 7 times)
error_new_checkbox (appears 7 times)
checkField_new_checkbox(this) (appears 1 times)
checkField_new_checkbox(field) (appears 1 times)
6. Why is there an internal style sheet? The code has an internal style sheet because certain CSS commands from the external style sheet (style-contact-form.css) do not work with the new Javascript code.
Information on the style sheet:
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>
Description: The CSS command margin-bottom defines the spacing to the next field in case of an error message. (1.3rem in the desktop version and 2.55rem in the 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>
Description: The CSS command padding: .45rem 1rem .5rem 1rem; (relevant for Firefox, Chrome, Edge) and the CSS command margin-top: 0.43rem; (relevant for Safari) defines the correct upper margin for the "error icon" (= icon with red background color). The CSS commands are used again in @media (max-width: 655px) to display it with different values on mobile devices.
All other CSS commands are used to display the correct colors and to dynamically hide the error message when the user clicks on the checkbox.
You can position the icon with even more precision by following the instructions under step 9 (9. Position the icon).
7. Make the icon clickable and insert a dividing line next to it: Read separate instructions
8. Find and insert new icon: Read separate instructions
9. Position the icon: Read separate instructions
Insert a checkbox as an optional field
// clean data
$checkbox = stripslashes($_POST["checkbox"]);
Description:
Replace "checkbox" (appears 2 times) with a variable name of your preference. You will need the name of the variable in the steps below.
// ---- create mail-message for admin
$mailcontent .= "New checkbox: " . $checkbox . "\n";
Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.
// ---- create mail-message for customer
$mailcontent .= "New checkbox: " . $checkbox . "\n";
Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.
<!-- Checkbox field - start --> <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 <?php echo (isset($_POST['checkbox']) && ''!=$_POST['checkbox'] ? 'not-empty-field ' : ''); ?>"> <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="accepted" <?php if ($_POST['checkbox']=='accepted') echo(' checked="checked" '); ?> onclick="setActive(this);" onfocus="setActive(this);"> <div style="padding-top:4px;padding-bottom:2px;"> <span>Description for the optional checkbox</span></div> </label> </div> </div> </div> <!-- Checkbox field - end -->
Important information:
1. Replace checkbox with the variable name you defined in "// clean data" (see step 1.1) at the following positions:
name="checkbox"
<?php if ($_POST['checkbox']=='accepted') echo(' checked="checked" '); ?>
isset($_POST['checkbox']) && ''!=$_POST['checkbox']
2. Replace the word “accepted” with a text of your choice at the following positions:
value="accepted"
<?php if ($_POST['checkbox']=='accepted') echo(' checked="checked" '); ?>
Important: The text you use between the quotation marks in value="" and in <?php if($_POST['selectbox']==""){ echo "selected";}?> must be absolutely identical. That means: You also have to take spaces into account, if there are any.
This text will later appear in the e-mail. Example: For the "Privacy policy" checkbox field, the e-mail will then read: Privacy policy: accepted
3. Replace Checkbox with a field description of your choice in the following places:
aria-label="Checkbox"
4. Replace Description for the optional checkbox with your own text. Note: Always insert the "description text" between the tags <span> </span>. In the case of links, simply leave out <span> </span>.
5. Make the icon clickable and insert a dividing line next to it: Read separate instructions
6. Find and insert new icon: Read separate instructions
7. Position the icon: Read separate instructions
Make the icon clickable
After inserting the new input / selectbox / checkbox field, you must define the value between the quotation marks after for (<label class="control-label" for="">) in the label element. Assign a unique name. You have to insert this exact same name in the corresponding input / selectbox / checkbox element between the quotation marks after id (input field: <input id="" ; selectbox: <select id="" ; checkbox: <input id="")
Important: Do not use the name of an existing field! Every field must have a unique name that may only be used once. Otherwise, clicking on the icon would mark the original field.
Insert a dividing line next to the icon
You must also modify the CSS file (style-contact-form.css) accordingly by adding the following lines of code before /* style input, select and textarea with border-right.png - end */:
#name {
background-image: url('../img/border-right.png');
background-position: 2.85rem center;
-webkit-text-size-adjust:none;
background-repeat: no-repeat;
}
Replace name with the name you choose and defined as the values "for" respectively "id". Important: Do not delete the number sign (#)!
Now, the vertical dividing line should also be displayed in the corresponding field!
Find and insert a new icon
You can use the search function on the website https://fontawesome.com/icons?d=gallery to find more icons. All you have to do is copy the code in the i-element, specifically the value between the quotation marks in class="" (<i class=""></i>), from the subpage of the respective icon.
Example: If you search for telephone, you will find the icon https://fontawesome.com/icons/phone?style=solid, among others. Now, copy the code <i class="fas fa-phone"></i> or, more specifically, class="fas fa-phone". Then insert class="fas fa-phone" into the i-element of the input / selectbox / checkbox field. Like this:
<i id="phone-icon" class="fa fa-phone"></i>
Important: Do not change id="phone-icon", because "phone-icon" is linked to the CSS class (or the positioning of the icon). Read the next set of instructions for more information on this. (Position the icon)
Info: You don’t have to download the icon because the fontawesome library is already included in the contact form.
Position the icon
To position an icon, assign an id to the i-element.
The following example (Template 1 / Advanced Version) illustrates this:
For the "Subject" input field, the i-element is defined as follows: <i id="subject-icon" class="fa fa-edit"></i>
Description: The icon is inserted with class="fa fa-edit" (see: find and insert new icon). id="subject-icon" loads the CSS command for the respective icon. In style-contact-form.css, you will find two classes:
1st CSS class:
body.safari #subject-icon{
padding-left: 1.5px; }
2nd CSS class:
#subject-icon{
padding-left: 1.0px; }
Description: 1st CSS class
The first CSS class contains the CSS command for Safari. Why? In Safari, padding-left is 0.5 px smaller than in Firefox, Chrome and Edge. That’s why you’ll have to increase this value by 0.5 px. This way, this element will appear the same in all current browsers. (= cross-browser compatibility ✔) Note: The positioning of the icons (in terms of the px values) may still be different in other templates (e.g., Template 4). It is always a good idea to play around with these values.
By the way: For this purpose (and only for this purpose), a Javascript user agent switcher was built into the contact form (contact.php). Pro tip: You can use a free trial account at saucelabs.com to test how the template works in Safari. It is no longer possible to perform a local test with an current Safari browser using Windows. This unfortunately encourages web workers to use emulators or to purchase a MacBook. :-)
Description: 2nd CSS class
The second CSS class contains the CSS command for all other browsers.
Note: To ensure that the icons are positioned correctly on mobile devices, insert the above CSS commands again in @media (max-width: 655px) { in the CSS code (style-contact-form.css). Adjust if necessary.