title: jQuery Ajax beforesend, success and error with axios
body: <p>I have a contact form on a static web page that I'm sending via formspree.
  I'm trying to implement ajax submit to avoid redirecting the page.</p>
  
  <p>I've found this <a href="https://gist.github.com/jannecederberg/785c1dc78e882b6bf85a5e77b31b0678#file-formspree-js" rel="nofollow noreferrer">gist</a> that does it in jQuery.</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var $contactForm = $('#contact-form');
  
  $contactForm.submit(function(e) {
      e.preventDefault();
      var $submit = $('input:submit', $contactForm);
      var defaultSubmitText = $submit.val();
  
      $.ajax({
          url: '//formspree.io/your@email.com',
          method: 'POST',
          data: $(this).serialize(),
          dataType: 'json',
          beforeSend: function() {
              $submit.attr('disabled', true).val('Sending message…');
          },
          success: function(data) {
              $submit.val('Message sent!');
              setTimeout(function() {
                  $submit.attr('disabled', false).val(defaultSubmitText);
              }, 5000);
          },
          error: function(err) {
              $submit.val('Oops, there was an error.');
              setTimeout(function() {
                  $submit.attr('disabled', false).val(defaultSubmitText);
              }, 5000);
          }
      });
  });
  </code></pre>
  
  <p>I would like to use only native javascript, so far this is how I've "translated it"</p>
  
  <p><strong>Native JS</strong></p>
  
  <pre><code>const form = document.querySelector('form');
  
  form.addEventListener("submit", function(e){
      e.preventDefault();
      const $submit = form.querySelector('.contact__submit');
      const defaultSubmitText = $submit.innerHTML;
  
      axios({
          method: 'post',
          url: 'https://formspree.io/your@email.com',
          data: serialize(form)
          // https://plainjs.com/javascript/ajax/serialize-form-data-into-a-query-string-45/
      })
          .then(function(response) {
              console.log('SENT!!', response.data);
          })
          .catch(function(){
              console.log('ERROR!!');
          });
      //https://github.com/stefanpenner/es6-promise
  });
  </code></pre>
  
  <p>How can i "translate" <code>beforeSend</code>, to let the user know that the message is sending ?</p>