Here's what I got, on WordPress using woocommerce subscriptions, users have the option of unsubscribing from their subscription through their account page. Right now as it is when they click the cancel button, it simply cancels their subscription without any confirmation or second thought. What I want it to do is when they click the cancel button, have it bring up a feedback module with a few radio buttons. Once they select a radio button option, it displays the cancel button and then once they click the cancel button, it does two things, 1) sends an email to the admin with the radio button option that they chose and 2) cancels their subscription.
I have looked all across the internet trying to figure this out and I can't for the life of me get it to work. I feel like I'm really close but can't figure out how to get both actions to run. I can get one or the other action to run, but not both. I am running the whole thing on a localhost using Bitnami and I am also not very familiar with Javascript and Ajax which I know will have to run. Most of the code below I grabbed from the internet, so sorry if it feels parsed together.
I have also tried having the email sent out when the user clicks the radio button, and then the cancel button just be the action, but I ran into the issue where the page would refresh every time they clicked on a radio button. Now if I could get the email to send and not refresh the page, this way would work, however it's the less desired way. :)
So, any help would be much appreciated! :)
Below is the code that I currently have:
PHP for emailing
if(isset($_POST['radio'])){
$user_info = get_userdata(1);
$email = $user_info->user_email;
$to = "example@gmail.com";
$from = "donotreply@example.org";
$subject = "Subscription Cancelled";
$message = "Reason for unsubscribing: " . $_POST['radio'] . "\nName: " .
$user_info->last_name . ", " . $user_info->first_name . "\nUser Email: ". $email;
$headers = "From:" . $from;
wp_mail($to,$subject,$message,$headers);
}
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
function show1() {
document.getElementById('button').style.display = 'inline-block';
}
function show2() {
document.getElementById('button').style.display = 'inline-block';
}
window.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("contact");
document.getElementById("submit_button").addEventListener("click", function() {
form.submit();
});
});.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(101, 101, 101, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1em 1.5em;
width: 95%;
max-width: 510px;
}
.modal-content #button {
margin-top: 15px;
text-align: right;
}
.modal-content span.radio {
width: 100%;
display: block;
padding: 5px 0;
}
.close-button {
top: 2px;
position: absolute;
right: 10px;
font-size: 1.4em;
cursor: pointer;
color: #949494;
font-weight: 600;
}
.close-button:hover {
color: #333333;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 16px;
transform: scale(0.8);
transition: 0.5s;
}
label {
display: block;
margin: 0 0 3px 0;
}
input[type="text"] {
width: 100%;
}
.modal-content ul {
margin-left: 0;
}
.modal-content ul li {
display: block;
position: relative;
float: left;
width: 100%;
}
.modal-content ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
.modal-content ul li label {
display: block;
position: relative;
font-weight: 300;
font-size: 1em;
padding: 10px 25px;
margin: 5px auto;
cursor: pointer;
-webkit-transition: all 0.25s linear;
background: #f5f5f5;
border-left: 3px solid #949494;
}
.modal-content ul li .check {
display: block;
position: absolute;
border: 2px solid #AAAAAA;
border-radius: 100%;
height: 12px;
width: 12px;
top: 21px;
left: 10px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.modal-content ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 4px;
width: 4px;
top: 2px;
left: 2px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
.modal-content input[type=radio]:checked~.check {
border: 2px solid #428bca;
}
.modal-content input[type=radio]:checked~.check::before {
background: #428bca;
}
.hide {
display: none;
}
.form {
margin-bottom: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="trigger button cancel">Cancel Subscription</a>
<div class="modal">
<div class="modal-content">
<form id="contact" action="" method="post">
<span class="close-button">×</span>
<h3>Title</h3>
<p>Description:</p>
<ul>
<li>
<input type="radio" name="radio" id="option1" value="option 2" onclick="show1();" /><label for="option1">Option 1</label>
<div class="check"></div>
</li>
<li>
<input type="radio" name="radio" id="option2" value="option 2" onclick="show2();" /><label for="option2">Option 2</label>
<div class="check"></div>
</li>
</ul>
<div id="button" class="hide">
<a id="submit_button" onclick="document.getElementById('contact').submit();" href="<?php echo esc_url($action['url']); ?>" class="unsubscribe-button button cancel">Submit and Cancel Subscription 2</a>
</div>
</form>
</div>
</div>