sendEmail.js

function showMessage(message){
  const processDiv = document.getElementById('process');
  processDiv.innerHTML = message;
  processDiv.style.display = 'block';
}

function hideMessage() {
  const processDiv = document.getElementById('process');
  processDiv.style.display = 'none';
}

function showForm() {
  const contactForm = document.getElementById('contactForm');
  contactForm.style.display = 'block';
}

function hideForm() {
  const contactForm = document.getElementById('contactForm');
  contactForm.style.display = 'none';
}

function sendAjaxForm(form){
  const formData = new FormData(form);
  const request = new XMLHttpRequest();

  request.addEventListener('load', function(){
    showMessage('Mensaje enviado, gracias!');

    setTimeout(function(){
      showForm();
      hideMessage();
    }, 3000);
  });

  request.addEventListener('error', function(){
    showMessage('Ha ocurrido un error, intenta más tarde');
  });

  request.open('post', 'send-email.php');
  request.send(formData);
}

function sendEmail(event) {
  event.preventDefault();

  showMessage('procesando solicitud');
  hideForm();

  sendAjaxForm(contactForm);
}

const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', sendEmail);