Cara Simpel Membuat Contact Us

Contact Us ? iya itu yang kita bahas kali ini, apa sih sebenarnya contact us dan fungsinya untuk apa ? bagi sebagian besar orang indonesia yang kurang faham dengan kata - kata itu karena minimnya pengetahuan tentang bahasa inggrisnya ( termasuk saya newbie ) akan kebingungan apa itu contact us.

Contact Us sendiri jika diterjemahkan secara umum berarti Hubungi Kami atau Kontak Kami, sedangkan untuk fungsinya sudah jelas bahwa jika ingin berhubungan dengan sie-admin blog atau pemilik perusahaan atau anuu hehe. nah sudah paham kan apa itu Contact Us dan fungsinya ? iya fungsinya itu -itu aja, namun untuk blog sendiri apa ?, pertanyaan itulah yang muncul ketika para blogger newbie, termasuk saya juga.

Contact Us kalau untuk blog sendiri yaitu untuk bisa diterima oleh google adsense, mempermudah pengunjung menghubingi anda, untuk sementara itu saja yang saya tau. baik unuk pembukaan panjang lebar sudah kali ini kita akan praktek membuat contact us sederhana. caranya sangat mudah mari ikuti langkah - langkah berikut :

#LANGKAH - LANGKAH :

1. Anda harus login terlebih dahulu ke akun blogger anda

2. Selanjutnya klik halaman/Laman di sisi kiri layar

3. Buatlah Laman Baru

4. Lalu klik mode html,

5. Kemudian salin dan paste  kode dibwah ini tepat di mode html tadi :

<div class='seocips-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button --> 
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- End Custom Contact Form By seocips -->
</div></div>
<style>
.seocips-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.seocips-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOevBvD9gBIat6sSPd7_NvRgnq7jKOAxIXhiu9snRBYwef3psiFjudLbil32dpngUjDqAd01hJeuwZ1f_er-dL1sEPWUpOXitBhuL2KirezuZ8GcABNWNznwNKDn78-9Th2mLPAUdAZs/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-yqg5ZaAxfwaNsMLBndvI-VSKlh7l4IndFlyHnegGReg6C5kGwKplCyd9wERrjFCLEgbcGWEh-k3J1MeiWJOaG4XLChfl9s8oHFmd01U1I-FO1-j7ywvr1xEzBrJXoOxhoQ_Kc4zesY/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOevBvD9gBIat6sSPd7_NvRgnq7jKOAxIXhiu9snRBYwef3psiFjudLbil32dpngUjDqAd01hJeuwZ1f_er-dL1sEPWUpOXitBhuL2KirezuZ8GcABNWNznwNKDn78-9Th2mLPAUdAZs/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

6. Jangan lupa beri judul Contact Us dan selanjutnya langsung dipublikasikan

7. Lihat Hasilnya !

Semoga Bermanfaat postingan kali ini, jangan lupa share dan ikuti blog ini terus, salam sukses.

Tweet

Subscribe to receive free email updates: