JQuery Ajax до и после, успех и ошибка с Axios

Question

У меня есть контактная форма на статической веб-странице, которую я отправляю с помощью formpree.Я пытаюсь реализовать ajax submit, чтобы избежать перенаправления страницы.

Я нашел этот gist , который делает это в jQuery.

jQuery

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);
        }
    });
});

Я хотел бы использовать только нативный javascript, до сих пор именно так я «перевел»

Нативный JS

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
});

Как я могу "перевести" beforeSend, чтобы пользователь знал, что сообщение отправляется?