AJAX-based contact form for Craft CMS. More info: http://craftsnippets.com/articles/building-ajax-contact-form-with-craft-cms

contact_form.twig

<form class="js-contact-form">
<fieldset class="js-contact-form-fieldset">
  {{ csrfInput() }}

    <div class="field">
        {{tag('label', {
          for: 'form-email',
          class: 'label',
          text: 'Your Email'|t('contact-form'),
        }) }}
        {{tag('input', {
          type: 'email',
          name: 'fromEmail',
          id: 'form-email',
          class: 'input',
          required: true,
        }) }}
    </div>

    <div class="field">
        {{tag('label', {
          for: 'form-name',
          class: 'label',
          text: 'Your Name'|t('contact-form'),
        }) }}
        {{tag('input', {
          type: 'text',
          name: 'fromName',
          id: 'form-name',
          class: 'input',
          required: true,
        }) }}
    </div>

  <div class="field">
        {{tag('label', {
          for: 'form-text',
          class: 'label',
          text: 'Message'|t('contact-form'),
        }) }}
        {{tag('textarea', {
          type: 'text',
          name: 'message[text]',
          id: 'form-text',
          class: 'input',
          required: true,
        }) }}
  </div>

  <div class="field">
    <button class="js-contact-form-send button is-primary">
        {{'Send'|t('app')}}
    </button>    
  </div>
</fieldset>
</form>

javascript - Fetch API version

{% js %}
// twig to js
var submit_url = "{{alias('@web')|e('js')}}";
var message_success = "{{'Your message has been sent.'|t('contact-form')}}";
var message_fail = "{{'Message could not be sent!'|t}}";

// html elements
var form_element = document.querySelector('.js-contact-form');
var form_button = form_element.querySelector('.js-contact-form-send')
var fieldset = form_element.querySelector('.js-contact-form-fieldset')


form_element.addEventListener("submit", function(e){

      e.preventDefault();   
      var formData = new FormData(form_element);
      formData.append('action', 'contact-form/send');

      form_button.classList.add('is-loading');
      fieldset.setAttribute('disabled', true);

     fetch(submit_url+'/', {
      method: 'POST', 
      body: formData,
      headers: {
        'Accept': 'application/json',
      },
     })
     .then(response => response.json())
     .then(data => {
        form_button.classList.remove('is-loading');
        fieldset.removeAttribute('disabled');
        if(data.success == true){
          form_element.reset();
          alert(message_success);
        }else{
          var allErrors = Array();
          for ( fieldErrors of Object.values(data.errors)){
             var concatedArray =  allErrors.concat(fieldErrors);
             allErrors = concatedArray;
          }
          var errorString = allErrors.join(' ');
          alert(errorString);
        }
     })
     .catch(err => {
      alert(message_fail)
    });

});
{% endjs %}

javascript - jQuery version

{% js %}
// twig to js
var submit_url = "{{alias('@web')|e('js')}}";
var message_success = "{{'Your message has been sent.'|t('contact-form')}}";
var message_fail = "{{'Message could not be sent!'|t}}";

// html elements
var form_element = $('.js-contact-form');
var form_button = form_element.find('.js-contact-form-send')
var fieldset = form_element.find('.js-contact-form-fieldset')

// ajax request on submit
form_element.submit( function(e){

    e.preventDefault()
    var formData = new FormData(form_element[0]);
    formData.append('action', 'contact-form/send');

      $.ajax({
        contentType: false,
        processData: false,
        method: "POST",
        url: submit_url+'/',
        dataType: "json",
        data: formData,
        beforeSend: function( ) {
          form_button.addClass('is-loading');
          fieldset.prop('disabled', true);
        },
      }).always(function() {
        form_button.removeClass('is-loading');
        fieldset.prop('disabled', false);
      }).done(function( data ) {
        if(data.success == true){
          form_element[0].reset();
          alert(message_success);
        }else{
          var allErrors = Array();
          for ( fieldErrors of Object.values(data.errors)){
             var concatedArray =  allErrors.concat(fieldErrors);
             allErrors = concatedArray;
          }
          var errorString = allErrors.join(' ');
          alert(errorString);
        }
      }).fail(function( data ) {
          alert(message_fail);
      });
})
{% endjs %}

This was a HUGE save for me, thank you!