Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 2]

Sekarang kita akan menambahkan CSS pada  halaman HTML kita untuk memperindah tampilan form. Sebagian besar CSS posisi form dan status messages di tengah jendela, dan form style dan form fields.

<style type="text/css">
    
 
/* Add some margin to the page and set a default font and colour */
 
body {
  margin: 30px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
}
 
 
/* Set the content dimensions */
 
#content {
  width: 800px;
  padding: 50px;
  margin: 0<span class="wb6hlyvz4"id="wb6hlyvz4_6"style="height: 16px;">auto</span>;
  display: <span class="wb6hlyvz4"id="wb6hlyvz4_5"style="height: 16px;">block</span>;
  font-size: 1.2em;
}
 
#content h2{
  line-height: 1.5em;
}
 
 
/* Add curved borders to various elements */
 
#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
  border-radius: 10px;
}
 
 
/* Style for the contact form and status messages */
 
#contactForm, .statusMessage {
  color: #666;
  background-color: #ebedf2;
  background: -webkit-gradient( linear, leftbottom, lefttop, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
  background: -moz-linear-gradient( centerbottom, #dfe1e50%, #ebedf2100%); 
  border: 1pxsolid#aaa;
  -moz-box-shadow: 001emrgba(0, 0, 0, .5);
  -webkit-box-shadow: 001emrgba(0, 0, 0, .5);
  box-shadow: 001emrgba(0, 0, 0, .5);
  opacity: .95;
}
 
 
/* The form dimensions */
 
#contactForm {
  width: 40em;
  height: 33em;
  padding: 01.5em1.5em1.5em;
  margin: 0auto;
}
 
 
/* Position the form in the middle of the window (if JavaScript is enabled) */
 
#contactForm.positioned {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
}
 
 
/* Dimensions and position of the status messages */
 
.statusMessage {
  display: none;
  margin: auto;
  width: 30em;
  height: 2em;
  padding: 1.5em;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
 
.statusMessage p {
  text-align: center;
  margin: 0;
  padding: 0;
}
 
 
/* The header at the top of the form */
 
#contactForm h2{
  font-size: 2em;
  font-style: italic;
  letter-spacing: .05em;
  margin: 001em-.75em;
  padding: 1em;
  width: 19.5em
  color: #aeb6aa;
  background: #dfe0e5url('images/stamp.jpg') no-repeat15em-3em; /* http://morguefile.com/archive/display/606433 */
  border-bottom: 1pxsolid#aaa;
  -moz-border-radius: 10px10px00;
  -webkit-border-radius: 10px10px00
  border-radius: 10px10px00;
}
 
 
/* Give form elements consistent margin, padding and line height */
 
#contactForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#contactForm ul li {
  margin: .9em000;
  padding: 0;
}
 
#contactForm input, #contactForm label {
  line-height: 1em;
}
 
 
/* The field labels */
 
label {
  display: block;
  float: left;
  clear: left;
  text-align: right;
  width: 28%;
  padding: .4em000;
  margin: .15em.5em00;
  font-weight: bold;
}
 
 
/* The fields */
 
input, textarea {
  display: block;
  margin: 0;
  padding: .4em;
  width: 67%;
  font-family: "Georgia", serif;
  font-size: 1em;
  border: 1pxsolid#aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;   
  border-radius: 5px;
  -moz-box-shadow: rgba(0,0,0,.2) 01px4pxinset;
  -webkit-box-shadow: rgba(0,0,0,.2) 01px4pxinset;
  box-shadow: rgba(0,0,0,.2) 01px4pxinset;
  background: #fff;
}
 
textarea {
  height: 13em;
  line-height: 1.5em;
  resize: none;
}
 
 
/* Place a border around focused fields, and hide the inner shadow */
 
#contactForm *:focus {
  border: 1pxsolid#66f;
  outline: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
 
 
/* Display correctly filled-in fields with a green background */
 
input:valid, textarea:valid {
  background: #dfd;
}
 
 
/* The Send and Cancel buttons */
 
input[type="submit"], input[type="button"] {
  float: right;
  margin: 2em1em01em;
  width: 10em;
  padding: .5em;
  border: 1pxsolid#666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
  border-radius: 10px;
  -moz-box-shadow: 00.5emrgba(0, 0, 0, .8);
  -webkit-box-shadow: 00.5emrgba(0, 0, 0, .8);
  box-shadow: 00.5emrgba(0, 0, 0, .8);
  color: #fff;
  background: #0a0;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  opacity: .7;
  -webkit-appearance: none;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}
 
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active {
  cursor: pointer;
  opacity: 1;
}
 
input[type="submit"]:active, input[type="button"]:active {
  color: #333;
  background: #eee;
  -moz-box-shadow: 00.5emrgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 00.5emrgba(0, 0, 0, .8) inset;
  box-shadow: 00.5emrgba(0, 0, 0, .8) inset;
}
 
input[type="button"] {
  background: #f33;
}
 
 
/* Header/footer boxes */
 
.wideBox {
  clear: both;
  text-align: center;
  margin: 70px;
  padding: 10px;
  background: #ebedf2;
  border: 1pxsolid#333;
}
 
.wideBox h1{
  font-weight: bold;
  margin: 20px;
  color: #666;
  font-size: 1.5em;
}
 
</style>
 
<!-- Some IE7hacks and workarounds -->
 
<!--[if lt IE 8]>
<style>
 
/* IE7 needs the fields to be floated as well as the labels */
 
input, textarea {
  float: right;
}
 
#formButtons {
  clear: both;
}
 
/*
  IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
  The negative margins are half the element's width/height.
*/
 
#contactForm.positioned, .statusMessage {
  left: 50%;
  top: 50%;
}
 
#contactForm.positioned {
  margin-left: -20em;
  margin-top: -16.5em;
}
 
.statusMessage {
  margin-left: -15em;
  margin-top: -1em;
}
 
</style>
<![endif]-->

Mari kita lihat beberapa bagian yang menarik dari CSS:

1. Style untuk contact form dan status messages

Kita berikan form dan status kotak yang bagus dan lembut dari atas sampai bawah  gradien menggunakan WebKit-gradien dan -moz-linear-gradient, dan kita juga menambahkan drop shadow dengan box-shadow  Terakhir, kita memberikan form dan pesan kotak opacity .95 (95%), yang membuat konten berbayang.

2. Posisi form di tengah-tengah window (jika JavaScript diaktifkan)

Awalnya, kita hanya menempatkan form inline setelah halaman konten. Hal ini dimaksudkan agar form dapat digunakan pada browser non-JavaScript-enabled tanpa mendapatkan konten. Namun, untuk JavaScript browser, kita ingin form muncul di tengah jendela, dari atas konten.

 

Pada #contactForm.positioned , menggunakan posisi tetap, menetapkan atas, bawah, kiri dan kanan nilai semua ke nol, dan memastikan bahwa semua 4 margin yang ditetapkan untuk auto. Ini berpusat elemen secara horisontal dan vertikal di sebagian besar browser modern. Nanti kita akan menggunakan JavaScript untuk menambahkan positioned class pada form.

 

Header di bagian atas form

Form “Send us an email …” header dengan gambar perangko, dengan rule styles #contactForm h2 pada header. Kita memberikan teks gaya italic besar dan huruf keluar sedikit ruang. Kita juga menambahkan margin dan padding untuk membuat ruang di sekitar dan di dalam header. Kita menggunakan beberapa margin kiri negatif (-.75em) pada header untuk memotong padding pada form, sehingga header pergi tepat ke tepi kiri form. Kita juga mengatur lebar header untuk 19.5em sehingga sama persis dengan lebar form.

 

1. Kita juga mengatur warna heading, memberikan background gelap, posisi gambar thepostage stamp di sudut kanan atas, menambahkan bordertipis di  bawah, dan menambahkan sudut atas melengkung.

2. Fields

Kita memberikan input dan textarea dengan field font yang menarik,border bulat dengan  border-radius, dan gentle inner shadow menggunakan box-shadow. Kita juga mengapung label bidang kiri sehingga mereka duduk di samping bidang. Ketika field difokuskan (diklik atau pindah ke dengan tombol Tab), kita memberikan border warna biru dan menghapus shadow. Kita juga menetapkan outline: tidak ada untuk menghapus garis biru ditambah dengan beberapa browser. Terakhir, kita menggunakan: pseudo-class yang valid untuk memberikan field diselesaikan dengan benar background hijau, bagi mereka browser yang mendukung validasi form HTML5.

3. Tombol Kirim dan Batal

input [type = “submit”] selects the Send Email button, while input [type = “tombol”] memilih tombol Batal. Float pada posisi berdampingan, dan menambahkan beberapa margin untuk memberi mereka ruang. Kita berikan fixed width yaitu lebarnya teta[, dan beberapa padding untuk membuat mereka size yang layak. Kita tambahkan rounded border agar batasnya bulat dan drop shadow yang halus, dan tentukan teks dan warna latar belakang. Kita juga buat tombol sedikit transparan (opacity: .7), dan membuat sepenuhnya transparan ketika melayang di atas untuk menyorot mereka. Kita menggunakan transisi CSS memudar opacity perlahan. Terakhir ketika tombol diklik (: aktif) kita bergerak bayangan di dalam tombol untuk memberikan “ditekan” tampilan, dan memberikan skema warna hitam-putih.

Pada Tutorial selanjutnya kita akan membuat file PHP untuk mengirimka email

Sampai Ketemu di Tutorial selanjutnya.

sumber : jagocoding

Cara Daftar Google Adsense Indonesia Agar Cepat Diterima

Google Adsense adalah salah satu program PPC (Pay Per Click) yang paling banyak digemari oleh ...

Learn more
Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *