Bulma Contact Request Ajax Form

<div class="container">
  <div class="columns is-justify-content-center">
    <div class="column is-6-tablet is-5-desktop is-4-widescreen is-3-fullh">
      <form
        id="contact-form"
        method="POST"
        action="https://herotofu.com/start"
        class="box p-5"
      >
        <label class="is-block mb-4">
          <span class="is-block mb-2">Your name</span>
          <input
            name="name"
            type="text"
            class="input"
            placeholder="Joe Bloggs"
          />
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2">Email address</span>
          <input
            required
            name="email"
            type="email"
            class="input"
            placeholder="joe.bloggs@example.com"
          />
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2">Message</span>
          <textarea
            name="message"
            class="textarea"
            rows="3"
            placeholder="Tell us what you're thinking about..."
          ></textarea>
        </label>

        <div class="mb-4">
          <button id="form-submit" type="submit" class="button is-link px-4">
            Contact Us
          </button>
        </div>

        <div>
          <div class="is-size-7 has-text-right">
            by
            <a
              href="https://herotofu.com/start"
              class="has-text-dark"
              target="_blank"
              >HeroTofu</a
            >
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  $('#contact-form').submit(function (e) {
    e.preventDefault();

    var $form = $(this),
      $formSubmit = $('#form-submit'),
      formArray = $form.serializeArray(),
      data = {};

    $formSubmit.attr('disabled', 'disabled').text('Loading...');

    for (var i = 0; i < formArray.length; i++) {
      data[formArray[i].name] = formArray[i].value;
    }

    $.ajax({
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      url: $form.attr('action'),
      data: JSON.stringify(data),
    }).always(function (data) {
      if (data.status === 422) {
        alert('Ajax requests do not support captcha. Please turn it off.');
        $formSubmit
          .parent()
          .html('<strong>Error, failed to send the message!</strong>');
      }

      if (data.status !== 200) {
        alert('Error: ' + data.statusText + ' (' + data.status + ')');
        $formSubmit
          .parent()
          .html('<strong>Error, failed to send the message!</strong>');
      }

      $formSubmit.parent().html('Thank you for contacting us!');
    });
  });
</script>

/* The following CSS is used only for the preview,
   please don't copy it to your production code */
body { padding: 2rem 0; }