Skip to content

Instantly share code, notes, and snippets.

@comeonly

comeonly/script.js

Created June 9, 2017 05:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save comeonly/15c350b793abddd6951a7761549f4afb to your computer and use it in GitHub Desktop.
Save comeonly/15c350b793abddd6951a7761549f4afb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
script.js
$(document).ready(function(){
$("#contactForm").on("submit", function(event){
event.preventDefault();
var e = this;
$.post(
"contact.php", $(e).serialize()
).done(function(data){
$(e).html(data);
}).fail(function(data){
$("#contactForm").prepend(
'<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>エラー！</strong> ページを再読み込みしてお試しください。</div>'
);
})
});
});
Raw
simple_contact_form.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="****************">
<title>****************</title>
<!-- OGP -->
<meta property="og:title" content="****************">
<meta property="og:type" content="website">
<meta property="og:url" content="http://example.com/">
<meta property="og:image" content="http://example.com/images/ogp.png">
<meta property="og:site_name" content="****************">
<meta property="og:description" content="****************" />
<!-- Facebook -->
<meta property="fb:app_id" content="****************">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<!-- Favicon -->
<!-- Paste code here from http://realfavicongenerator.net -->
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><img src="images/logo.png" alt="****************"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#contact">お問い合わせ</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Contact -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>お問い合わせ</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form name="sentMessage" id="contactForm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="お名前 *" name="name" data-validation-required-message="お名前をご記入下さい" required>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="メールアドレス *" name="email" data-validation-required-message="メールアドレスをご記入下さい" required>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" placeholder="お問い合わせ内容をどうぞ *" name="message" required="" data-validation-required-message="お問い合わせ内容をご記入下さい"></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn">送信</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container text-center">
<p>Designed by <a href="http://izuya.co.jp"><span>izuya</span>co.jp</a></p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Raw
style.css
body {
padding-top: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment