I Have a wordpress website, with domain hosting on one.com. My goal is to have a page wherein I can put an email, this will be compared to a list of emails on a google sheet and if it exists I will be sent to a new page. I am limited in that I cannot use plugins that must be paid for. My current attempt uses a homemade plugin, that I have stored in one.com under wp-contesnts/plugins/email-order-check and a google sheet web app. I get the following error:
“””
400. That’s an error.
Your client has issued a malformed or illegal request. That’s all we know.
“””
This error is not very useful and so I ask for help. Here is the code:
I have added a simple php email check plugin to the one.com wp-content/plugins. The php is as follows:
<?php
/**
* Plugin Name: Email Order Check
* Description: Checks if an email exists in Google Sheets and displays the order form accordingly.
* Version: 1.0
* Author: Your Name
*/
// Enqueue necessary scripts and styles
function enqueue_email_order_check_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_email_order_check_scripts');
// Shortcode to display the email check form
function email_order_check_shortcode() {
ob_start();
?>
<form id="email-check-form">
<input type="email" id="email" name="email" required placeholder="Enter your email">
<button type="submit">Check Email</button>
</form>
<div id="order-form-container"></div>
<script>
jQuery(document).ready(function($) {
$('#email-check-form').on('submit', function(event) {
event.preventDefault();
var email = $('#email').val();
// AJAX request to check email
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'check_email',
email: email
},
success: function(response) {
$('#order-form-container').html(response);
},
error: function(xhr, status, error) {
console.log("Error: " + error);
console.log("Status: " + status);
console.dir(xhr);
}
});
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('email_order_check', 'email_order_check_shortcode');
// AJAX handler to check email
function check_email_callback() {
$email = sanitize_email($_POST['email']);
// Google Apps Script URL
$script_url = 'https://script.google.com/macros/s/AKfycbyDVbGzXR5iE0D63RG1EFqk81oLfcAgKyeIyqwVuwrdgMcdeBVIjocI40oF7j8vjawoUg/exec'; // Replace with your Google Apps Script URL
// Prepare the data to send to Google Apps Script
$data = array(
'email' => $email
);
// Use wp_remote_post to send the request
$response = wp_remote_post($script_url, array(
'body' => $data
));
if (is_wp_error($response)) {
$error_message = $response->get_error_message();
echo "Something went wrong: $error_message";
} else {
echo wp_remote_retrieve_body($response);
}
wp_die();
}
add_action('wp_ajax_check_email', 'check_email_callback');
add_action('wp_ajax_nopriv_check_email', 'check_email_callback');
?>
The google sheets webapp script looks like this:
function doPost(e) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Emails'); // Adjust sheet name if necessary
var email = e.parameter.email;
var range = sheet.getRange('A2:A' + sheet.getLastRow());
var values = range.getValues();
var emailExists = false;
for (var i = 0; i < values.length; i++) {
if (values[i][0] === email) {
emailExists = true;
break;
}
}
var output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(JSON.stringify({
emailExists: emailExists,
email: email
}));
return output;
}
Any suggestings are greatly appreciated.
I have tried a variety of different codes, somtimes I get CORS erros but now I get this. I would like to also avoid the CORS errors. I have published the webapp so that is open to all.
I think I am mainly struggling with why something so theoretically simple is enormously problematic due to browser security and other permission blocks. Now I do want the website to be safe, so how do I fix this problem without compromising security?