Счетчик отправленных форм на php/валидация формы/подключение reCAPTCHA

var forms = document.getElementById('support'); 
var names = document.getElementById('name'); 
var validn = document.getElementById('vn'); 
var iconrequired = document.getElementById('namereq'); 
var email = document.getElementById('sellection'); 
var valids = document.getElementById('vs'); 
var iconrequireds = document.getElementById('sellectionreq'); 
var text = document.getElementById('qestions'); 
var validt = document.getElementById('vt'); 
var iconrequiredt = document.getElementById('textreq'); 
 
 
//ВАЛИДАЦИЯ ПОЛЕЙ ФОРМЫ 
document.addEventListener('input', validateform); 
 
function validateform() { 
 
  var x = document.forms["support"]["sellection"].value; 
 
  if (names.validity.valid) { 
    validn.className = "valid"; 
    iconrequired.classList.add("hide"); 
  } 
 
  if (email.validity.valid && x !== "") { 
    valids.className = "valid"; 
    iconrequireds.classList.add("hide"); 
  } 
 
  if (text.validity.valid) { 
    validt.className = "valid"; 
    iconrequiredt.classList.add("hide"); 
  } 
 
  if (names.validity.valid && email.validity.valid && !email.hasAttribute('disabled') && text.validity.valid === true) { 
 
    iconrequiredt.classList.add("hide"); 
    iconrequireds.classList.add("hide"); 
    iconrequired.classList.add("hide"); 
 
    return true 
 
  } else { 
 
    if (!names.validity.valid) { 
      validn.className = "invalid"; 
      iconrequired.classList.add("hide"); 
 
    } 
 
    if (!email.validity.valid) { 
      valids.className = "invalid"; 
      iconrequireds.classList.add("hide"); 
    } 
 
    if (!text.validity.valid) { 
      validt.className = "invalid"; 
      iconrequiredt.classList.add("hide"); 
    } 
 
    if (names.validity.valid || email.validity.valid || !email.hasAttribute('disabled') || text.validity.valid === false) { 
 
      iconrequiredt.classList.add("hide"); 
      iconrequireds.classList.add("hide"); 
      iconrequired.classList.add("hide"); 
    } 
 
  } 
 
} 
 
 
//ВАЛИДАЦИЯ ФОРМЫ 
forms.addEventListener('submit', validspace) 
 
function validspace() { 
 
  if (IsNullEmail() && IsNullName() && IsNullText() && validateform() === true) { 
 
    submitFormAjax(); 
    return false; 
 
  } else { 
 
    IsNullEmail(); 
    IsNullName(); 
    IsNullText(); 
    return false 
  } 
 
  return false 
} 
 
//ПУСТЫЕ ПОЛЯ 
function IsNullEmail() { 
 
  if (email.value.length === 0) { 
 
    iconrequireds.classList.remove("hide"); 
 
  } else { 
 
    iconrequireds.classList.add("hide"); 
 
    return true 
  } 
 
} 
 
function IsNullName() { 
 
  if (names.value.length === 0) { 
 
    iconrequired.classList.remove("hide"); 
 
 
  } else { 
 
    iconrequired.classList.add("hide"); 
 
    return true 
 
  } 
 
} 
 
function IsNullText() { 
 
  if (text.value.length === 0) { 
 
    iconrequiredt.classList.remove("hide"); 
 
  } else { 
 
 
    iconrequiredt.classList.add("hide"); 
 
    return true 
 
  } 
} 
 
//XMLHttpRequest 
function submitFormAjax() { 
 
  let captcha = grecaptcha.getResponse(); 
 
  if (captcha.length) { 
 
    let xmlhttp = window.XMLHttpRequest ? 
      new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
 
    xmlhttp.onreadystatechange = function() { 
      if (this.readyState === 4 && this.status === 200) 
        alert(this.responseText); 
    } 
 
    let formData = new FormData(document.querySelector('#support')); 
    formData.append('g-recaptcha-response', captcha); 
 
    let data = new URLSearchParams(Array.from(formData)).toString(); 
 
    xmlhttp.open('POST', 'https://www.archsupport.ru/post-email.php', true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send(data); 
  } 
 
  document.querySelector('#support').reset(); 
  grecaptcha.reset(); 
} 
 
// setATTR'S 
Element.prototype.setAttributes = function(attrs) { 
  for (var idx in attrs) { 
    if ((idx == 'styles' || idx == 'style') && typeof attrs[idx] == 'object') { 
      for (var prop in attrs[idx]) { 
        this.style[prop] = attrs[idx][prop] 
      } 
    } else { 
      this.setAttribute(idx, attrs[idx]); 
    } 
  } 
}; 
 
//CHANGE VALUE 
let radioChange = document.querySelectorAll(".radio"); 
 
for (var i = 0, len = radioChange.length; i < len; i++) { 
  radioChange[i].addEventListener('change', change); 
} 
 
function change() { 
 
  let input = document.getElementById("sellection"); 
 
  if (document.querySelector("#radio").checked === true) { 
    input.removeAttribute('disabled') 
    input.setAttributes({ 
      'type': 'email', 
      'placeholder': 'example@yourmail.ru', 
      'autocomplete': 'email', 
      'maxlength': '35', 
      'minlength': '12', 
      'pattern': '^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$', 
      'value': "" 
    }); 
  } else if (document.querySelector("#radio").checked == false) { 
 
    input.removeAttribute('disabled'); 
    input.setAttributes({ 
      'type': 'tel', 
      'placeholder': '+7-910-205-46-15', 
      'autocomplete': 'tel', 
      'maxlength': '36', 
      'minlength': '11', 
      'pattern': '\\+7\\s?[\\(]{0,1}9[0-9]{2}[\\)]{0,1}\\s?\\d{3}[-]{0,1}\\d{2}[-]{0,1}\\d{2}', 
      'value': "" 
    }); 
  } 
 
  input.value = ""; 
  input.focus(); 
}; 
 
 
//ICON ONCLICK 
function toggleItem(elem) { 
  for (var i = 0; i < elem.length; i++) { 
    elem[i].addEventListener("change", function(e) { 
      var current = this; 
      for (var i = 0; i < elem.length; i++) { 
        if (current != elem[i]) { 
          elem[i].classList.remove('checked'); 
        } else if (current.classList.contains('checked') === true) { 
          current.classList.remove('checked'); 
        } else { 
          current.classList.add('checked') 
        } 
      } 
      e.preventDefault(); 
    }); 
  }; 
} 
toggleItem(document.querySelectorAll('.icons'));

@keyframes req { 
  0% { 
    transform: translatex(0px); 
  } 
  100% { 
    transform: translatex(5px); 
  } 
} 
 
@keyframes inv { 
  0% { 
    opacity: .5; 
  } 
  100% { 
    opacity: 1; 
  } 
} 
 
@import url('https://fonts.googleapis.com/css?family=Raleway:100&display=swap'); 
* { 
  padding: 0; 
  margin: 0; 
  font-family: 'Raleway', sans-serif !important; 
  font-weight: 100 !important; 
  --lighter: #ededed; 
  --light: #d6d6d6; 
  --dark: #d7d7d7; 
  --dark1: gray; 
  --black: #343434; 
} 
 
form { 
  font-size: 24px; 
  position: relative; 
  width: 100%; 
  display: inline-flex; 
  flex-direction: column; 
} 
 
textarea { 
  height: 30vh; 
  border-radius: 18px; 
  padding-left: 15px; 
  padding-top: 10px; 
  border: 2px solid var(--dark); 
  overflow: hidden; 
  overflow-y: scroll; 
  outline: none; 
  resize: none 
} 
 
input, 
textarea { 
  font-size: 18px; 
} 
 
 ::-webkit-input-placeholder { 
  color: var(--dark1); 
  font-size: 18px; 
} 
 
 ::-moz-placeholder { 
  color: var(--dark1); 
  font-size: 18px; 
} 
 
 
/* Firefox 19+ */ 
 
 :-moz-placeholder { 
  color: var(--dark1); 
  font-size: 18px; 
} 
 
 
/* Firefox 18- */ 
 
 :-ms-input-placeholder { 
  color: var(--dark1); 
  font-size: 18px; 
} 
 
input:not([type="submit"]) { 
  border-radius: 100px; 
  padding-left: 15px; 
  height: 36px; 
  border: none; 
  background: var(--lighter); 
} 
 
input:focus { 
  outline: none; 
  border: 2px solid var(--dark); 
  box-sizing: border-box; 
  background: white; 
  padding-left: 13px; 
} 
 
.required { 
  display: inline-flex; 
  width: 100%; 
  flex-direction: column; 
  margin-bottom: 15px; 
  position: relative; 
} 
 
.iconrequired { 
  margin: auto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 90px; 
  height: 14px; 
  color: white; 
  border-radius: 100px; 
  font-size: 10px; 
  background: var(--black); 
  position: absolute; 
  right: 15px; 
  top: 10px; 
  opacity: 1; 
  transition: opacity ease-out 1s; 
  animation: .05s ease-in-out 0s 4 alternate req; 
} 
 
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { 
  transition: background-color 5000s ease-in-out 0s; 
  border: 2px solid #f3f3f3; 
  box-sizing: border-box; 
  padding-left: 13px; 
} 
 
div.button-set { 
  display: inline-flex; 
} 
 
div.button-set>label { 
  position: relative; 
  flex: 0 0 auto; 
  height: 50px; 
  width: 50px; 
  margin-left: 15px; 
  border-radius: 100px; 
  outline: none; 
  border: none; 
  margin-bottom: 20px; 
} 
 
.checked { 
  background: var(--dark); 
  border-radius: 100px; 
} 
 
input[type="submit"] { 
  height: 36px; 
  width: 160px; 
  font-size: 24px; 
  margin-top: 20px; 
  margin-left: 10px; 
  border: none; 
  border-radius: 100px; 
  background: #f3f3f3; 
  padding: 0; 
} 
 
 ::-webkit-scrollbar { 
  position: absolute; 
  z-index: 9999; 
  width: 5px; 
} 
 
 ::-webkit-scrollbar-button { 
  display: none; 
} 
 
 ::-webkit-scrollbar-track { 
  z-index: 9999; 
  background-color: transparent; 
} 
 
 ::-webkit-scrollbar-track-piece { 
  z-index: 9999; 
  z-index: 9999; 
  background-color: transparent; 
} 
 
 ::-webkit-scrollbar-thumb { 
  z-index: 9999; 
  background-color: #d7d7d7; 
  border-radius: 3px; 
} 
 
 ::-webkit-scrollbar-corner { 
  z-index: 9999; 
  background-color: #d7d7d7; 
} 
 
.invalid { 
  width: 12px; 
  height: 12px; 
  position: absolute; 
  right: 15px; 
  top: 12px; 
  background: tomato; 
  border-radius: 6px; 
  animation: 2s ease-in-out 0s infinite alternate inv; 
} 
 
.valid { 
  width: 12px; 
  height: 12px; 
  position: absolute; 
  right: 15px; 
  top: 12px; 
  background: #9dc46b; 
  border-radius: 6px; 
  animation: 2s ease-in-out 0s infinite alternate inv; 
} 
 
.error { 
  text-align: right; 
  font-size: 12px; 
  padding-right: 20px; 
  padding-top: 10px; 
  color: gray; 
  letter-spacing: .05em; 
} 
 
.hide { 
  display: none; 
} 
 
.g-recaptcha { 
  right: 0; 
  margin-top: 36px; 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8"> 
 
  <script src='https://www.google.com/recaptcha/api.js' async defer></script> 
</head> 
 
<body> 
 
  <form id="support" onSubmit='return false' novalidate> 
   
    <label class="required"><span id="vs" class="invalid hide"></span><input id="sellection" class="mail sellection" name="sel" vlaue="" placeholder="выбери способ связи...."  required disabled><span id="error1"></span><div id="sellectionreq" class="iconrequired hide">ОБЯЗАТЕЛЬНО</div></label> 
     
    <div class="button-set"> 
     
      <label title="Email" class="icons"><img  src='https://drive.google.com/uc?export=view&id=12dgg88tY-Zv9YJSF3GGFKiBoccbcli7b'><input class="radio" id="radio" type="radio" name="button-set" value="на почту" style="display:none;"></label> 
       
      <label for="radio1" title="WhatsApp" class="icons"><img src='https://drive.google.com/uc?export=view&id=1SEtRXe081ekScf3q8RGR-AbCPIj-BfDM'><input class="radio" id="radio1" type="radio" name="button-set" value="в WhatsApp" style="display:none;"></label> 
       
      <label for="radio2" title="Telegram" class="icons"><img  src='https://drive.google.com/uc?export=view&id=1f_qsaD8vSG99IdKvWNm9xWiJ8h1wdjeM'><input class="radio" id="radio2" type="radio" name="button-set" value="в Telegram" style="display:none;"></label> 
       
      <label for="radio3" title="Viber" class="icons"><img  src='https://drive.google.com/uc?export=view&id=1Qq1htnz12ztZ1i5wPYOaXPLTWul_Vj3o'><input class="radio" id="radio3" type="radio" name="button-set" value="в Viber" style="display:none;"></label> 
       
    </div> 
     
    <label class="required"><span id="vn" class="invalid hide"></span> 
     
			<input id="name" class="mail" type="name" name="name" autocomplete= none value="" placeholder="как к тебе обращаться...."  pattern="[А-Яа-яЁё]+(\s+[А-Яа-яЁё]+)?" maxlength="15" minlength="2" required><div id="namereq" class="iconrequired hide">ОБЯЗАТЕЛЬНО</div></label> 
       
    <label class="required"><span id="vt" class="invalid hide"></span><textarea id="qestions" type="text" value="" placeholder="твой вопрос...." name="message"  pattern="[А-Яа-яЁё]+(\s+[А-Яа-яЁё]+)?" maxlength="400" minlength="40" required></textarea><div id="textreq" class="iconrequired hide">ОБЯЗАТЕЛЬНО</div></label> 
     
    <input name="submit" type="submit" id="submit" value="ОТПРАВИТЬ" /> 
     
  </form> 
  <div id="message"></div> 
  <div class="g-recaptcha" data-sitekey="6LceVswUAAAAAA09b8TVrZhKMFKOhxMmdvPWOzQm" data-size="visible"> 
  </div> 
</body> 
 
</html>