php – How to send custom form submissions to WordPress Database?

Question

I have created a form and the table in the database I want submissions to be sent to. From my research I’ve found that this code should send it to the database:

<?php /* PHP code that processes form */
    if(isset($_POST['submit'])){
        
        global $wpdb;
        $tablename = Form_Submissions;
      
        $data=array(
            'FirstName' => $_POST['fname'],
            'LastName' => $POST['lname'],
            'Consent' => $POST['consent']
        );
        
        $format = array(
            '%s',
            '%s',
            '%s'
        );
      
        $wpdb -> insert($tablename, $data, $format);

        echo '<script type="text/javascript"> document.getElementById("frm").style.display="none"; </script>';
    }
?>

However, nothing is happening. I’m at complete loss on where to go from here. Am I missing something simple, or am I completely off target? Thank you for your help!

Here is the code for the form and the code that activates the form just in case.

<html>
<style>

/* Stylings for Heading Statement */
    .h3{
        text-align: center;
        font-size: 24px;
        padding: 10px;
        color: white;
    }
/* Stylings for checkbox */
    .box{
        font-size: 22px;
        padding: 20px;
        color: white;
    }
/* Stylings for input labels (names and checkbox labels) */
    .input-label{
        text-align: center;
        font-size: 22px;
        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%;
        left: -530px;
        border: none;
        z-index: 9;
        background-color: #1e1e1e;
        width: 1000px;
        padding: 20px;
        border-radius: 20px;
        text-align: center;
    }
/* Sets style and size of input fields  */
    .form-popup input[type=text] {
        width: 30%;
        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 checkbos and statement. This is what is aligning the two items. */
    .column1 {
        float: left;
        width: 26%;
    }
    .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">
        
        <!-- 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" required/>

        <!-- label and input for Last Name -->
              <label for="lname" class="input-label">&nbsp &nbsp Last name:</label>
              <input type="text" name="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="agree" class="box" 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" name="submit" value="Submit" class="btn">

        </form>
    </div>

<script>
    function openForm() { /* Opens Consent Form */
        document.getElementById("Form").style.display = "block";
    }
</script>

</body>


<?php /* PHP code that processes form */
    if(isset($_POST['submit'])){
        
        global $wpdb;
        $tablename = Form_Submissions;
      
        $data=array(
            'FirstName' => $_POST['fname'],
            'LastName' => $POST['lname'],
            'Consent' => $POST['consent']
        );
        
        $format = array(
            '%s',
            '%s',
            '%s'
        );
      
        $wpdb -> insert($tablename, $data, $format);

        echo '<script type="text/javascript"> document.getElementById("frm").style.display="none"; </script>';
    }
?>
</html>

The Switch Case that activates it:

<?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>'; 
    break; 
  default : /* the default case leaves the function and allows all pages with URL's not match the cases to run as normal pages */
    break; 
}; ?>

0
Coding Student 2 weeks 2021-09-01T15:23:35-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse