Skip to content

Instantly share code, notes, and snippets.

@xhiroga

xhiroga/contact_form_sample.html

Created September 30, 2017 06:53
Show Gist options
  • Save xhiroga/870fc65cbd1254f0f3c9832bc42236ac to your computer and use it in GitHub Desktop.
Save xhiroga/870fc65cbd1254f0f3c9832bc42236ac to your computer and use it in GitHub Desktop.
Download ZIP
Pingendoで作ってみたページ
Raw
contact_form_sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css"> </head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">さわらのオススメ本紹介</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<a class="btn navbar-btn ml-2 text-white btn-success"><i class="fa d-inline fa-lg fa-print"></i>印刷</a>
<a class="btn navbar-btn ml-2 text-white btn-success"><i class="fa d-inline fa-lg fa-envelope-o"></i>お問いあわせ</a>
<a class="btn navbar-btn ml-2 text-white btn-danger"><i class="fa d-inline fa-lg fa-times-circle"></i>閉じる</a>
</div>
</div>
</nav>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">お問い合わせフォーム</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-light">
<form>
<div class="form-row">
<div class="form-group col-md-6"> <label for="inputEmail4" class="col-form-label">名前</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="〇田×男"> </div>
<div class="form-group col-md-6"> <label for="inputPassword4" class="col-form-label">所属<br></label>
<input type="text" class="form-control" id="inputPassword4" placeholder="株式会社〇〇"> </div>
</div>
<div class="form-group"> <label for="inputAddress" class="col-form-label">お問いあわせ内容</label> <textarea type="text" class="form-control" id="inputAddress" placeholder="SF以外の本は読まないんですか？"></textarea> </div>
<div class="form-group"> <label for="inputAddress" class="col-form-label">何で知りましたか？</label> <textarea type="text" class="form-control" id="inputAddress" placeholder="twitterでたまたま"></textarea> </div>
<div class="form-row">
<div class="form-group col-md-6"> <label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity"> </div>
<div class="form-group col-md-4"> <label for="inputState" class="col-form-label">State</label> <select id="inputState" class="form-control">Choose</select> </div>
<div class="form-group col-md-2"> <label for="inputZip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="inputZip"> </div>
</div>
<div class="form-group">
<div class="form-check"> <label class="form-check-label">
<input class="form-check-input" type="checkbox" value="on"> ニュースレターを希望する
</label> </div>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark text-white">
<div class="container">
<div class="row">
<div class="col-md-9">
<p class="lead">Sign up to our newsletter for the latest news</p>
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your e-mail here"> </div>
<button type="submit" class="btn btn-primary ml-3">Subscribe</button>
</form>
</div>
<div class="col-4 col-md-1 align-self-center">
<a href="https://www.facebook.com" target="blank"><i class="fa fa-fw fa-facebook fa-3x text-white"></i></a>
</div>
<div class="col-4 col-md-1 align-self-center">
<a href="https://twitter.com" target="blank"><i class="fa fa-fw fa-twitter fa-3x text-white"></i></a>
</div>
<div class="col-4 col-md-1 align-self-center">
<a href="https://www.instagram.com" target="blank"><i class="fa fa-fw fa-instagram text-white fa-3x"></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3 text-center">
<p>© Copyright 2017 Pingendo - All rights reserved.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment