hawaku/contact.html

## contact.html
<html>

<head>
  <title>Contact</title>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script src="contact.js"></script>

  <!-- Special version of Bootstrap that only affects content wrapped in .bootstrap-iso -->
  <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

  <!-- Inline CSS based on choices in "Settings" tab -->
  <style>
    .bootstrap-iso .formden_header h2,
    .bootstrap-iso .formden_header p,
    .bootstrap-iso form {
      font-family: Arial, Helvetica, sans-serif;
      color: black
    }

    .bootstrap-iso form button,
    .bootstrap-iso form button:hover {
      color: white !important;
    }

    .asteriskField {
      color: red;
    }
  </style>
</head>

<body>

  <!-- HTML Form (wrapped in a .bootstrap-iso div) -->
  <div class="bootstrap-iso">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form id="inputform" action="#">
            <div class="form-group ">
              <label class="control-label requiredField" for="email">
                Email<span class="asteriskField">*</span>
              </label>
              <input class="form-control" id="email" name="email" type="text" />
            </div>
            <div class="form-group ">
              <label class="control-label " for="subject">
                Subject
              </label>
              <input class="form-control" id="subject" name="subject" type="text" />
            </div>
            <div class="form-group ">
              <label class="control-label requiredField" for="message">
                Message<span class="asteriskField">*</span>
              </label>
              <textarea class="form-control" cols="40" id="message" name="message" rows="10"></textarea>
            </div>
            <div class="form-group">
              <div>
                <button class="btn btn-primary " id="submit" name="submit" type="input">
                  Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

## contact.js
$(function() {
  $('#inputform').validate({
    rules: {
      'email': {
        required: true,
        email: true
      },
      'message': {
        required: true
      }
    },
    errorClass: 'text-warning',
    submitHandler: function(form) {

      $('#submit').attr('disabled', true);

      var url = "ここにPOST先URL"

      var xhr = new XMLHttpRequest();
      xhr.open("POST", url);
      xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
      var item = {
        email: $('#email').val(),
        subject: $('#subject').val(),
        message: $('#message').val()
      };
      xhr.send(JSON.stringify(item));

      $('#submit').attr('disabled', false);
    }
  });
});
	<html>

	<head>
	<title>Contact</title>

	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
	<script src="contact.js"></script>

	<!-- Special version of Bootstrap that only affects content wrapped in .bootstrap-iso -->
	<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

	<!-- Inline CSS based on choices in "Settings" tab -->
	<style>
	.bootstrap-iso .formden_header h2,
	.bootstrap-iso .formden_header p,
	.bootstrap-iso form {
	font-family: Arial, Helvetica, sans-serif;
	color: black
	}

	.bootstrap-iso form button,
	.bootstrap-iso form button:hover {
	color: white !important;
	}

	.asteriskField {
	color: red;
	}
	</style>
	</head>

	<body>

	<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
	<div class="bootstrap-iso">
	<div class="container-fluid">
	<div class="row">
	<div class="col-md-6 col-sm-6 col-xs-12">
	<form id="inputform" action="#">
	<div class="form-group ">
	<label class="control-label requiredField" for="email">
	Email<span class="asteriskField">*</span>
	</label>
	<input class="form-control" id="email" name="email" type="text" />
	</div>
	<div class="form-group ">
	<label class="control-label " for="subject">
	Subject
	</label>
	<input class="form-control" id="subject" name="subject" type="text" />
	</div>
	<div class="form-group ">
	<label class="control-label requiredField" for="message">
	Message<span class="asteriskField">*</span>
	</label>
	<textarea class="form-control" cols="40" id="message" name="message" rows="10"></textarea>
	</div>
	<div class="form-group">
	<div>
	<button class="btn btn-primary " id="submit" name="submit" type="input">
	Submit
	</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</body>

	</html>
	$(function() {
	$('#inputform').validate({
	rules: {
	'email': {
	required: true,
	email: true
	},
	'message': {
	required: true
	}
	},
	errorClass: 'text-warning',
	submitHandler: function(form) {

	$('#submit').attr('disabled', true);

	var url = "ここにPOST先URL"

	var xhr = new XMLHttpRequest();
	xhr.open("POST", url);
	xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
	var item = {
	email: $('#email').val(),
	subject: $('#subject').val(),
	message: $('#message').val()
	};
	xhr.send(JSON.stringify(item));

	$('#submit').attr('disabled', false);
	}
	});
	});