Kontaktformular.com

Insert input field as mandatory field

1. Scroll to:

// clean data

1.1 Write a line of code as illustrated in this example:

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

2. Scroll to:

// formcheck

2.1 Write a line of code as illustrated in this example:

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.

3. Scroll to:

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

3.1 Write a line of code as illustrated in this example:

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

4. Scroll to:

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

4.1 Write a line of code as illustrated in this example:

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

5. Insert an input field into the HTML code - please choose:

5.1 Insert one input field (as a mandatory field).

5.2 Insert two input fields (as mandatory fields) next to each other.

5.1 Insert one input field (as a mandatory field):

<!-- Input field - start -->

<div class="row">

<div class="col-sm-8 <?php if ($fehler["inputfield"] != "") { echo 'error'; } ?>">
				
<label class="control-label"></label>
					
<input <?php if($cfg['HTML5_error_messages']) { ?> required <?php }else{ ?>   onchange="checkField(this)" <?php } ?> aria-label="Input field" placeholder="Input field *" type="text" name="inputfield" class="field"   value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" />
					
<?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']; ?>"
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 *"

5.2 Insert two input fields (as mandatory fields) next to each other:

<!-- 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'; } ?>">
				
<label class="control-label"></label>
					
<input <?php if($cfg['HTML5_error_messages']) { ?> required <?php }else{ ?>   onchange="checkField(this)" <?php } ?> aria-label="Input field" placeholder="Input field *" type="text" name="inputfield" class="field"   value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" />
					
<?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'; } ?>">
				
<label class="control-label"></label>
					
<input <?php if($cfg['HTML5_error_messages']) { ?> required <?php }else{ ?>   onchange="checkField(this)" <?php } ?> aria-label="Input field" placeholder="Input field *" type="text" name="inputfield" class="field"   value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" />
					
<?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']; ?>"
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 *"

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']; ?>"
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 *"

6. You’re done! :-)

Insert input field as an optional field

1. Scroll to:

// clean data

1.1 Write a line of code as illustrated in this example:

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

2. Scroll to:

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

2.1 Write a line of code as illustrated in this example:

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

3. Scroll to:

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

3.1 Write a line of code as illustrated in this example:

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

4. Insert an input field into the HTML code - please choose:

4.1 Insert one input field (as an optional field).

4.2 Insert two input fields (as optional fields) next to each other.

4.1 Insert one input field (as an optional field):

<!-- Input field - start -->

<div class="row">

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

<label class="control-label"></label>

<input aria-label="Input field" type="text" name="inputfield"  placeholder="Input field" class="field" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_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:

name="inputfield"
value="<?php echo $_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"

4.2 Insert two input fields (as optional fields) next to each other:

<!-- 2 input fields side by side - start -->

<div class="row">

<!-- left input field - start -->

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

<label class="control-label"></label>

<input aria-label="Input field" type="text" name="inputfield"  placeholder="Input field" class="field" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_inputfield; ?>" />

</div>

<!-- left input field - end -->


<!-- right input field - start -->

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

<label class="control-label"></label>

<input aria-label="Input field" type="text" name="inputfield"  placeholder="Input field" class="field" value="<?php echo $_POST['inputfield']; ?>" maxlength="<?php echo $number_of_characters_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:

name="inputfield"
value="<?php echo $_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"

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']; ?>"
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"

5. You’re done! :-)

Insert a selectbox as a mandatory field

1. Scroll to:

// clean data

1.1 Write a line of code as illustrated in this example:

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

2. Scroll to:

// formcheck

2.1 Write a line of code as illustrated in this example:

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.

3. Scroll to:

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

3.1 Write a line of code as illustrated in this example:

$mailcontent .= "New selectbox: " . $selectbox . "\n";

Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.

4. Scroll to:

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

4.1 Write a line of code as illustrated in this example:

$mailcontent .= "New selectbox: " . $selectbox . "\n";

Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.

5. Insert a selectbox into the HTML code - please choose:

5.1 Insert one selectbox (as a mandatory field).

5.2 Insert two selectboxes (as mandatory fields) next to each other.

5.1 Insert one selectbox (as a mandatory field):

<!-- Selectbox field - start -->

<div class="row">

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

<label class="control-label select-label"></label>

<select <?php if($cfg['HTML5_error_messages']) { ?> required <?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'); }">

<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>	
	
</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";}?>
<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>

5.2 Insert two selectboxes (as mandatory fields) next to each other:

<!-- 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'; } ?>">

<label class="control-label select-label"></label>

<select <?php if($cfg['HTML5_error_messages']) { ?> required <?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'); }">

<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'; } ?>">

<label class="control-label select-label"></label>

<select <?php if($cfg['HTML5_error_messages']) { ?> required <?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'); }">

<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";}?>
<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>

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";}?>
<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>

6. You’re done! :-)

Insert a selectbox as an optional field

1. Scroll to:

// clean data

1.1 Write a line of code as illustrated in this example:

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

2. Scroll to:

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

2.1 Write a line of code as illustrated in this example:

$mailcontent .= "New selectbox: " . $selectbox . "\n";

Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.

3. Scroll to:

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

3.1 Write a line of code as illustrated in this example:

$mailcontent .= "New selectbox: " . $selectbox . "\n";

Description:
1. Replace "selectbox" with the variable name defined in "// clean data".
2. Replace "New selectbox:" with your description.

4. Insert a selectbox into the HTML code - please choose:

4.1 Insert one selectbox (as an optional field).

4.2 Insert two selectboxes (as optional fields) next to each other.

4.1 Insert one selectbox (as an optional field):

<!-- Selectbox field - start -->

<div class="row">

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

<label class="control-label select-label"></label>

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

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

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

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

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

</select>

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

</div>
				
</div>

<!-- Selectbox 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";}?>
<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.2 Insert two selectboxes (as optional fields) next to each other:

<!-- 2 selectbox fields side by side - start -->

<div class="row">

<!-- left selectbox field - start -->

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

<label class="control-label select-label"></label>

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

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

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

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

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

</select>

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

<!-- left selectbox field - end -->


<!-- right selectbox field - start -->

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

<label class="control-label select-label"></label>

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

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

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

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

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

</select>

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

</div>

<!-- 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";}?>
<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>

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";}?>
<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>

5. You’re done! :-)

Insert a checkbox as a mandatory field

1. Scroll to:

// clean data

1.1 Write a line of code as illustrated in this example:

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

2. Scroll to:

// formcheck

2.1 Write a line of code as illustrated in this example:

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.

3. Scroll to:

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

3.1 Write a line of code as illustrated in this example:

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

Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.

4. Scroll to:

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

4.1 Write a line of code as illustrated in this example:

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

Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.

5. Insert a checkbox (as a mandatory field) in the HTML code:

<!-- Checkbox field - start -->

<div class="row">

<div class="row checkbox-row <?php if ($fehler["checkbox"] != "") { echo 'error_container_new_checkbox'; } ?>" style="<?php if ($fehler["checkbox"] != "") { echo 'error_container_new_checkbox'; } ?>">

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

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

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

<style>
.kontaktformular .row .error_new_checkbox .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></label>

<label class="checkbox-inline">

<input <?php if($cfg['HTML5_error_messages']) { ?> required <?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" '); ?>> <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" '); ?>

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

6. You’re done! :-)

Insert a checkbox as an optional field

1. Scroll to:

// clean data

1.1 Write a line of code as illustrated in this example:

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

2. Scroll to:

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

2.1 Write a line of code as illustrated in this example:

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

Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.

3. Scroll to:

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

3.1 Write a line of code as illustrated in this example:

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

Description:
1. Replace "checkbox" with the variable name defined in "// clean data".
2. Replace "New checkbox:" with your description.

4. Insert a checkbox (as an optional field) in the HTML code:

<!-- Checkbox field - start -->

<div class="row">

<div class="row checkbox-row">

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

<label></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" '); ?>> <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" '); ?>

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. You’re done! :-)