Home / Template Gratis / Form Kontak Materialize CSS Framework

Sunday, October 25, 2015

Form Kontak Materialize CSS Framework


tutorialmaterialize.blogspot.co.id  - Assalamualikum, puji syukur alhamdulillah pada dini hari saya ingin berbagi template form kontak menggunakan materialize css framework. bagi yang belum punya framework materialize, bisa download di materializecss.com dan beriku adalah kodingan untuk form kontaknya.

<!DOCTYPE html>
<html>
<head>
<title>Form Kontak dengan Materialize CSS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<nav class="teal lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Form Kontak</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      <ul id="nav-mobile" class="side-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">Menu</i></a>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <form action="" method="post">
      <div class="input-field col s6">
      <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" class="validate" name="nama" required>
          <label for="icon_prefix">Nama Lengkap</label>
     </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">call</i>
          <input id="icon_prefix" type="text" class="validate" name="notelp" required>
          <label for="icon_prefix">Nomor Handphone</label>
    </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">open_in_new</i>
          <input id="icon_prefix" type="text" class="validate" name="website" required>
          <label for="icon_prefix">Website</label>
    </div>
     <div class="input-field col s12">
    <i class="material-icons prefix">comment</i>
          <textarea id="textarea1" class="materialize-textarea" name="pesan" required></textarea>
          <label for="textarea1">Pesan</label>
     </div>
      <div class="row center">
        <button class="btn waves-effect waves-light" type="submit" name="submit">Kirim Pesan<i class="material-icons right">send</i></button>
        <button class="btn waves-effect waves-light" type="reset" name="reset">Reset<i class="material-icons right">subject</i></button>
      </div>
      </form>
      <br><br>
      <div class="row center">
Copyright 2015 <a href="http://tutorialmaterialize.blogspot.co.id" title="Materialize ID">Materialize ID</a>.
    </div>
  </div>
<script src="js/materialize.min.js"></script>
</body>
</html> 

Form Kontak Materialize CSS Framework Rating: 4.5 Diposkan Oleh: Materialize ID

1 comments:

Subscribe to: Post Comments (Atom)