Skip to content

Instantly share code, notes, and snippets.

@hawaku hawaku/contact.html
Last active Jan 31, 2018

Embed
What would you like to do?
<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);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.