Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <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 -->
- <title>Halaman Hubungi</title>
- <!-- Bootstrap -->
- <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
- <![endif]-->
- <style type="text/css">
- /* GLOBAL STYLES
- -------------------------------------------------- */
- /* Padding below the footer and lighter body text */
- body {
- padding-bottom: 20px;
- color: #5a5a5a;
- background-image: url("images/header.jpg");
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- }
- /* CUSTOMIZE THE NAVBAR
- -------------------------------------------------- */
- /* Special class on .container surrounding .navbar, used for positioning it into place. */
- .navbar-wrapper {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- z-index: 20;
- }
- /* Flip around the padding for proper display in narrow viewports */
- .navbar-wrapper > .container {
- padding-right: 0;
- padding-left: 0;
- }
- .navbar-wrapper .navbar {
- padding-right: 15px;
- padding-left: 15px;
- }
- .navbar-wrapper .navbar .container {
- width: auto;
- }
- .mycontent {
- padding-top: 100px;
- }
- .error {
- color:#FF0000;
- }
- </style>
- </head>
- <body>
- <nav class="navbar navbar-inverse navbar-fixed-top">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
- <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" href="#">Project name</a>
- </div>
- <div id="navbar" class="collapse navbar-collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="index.html">Home</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="#contact">Contact</a></li>
- </ul>
- </div><!--/.nav-collapse -->
- </div>
- </nav>
- <div class="container mycontent">
- <div class="row">
- <div class="col-sm-6 col-sm-offset-3">
- <div class="panel panel-primary bayang">
- <div class="panel-heading"
- <h1 class="panel-title">Borang Hubungi</h1>
- </div>
- <div class="panel-body">
- <p>Sila isikan borang dibawah untuk menghantar pesanan anda:</p>
- <form method="POST" action="#" id="borang-hubungi">
- <div class="form-group">
- <label for="nama_pengguna" id="label_nama_pengguna">Nama Anda</label>
- <input type="text" name="nama_pengguna" placeholder="Contoh: Ali Bin Abu" class="form-control" id="nama_pengguna">
- <span class="errorMessage"></span>
- </div>
- <div class="form-group">
- <label for="email_pengguna" id="label_nama_pengguna">Email Anda</label>
- <input type="email" name="email_pengguna" placeholder="Contoh: ali@domain.com" class="form-control" >
- <span class="errorMessage"></span>
- </div>
- <div class="form-group">
- <label for="telefon_pengguna" id="label_nama_pengguna">No. Telefon Anda</label>
- <input type="text" name="telefon_pengguna" placeholder="Contoh: 0123456789" class="form-control" >
- </div>
- <div class="form-group">
- <label for="mesej_pengguna">Mesej Anda</label>
- <textarea name="mesej_pengguna" placeholder="Contoh: Saya memerlukan bantuan (nyatakan masalah anda) ...." class="form-control"></textarea>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" value="" name="pengesahan">
- Hantar salinan mesej ke emel saya
- </label>
- </div>
- <button type="submit" class="btn btn-primary btn-lg"> Hantar Pesanan</button>
- </form>
- </div><!-- tutup panel-body -->
- </div><!-- tutup panel -->
- </div>
- </div>
- </div><!-- tutup container -->
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <!-- Include all compiled plugins (below), or include individual files as needed -->
- <script src="bootstrap/js/bootstrap.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
- <script>
- $(function() {
- $("#borang-hubungi").validate({
- rules: {
- nama_pengguna: {
- required: true,
- minlength: 3
- },
- email_pengguna: {
- required: true,
- email: true
- },
- telefon_pengguna: "required",
- mesej_pengguna: {
- required: true,
- minlength: 3
- }
- },
- submitHandler: function(form) {
- form.submit();
- }
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement