Craft 3 Contact Form Ajax.

script.js

/*
  Ajax submission of contact form within craft. ES6, vanilla js.
*/
    let contactForm = document.getElementById('footer_contact');

    if (contactForm) {
      contactForm.addEventListener('submit', e => {
        e.preventDefault();

        let formData = new FormData(contactForm);

        axios.post('/', formData).then(response => {
          if (response.data.success) {
            console.log('thanks');

            // error messages
            let errorMessages = contactForm.getElementsByClassName(
              'form-error'
            );
            for (var i = 0; i < errorMessages.length; i++) {
              errorMessages[i].style.display = 'none';
            }

            // show success message
            contactForm.getElementsByClassName(
              'success-message'
            )[0].style.display = 'block';

            // buttons
            let button = contactForm.getElementsByClassName('form-button')[0];
            button.childNodes[0].nodeValue = 'Sent Successfully';
            button.setAttribute('disabled', 'true');
          } else {
            console.log(response.data.errors.message);

            // e.g. response.error.fromName => ['From Name is required']
            if (response.data.errors.fromEmail) {
              let emailError = document.getElementById('from-email');

              emailError.insertAdjacentHTML(
                'afterend',
                '<p class="form-error">Please enter an email</p>'
              );
            }

            if (response.data.errors.message) {
              let message = document.getElementById('message');

              message.insertAdjacentHTML(
                'afterend',
                '<p class="form-error">Please enter a message</p>'
              );
            }
          }
        });
      });