Why custom form broke after the Gutenberg update? - wordpress

Question

I'm working with a child theme and before the Gutenburg project was released, my page/form was working.
The page would post to itself and if the criteria was all met, it'd hide the form and display a success message. Now you have to click the submit button, the form's opacity changes (best way I can describe it) but then the form comes back. The form fields are still populated so I click submit again and then the form will post. But now I no longer see the success (or error) message any more.
<?php
$response = "";
//response messages
$not_human = "Please confirm you are human by clicking on the reCAPTCHA box.";
$bad_date_range = "The start date cannot be later than the end date. Please review your dates and submit again.";
$missing_content = "Please provide all information being asked. Your name, phone number, and email address will only be used internally and will not be visible by the public.";
$email_invalid = "Please review your email. It does not appear to be formatted correctly.";
//user posted variables
$firstname = strip_tags( stripslashes( $_POST['message_firstname'] ) );
$lastname = strip_tags( stripslashes( $_POST['message_lastname'] ) );
$email = strip_tags( stripslashes( $_POST['message_email'] ) );
$phone = strip_tags( stripslashes( $_POST['message_phone'] ) );
//function to generate response
function generate_response($type, $message){
global $response;
var_dump($type);
if($type == "success") {
$response = $message;
?>
<style>
.hpwd_gs_success {display: block !important;};
</style>
<?php
} else {
$response = $message;
?>
<style>
.hpwd_gs_error {display: block !important;};
</style>
<?php
}
}
function insertGSApplication( $firstname, $lastname, $email, $phone ) {
global $wpdb;
$my_table_name = $wpdb->prefix . 'my_junk';
$my_form_data = array(
'event_desc' => '<strong>Office Use Only:</strong><br/>' . $firstname . ' ' . $lastname . '<br/>' . $email . '<br/>' . $phone );
$wpdb->insert( $my_table_name, $my_form_data, array(
'%s',
'%s',
'%s',
'%s'
));
$event_id = $wpdb->insert_id;
__insertGSApplication($event_id, $begin, $end);
}
function __insertGSApplication($event_id, $begin, $end) {
global $wpdb;
$my_table_name = $wpdb->prefix . 'my_junk_events';
$group_id = 0;
$format = array( '%d', '%s', '%s', '%d' );
$data = array(
'occur_group_id' => $group_id
);
$result = $wpdb->insert( $my_table_name, $data, $format );
}
if(
isset($_POST['submit']) &&
!empty($_POST['submit'])
) {
if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
generate_response("error", $email . " " . $email_invalid); // email validation failed
}
else {
//validate presence of form fields **** need to also check for date and times; baby steps
if(
empty($firstname) ||
empty($lastname) ||
empty($phone)
){
generate_response("error", $missing_content); // missing some form data
} else if(empty($reCAPTCHA)) {
generate_response("error", $not_human); // missing captcha
} else if($startdate_alt > $enddate_alt) { // enddate is before start date
generate_response("error", $bad_date_range);
} else {
// human check (captcha start)
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$reCAPTCHA);
$responseData = json_decode($verifyResponse); // human check (captcha end)
if($responseData->success) { // validating google's response on human check
// save data
insertGSApplication( $firstname, $lastname, $email, $phone );
//send email per SendGrid documentation
$subject = 'GS Permit Application from ' . $firstname . ' ' . $lastname;
$message = $firstname . " " . $lastname . " has submitted a GS appliction for:";
$message .= "\r\n\r\n";
$message .= $address;
$message .= "\r\n\r\n";
$message .= "Go to " . get_site_url() . "/wp-admin/admin.php?page=my-junk-manage&limit=reserved&sort=4&order=ASC to approve it";
$to = array('gs#domain.com');
$headers = new SendGrid\Email();
$headers->setFromName("NO REPLY")
->setFrom("NOREPLY#domain.com")
->setBcc("other#domain.com")
->addCategory('GS');
$mail = wp_mail($to, $subject, $message, $headers);
// generate the reponse
generate_response("success",$message_saved);
} else {
generate_response("error",$message_unsaved);
}
}
}
}
get_header();
?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<h1 class="entry-title main_title"><?php the_title(); ?></h1>
<div class="entry-content">
<div id="hpwd_row" class="et_pb_section et_pb_section_1 et_section_regular">
<div class=" et_pb_row et_pb_row_1">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et-last-child">
<div class="et_pb_code et_pb_module et_pb_code_0">
<div class="et_pb_code_inner">
<div id="formid" class="et_pb_module et_pb_contact_form_container clearfix et_pb_contact_form_0" data-form_unique_num="0">
<div class="et_pb_contact">
<form id="hpwd_gs_frm" class="et_pb_contact_form clearfix" method="post" action="<?php get_site_url() ?>" autocomplete="false">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_half" data-id="name" data-type="input" style="">
<label for="message_firstname" class="et_pb_contact_form_label">First Name</label>
<input type="text" id="message_firstname" class="input" value="<?php echo $_POST['message_firstname']; ?>" name="message_firstname" data-required_mark="required" data-field_type="input" data-original_id="name" placeholder="First Name">
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_half et_pb_contact_field_last" data-id="lastname" data-type="input" style="">
<label for="message_lastname" class="et_pb_contact_form_label">Last Name</label>
<input type="text" id="message_lastname" class="input" value="<?php echo $_POST['message_lastname']; ?>" name="message_lastname" data-required_mark="required" data-field_type="input" data-original_id="lastname" placeholder="Last Name">
</p>
<p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_half" data-id="telephoneno" data-type="input" style="">
<label for="phone_us" class="et_pb_contact_form_label">Phone Numer</label>
<input type="text" class="phone_us" id="phone_us" value="<?php echo $_POST['message_phone']; ?>" name="message_phone" maxlength="14" placeholder="[phone]">
</p>
<p align="center">
<div align="center"><button type="submit" name="submit" value="I have read and agree to the terms and conditions above" class="et_pb_contact_submit et_pb_button">I have read and agree to the terms and conditions above</button></div>
</p>
<p align="center"> </p>
<input type="hidden" id="_wpnonce-et-pb-contact-form-submitted" name="_wpnonce-et-pb-contact-form-submitted" value="e089401553"><input type="hidden" name="_wp_http_referer" value="/domain/contact-us-today/">
</form>
</div> <!-- .et_pb_code_inner -->
</div>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code -->
</div> <!-- .et_pb_column -->
</div>
</div>
</div>
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" media="all" href="/sandimas/assets/daterangepicker/daterangepicker.css" /> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> -->
This is my first time to create a form without the use of a plugin - couldn't find a plugin that would do what I need so this approach was taken.

Answer 1

WordPress nonce had some bad syntax.