Create a custom form - based on Template I - in no time at all!

You will use HTML5, CSS3, JavaScript & PHP!





Preliminary information - Please read!

  • contact.php & style-contact-form.css
    You will only need the files contact.php and style-contact-form.css to edit the contact form. Use an HTML editor to open the files. (We recommend Notepad2)
  • Versions of Template I
    Feel free to have a look at our versions of Template I. There are 10 versions available in total. There might already be a version you like!






Insert Input, Selectbox or Checkbox Fields:



Insert input field as mandatory field



Preliminary information
Open the contact.php file in an editor (We recommend Notepad2) Follow these instructions carefully until the end.


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


Scroll down to the HTML section and insert the following code in a suitable place.

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




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


Scroll down to the HTML section and insert the following code in a suitable place.

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



6. You’re done! :-)






Insert input field as an optional field



Preliminary information
Open the contact.php file in an editor (We recommend Notepad2) Follow these instructions carefully until the end.


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


Scroll down to the HTML section and insert the following code in a suitable place.

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




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


Scroll down to the HTML section and insert the following code in a suitable place.

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



5. You’re done! :-)






Insert a selectbox as a mandatory field



Preliminary information
Open the contact.php file in an editor (We recommend Notepad2) Follow these instructions carefully until the end.


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


Scroll down to the HTML section and insert the following code in a suitable place.

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




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


Scroll down to the HTML section and insert the following code in a suitable place.

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



6. You’re done! :-)






Insert a selectbox as an optional field



Preliminary information
Open the contact.php file in an editor (We recommend Notepad2) Follow these instructions carefully until the end.


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


Scroll down to the HTML section and insert the following code in a suitable place.

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




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


Scroll down to the HTML section and insert the following code in a suitable place.

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



5. You’re done! :-)






Insert a checkbox as a mandatory field



Preliminary information
Open the contact.php file in an editor (We recommend Notepad2) Follow these instructions carefully until the end.


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:


Scroll down to the HTML section and insert the following code in a suitable place.

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

Also, insert the following JavaScript code before

<?php } ?>
</form>

:

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




6. You’re done! :-)






Insert a checkbox as an optional field



Preliminary information
Open the contact.php file in an editor (We recommend Notepad2) Follow these instructions carefully until the end.


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:


Scroll down to the HTML section and insert the following code in a suitable place.

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




5. You’re done! :-)






Find New Icons, Make Icons Clickable and Position Icons:

These tutorials are already included in the tutorials listed above.



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.











Template I (Advanced Version) Before Modifications: