Mempercantik Kontak Form dengan CSS3

Assalamualaikum Wr. Wb.
Mempercantik Kontak Form dengan CSS3 | Kali ini kami akan share tentang cara membuat kontak form dengan HTML dan CSS3, file-file yang di butuhkan disini ada 2, yaitu contact-form.html dan style.css, pertama-tama kita buat file contact-form.html terlebih dahulu.

Silahkan buat file HTML baru, bisa di edit dengan notepad atau dreamweaver, setelah itu copy script di bawah dan paste-kan ke file tersebut.
<!DOCTYPE html>
<html>
<head>
<title>CSS Contact Form</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
<h2>Kontak Kami</h2>
<form class="form">
<p class="name">
<input type="text" name="name" id="name" placeholder="Nama Anda">
<label for="name">Nama</label>
</p>
<p class="email">
<input type="text" name="email" id="email" placeholder="mail@contoh.com">
<label for="name">Email</label>
</p>
<p class="web">
<input type="text" name="web" id="web" placeholder="www.contoh.com">
<label for="name">Website</label>
</p>
<p class="text">
<textarea name="text" placeholder="Tulis apa yang ingin anda sampaikan ke kami"></textarea>
</p>
<p class="submit">
<input type="submit" value="Kirim">
</p>
</body>
</html>
Pada bagian class jangan sampai ada yang di ubah namanya, jika ingin di rubah silahkan di edit juga di file CSSnya. Save file dengan nama contact-form.html

Maka hasilnya akan seperti ini :

Mempercantik Kontak Form dengan CSS3

Tampilannya memang sederhana karena belum kita buat file CSSnya, sekarang kita buat file CSSnya.

Silahkan lihat file css di bawah

body {
padding: 40px;
font-size: 14px;
font-style: Verdana, Arial, Sans-serif;
}
h2 {
margin-bottom: 20px;
color: #474E69;
font-style: Arial;
}
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
}
textarea{
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus{
border-color: 1px solid #06f;
box-shadow: #333 0px 0px 8px;
-moz-box-shadow: #333 0px 0px 8px;
-webkit-box-shadow: #333 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #333 ;
}
.submit input {
width: 100px;
height: 40px;
background-color: #06f;
color: #fff;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;

  • Pada bagian color bisa di ubah sesuai keinginan.
  • box shadow berguna untuk memberikan effect bayangan pada textarea dan input.
  • hover dan focus berguna jika cursor menuju ke textarea, maka dibagian luarnya akan ada effect bayangan dan jika di klik bordernya akan berwarna #06f biru muda (bisa di ganti)
Nah tadi itu adalah file CSSnya, silahkan di save dengan nama style.css, anda bisa mengubah isinya sesuai kebutuhan. Maka hasilnya akan seperti ini 

Mempercantik Kontak Form dengan CSS3

Untuk penjelasan tentang file CSS dan file HTMLnya bisa anda tanyakan dengan komentar di bawah atau kirim ke Twitter dan fanspage kami.

Sekian Tutorial kali ini, jika dirasa bermanfaat silahkan share ke Social Media dan Web anda dengan mencantumkan sumbernya.

Follow @Official_PPI di Twitter dan Like Fanspage Kami di Facebook untuk update seputar blog ini.

Wassalamualaikum Wr. Wb.

Hosting Gratis

Poskan Komentar

Pengunjung yang baik selalu meninggalkan komentar
Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini
Mohon untuk tidak berkomentar berbau SARA, Pornografi dan Kata-kata kasar agar tidak terjadi kesalah pahaman disini...

Terima Kasih

 
Top