Hi there masters good day! Is it possible to create a page with a coupon code form, then the selected visitors need to enter the valid coupon code I emailed to them, and if the coupon code they entered is correct, they will be redirected to the landing page? If wrong code, there’s an alert box that says “Invalid coupon code”.
I’m using Elementor Pro, “Buddyboss” and “Paid Membership Pro” plugin but I can’t find a way using free method to achieve that. It seems need a “Pro” version.
I tried to use the Elementor Pro form then added a JS and PHP code, but still the page will be redirected.
Here are the codes I used:
// [1] I USED FIRST THIS CODE ONLY JAVASCRIPT. THE ALERTBOX WILL APPEAR BUT STILL WILL REDIRECT THE PAGE
document.addEventListener('DOMContentLoaded', function() {
// Select the form using its class
const form = document.querySelector('.FormClass'); // This is the form class itself
if (form) {
form.addEventListener('submit', function(e) {
// Select the coupon field using its name attribute
const couponField = form.querySelector('input[name="FORMFIELDNAME"]'); // This is the field name element
const validCouponCode = 'MYCOUPONCODE'; // This is my coupon code
// Check if the coupon code entered is not valid
if (couponField && couponField.value !== validCouponCode) {
// Prevent form submission
e.preventDefault();
alert('Invalid coupon code.');
return false; // Ensure the form is not submitted
}
});
}
});
// [2] SINCE THE ABOVE CODE DIDN'T WORK, I TRIED TO USE A PHP CODE TOO AND JAVASCRIPT. THIS IS THE JAVASCRIPT CODE
document.addEventListener('DOMContentLoaded', function() {
// Select the form using its class
const form = document.querySelector('.FormClass');
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault(); // Prevent the form from submitting immediately
const couponField = form.querySelector('input[name="FORMFIELDNAME');
const couponCode = couponField ? couponField.value : '';
// AJAX request to validate the coupon code
fetch(ajax_object.ajax_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
'action': 'validate_coupon_code',
'form_fields[ifbfGalaCouponField]': couponCode
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
form.submit(); // Submit the form if the coupon code is valid
} else {
alert(data.data.message); // Show error message
}
});
});
}
});
// [2] THIS IS THE PHP CODE
// Validate coupon code via AJAX
function validate_coupon_code() {
// Check if the request is coming from our form
if (isset($_POST['form_fields']['FORMFIELDNAME'])) {
$entered_code = sanitize_text_field($_POST['form_fields']['FORMFIELDNAME']);
$valid_code = 'MYCOUPONCODE'; // Your valid coupon code
// Check if the entered code matches the valid code
if ($entered_code !== $valid_code) {
// Send an error response
wp_send_json_error(array('message' => 'Invalid coupon code.'));
} else {
// Send a success response
wp_send_json_success();
}
} else {
// Send an error response if the code is not set
wp_send_json_error(array('message' => 'Coupon code is required.'));
}
// Properly terminate the request
wp_die();
}
// Hook the function to handle AJAX requests
add_action('wp_ajax_validate_coupon_code', 'validate_coupon_code');
add_action('wp_ajax_nopriv_validate_coupon_code', 'validate_coupon_code');
function enqueue_custom_scripts() {
wp_enqueue_script('custom-validate-coupon', get_template_directory_uri() . '/js/custom-validate-coupon.js', array('jquery'), null, true);
wp_localize_script('custom-validate-coupon', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
I’m wondering the e.preventDefault(); if it is really working with Elementor.
Is there a free plugin or other free method that I can use to achieve that? Or can you please help me find a way to fix the code?
Thank you so much! 🙂