I have created a form, as shown below that displays according to a switch statement. I am needing the inputs from the form submission to either be saved to a table in the WordPress Database or to be saved to a text file saved in the uploads section of the sites core files. However, when the form is submitted it is outputting empty values for the variables. What am I doing wrong? How can this be fixed? Thank you!
Code for the form’s switch statement:
<?php /* code for pop-up button conditions */
$host = 'https://' .$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; /* gets the current page's URL */
switch ( $host ){
case 'https://example1.com/':
case 'https://example2.com/':
case 'https://example3.com/':
require 'pop-up-button.php'; /*calls the PHP file containing the code for the form*/
echo '<button id="close" class="open-button" onclick="openForm()"></button>'; /*echo runs and outputs the HTML code for the button */
break;
default :
break;
}; ?>
Code for the form:
<html>
<style>
/* Stylings for Heading Statement */
.h3{
text-align: center;
font-size: 24px;
padding: 10px;
color: white;
}
/* Stylings for checkbox */
.box{
font-size: 20px;
padding: 20px;
color: white;
}
/* Stylings for input labels (names and checkbox labels) */
.input-label{
text-align: center;
font-size: 20px;
padding: 10px;
color: white;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
width: 170px;
height: 60px;
background-color: transparent;
outline: none;
position: relative;
left: -168px;
top: 20px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 25%;
border: none;
z-index: 9;
background-color: #1e1e1e;
width: 100%;
padding: 20px;
border-radius: 20px;
text-align: center;
}
/* Sets style and size of input fields */
.form-popup input[type=text] {
width: 20%;
padding: 5px;
margin: 5px 0 22px 0;
border: none;
background: #FFFFFF;
}
/* Sets color and style of the input boxes when selected */
.form-popup input:focus {
background-color: #FFFFFF;
outline: none;
}
/* Stylings of the submit button */
.btn {
background-color: #DB2600;
border-radius: 9999px;
font-size: 24px;
width: 120px;
height: 45px;
transition: 0.3s;
color: white;
}
/* Changes the color of the sugmit button when curser hovers over it */
.btn:hover {
opacity: 1;
background-color: #000000;
}
/* Hides the default checkbox */
.box input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* creates custom checkbox */
.checkmark {
position: absolute;
height: 20px;
width: 20px;
background-color: white;
border-radius: 2px;
}
/* Sets the color of checkbox when checked */
.box input:checked ~ .checkmark {
background-color: #DB2600;
}
/* creates checkmark inside checkbox */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Displays checkmark when checkbox is clicked */
.box input:checked ~ .checkmark:after {
display: block;
}
/* Positions and styles checkmark */
.box .checkmark:after {
left: 7px;
top: 3px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Column formatting for checkbox and statement. This is what is aligning the two items. */
.column1 {
float: left;
width: 17%;
}
.column2 {
float: left;
width: 74%;
margin-top:-5px;
}
/* Clears floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<!-- Code for the form -->
<div class="form-popup" id="Form">
<form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
<!-- acknolwdgement statment -->
<h3 class="h3">Form Statement</h3>
<!-- label and input for First Name -->
<label for="fname" class="input-label">First name:</label>
<input type="text" name="fname" id="fname" required/>
<!-- label and input for Last Name -->
<label for="lname" class="input-label">    Last name:</label>
<input type="text" name="lname" id="lname" required/> <br> <br>
<!-- checkbox and label, placed to columns to achieve desired formating -->
<div class="row">
<div class="column1" style="text-align: right;">
<label class="box" style="border-color: red;">
<input type="checkbox" name="consent" value="agreed" class="box" id="consent" required/>
<span class="checkmark"></span>
</label></div>
<div class="column2" style="text-align: left;">
<label class="input-label"> I have read and understand the above statement.
</label>
</div>
</div>
<br><br>
<!-- Submit Button -->
<input type="submit" onclick = "submitForm()" class="btn">
</form>
</div>
<script>
function openForm() { /* Opens Consent Form */
document.getElementById("Form").style.display = "block";
}
function submitForm() {
document.write = "<?php form_process() ?>";
}
</script>
</body>
</html>
PHP that processes the form: (contains statements for both Database insertions and writing to the text file, I truly only need one to work)
<?php /* PHP code that processes form */
function form_process(){
$FirstName = filter_input(INPUT_POST, "fname", FILTER_SANITIZE_STRING);
$LastName = filter_input(INPUT_POST, "lname", FILTER_SANITIZE_STRING);
$Consent = filter_input(INPUT_POST, "consent", FILTER_SANITIZE_STRING);
global $wpdb;
$mysqli = new mysqli("host", "usernme", "password", "database");
$table_name = $wpdb -> database . 'table';
$wpdb->insert($table_name, array('FirstName' => "$FirstName", 'LastName' => "$LastName", 'Consent' => "$Consent"));
$Date = date("l, F jS, Y");
date_default_timezone_set("America/Chicago");
$Time = date("h:i:sa");
$data = 'I, ' . $FirstName . ' ' . $LastName . ', ' . $Consent . ' to Form on ' . $Date . ' at ' . $Time . '.' . "n";
$txtfile = "uploads/Form.txt";
$fp = fopen($txtfile, 'a+');
fwrite($fp, $data);
fclose($fp);
}
?>
Database output:
Text file output:
