Отправить электронное письмо и отменить подписку на WordPress

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">&times;</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>