Membuat Form Kontak Yang Indah Dan Atraktif Dengan Ajax [Part 2]

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, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );  background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );border: 1px solid #aaa;  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);  box-shadow: 0 0 1em rgba(0, 0, 0, .5);  opacity: .95;}  /* The form dimensions */ #contactForm {  width: 40em;  height: 33em;  padding: 0 1.5em 1.5em 1.5em;  margin: 0 auto;}  /* 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: 0 0 1em -.75em;  padding: 1em;  width: 19.5em;color: #aeb6aa;  background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */  border-bottom: 1px solid #aaa;  -moz-border-radius: 10px 10px 0 0;  -webkit-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;}  /* Give form elements consistent margin, padding and line height */ #contactForm ul {  list-style: none;  margin: 0;  padding: 0;} #contactForm ul li {  margin: .9em 0 0 0;  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: .4em 0 0 0;  margin: .15em .5em 0 0;  font-weight: bold;}  /* The fields */ input, textarea {  display: block;  margin: 0;  padding: .4em;  width: 67%;  font-family: "Georgia", serif;  font-size: 1em;  border: 1px solid #aaa;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;  -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;  box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;  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: 1px solid #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: 2em 1em 0 1em;  width: 10em;  padding: .5em;  border: 1px solid #666;  -moz-border-radius: 10px;  -webkit-border-radius: 10px;border-radius: 10px;  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);  box-shadow: 0 0 .5em rgba(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: 0 0 .5em rgba(0, 0, 0, .8) inset;  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;  box-shadow: 0 0 .5em rgba(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: 1px solid #333;} .wideBox h1 {  font-weight: bold;  margin: 20px;  color: #666;  font-size: 1.5em;} </style> <!-- Some IE7 hacks 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 bab yang menarik dari CSS:

1. Style untuk contact form dan status messages

Kita berikan form dan status kotak yang elok dan lembut dari atas hingga bawah  gradien memakai WebKit-gradien dan -moz-linear-gradient, dan kita juga menambahkan drop shadow dengan box-shadow  Terakhir, kita menawarkan form dan pesan kotak opacity .95 (95%), yang menciptakan konten berbayang.

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

Awalnya, kita hanya menempatkan form inline sesudah halaman konten. Hal ini dimaksudkan semoga form sanggup dipakai pada browser non-JavaScript-enabled tanpa mendapat konten. Namun, untuk JavaScript browser, kita ingin form muncul di tengah jendela, dari atas konten.

 

Pada #contactForm.positioned , memakai posisi tetap, memutuskan 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 memakai JavaScript untuk menambahkan positioned class pada form.

 

Header di bab atas form

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

 

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

2. Fields

Kita menawarkan input dan textarea dengan field font yang menarik,border lingkaran dengan  border-radius, dan gentle inner shadow memakai 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 menawarkan border warna biru dan menghapus shadow. Kita juga memutuskan outline: tidak ada untuk menghapus garis biru ditambah dengan beberapa browser. Terakhir, kita menggunakan: pseudo-class yang valid untuk menawarkan 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”] menentukan tombol Batal. Float pada posisi berdampingan, dan menambahkan beberapa margin untuk memberi mereka ruang. Kita berikan fixed width adalah lebarnya teta[, dan beberapa padding untuk menciptakan mereka size yang layak. Kita tambahkan rounded border semoga batasnya lingkaran dan drop shadow yang halus, dan tentukan teks dan warna latar belakang. Kita juga buat tombol sedikit transparan (opacity: .7), dan menciptakan sepenuhnya transparan saat melayang di atas untuk menyorot mereka. Kita memakai transisi CSS memudar opacity perlahan. Terakhir saat tombol diklik (: aktif) kita bergerak bayangan di dalam tombol untuk menawarkan “ditekan” tampilan, dan menawarkan denah warna hitam-putih.

Pada Tutorial selanjutnya kita akan menciptakan file PHP untuk mengirimka email

Sampai Ketemu di Tutorial selanjutnya.