Halaman contact form merupakan elemen yang penting untuk menunjukkan profesionalitas sebuah blog/website. Dengan adanya halaman contact form akan memungkinkan user untuk dapat menghubungi pengelola blog/website secara privat. Hal ini perlu untuk memfasilitasi user jika ingin menyampaikan kritik, saran, pendapat, masukan, atau bahkan mungkin ingin memasang banner iklan di blog/website yang anda kelola. Halaman contact form dan daftar isi blog juga akan sangat membantu blog/website anda untuk naik di SERP (search engine result page).
Dalam postingan kali ini saya akan berbagi tutorial cara mudah memasang halaman contact form di blog. Ada beberapa cara untuk memasang halaman contact form di blog, diantaranya dengan memanfaatkan fasilitas contact form dari blogger sendiri maupun dari website penyedia contact form. Nah disini saya akan membagikan tutorial cara mudah memasang halaman contact form di blog dengan memanfaatkan fasilitas contact form dari blogger sendiri. Jadi anda tidak perlu daftar/register di website penyedia aplikasi contact form diluar sana. Saya pastikan tutorial ini dapat anda ikuti dengan mudah, dan saya jamin keberhasilannya. Jadi silahkan simak tutorial berikut ini.
Cara Mudah Memasang Halaman Contact Form di Blog
Langkah pertama adalah memasang widget contact form pada layout blog anda. Carannya dengan membuka dashboard > Layout > Add Gadget > Contact Form. Anda boleh add gadget dimana saja, karena nantinya akan kita hapus tampilannya dan kita pindah ke halaman khusus untuk contact form.
catatan: untuk beberapa template blog perlu dilakukan dua kali add gadget contact form untuk dapat memfungsikan gadget tersebut.
catatan: untuk beberapa template blog perlu dilakukan dua kali add gadget contact form untuk dapat memfungsikan gadget tersebut.
Setelah selesai silahkan cek dahulu gadget yang anda tambahkan tadi apakah sudah dapat difungsikan dengan mencobanya untuk mengirim pesan.
Kemudian buka menu template > edit HTML dan cari kode yang berwarna hitam dibawah ini, dan hapus beberapa baris diantara kode yang berwarna hitam tersebut. Artinya area dengan warna merah harus dihapus dan perlu diingat di area merah tersebut terdapat beberapa baris yang perlu anda hapus. Untuk menemukan kode tersebut anda dapat memanfaatkan fasilitas Ctrl+F dan mengetik kata 'Contact Form'.
Kemudian buka menu template > edit HTML dan cari kode yang berwarna hitam dibawah ini, dan hapus beberapa baris diantara kode yang berwarna hitam tersebut. Artinya area dengan warna merah harus dihapus dan perlu diingat di area merah tersebut terdapat beberapa baris yang perlu anda hapus. Untuk menemukan kode tersebut anda dapat memanfaatkan fasilitas Ctrl+F dan mengetik kata 'Contact Form'.
<b:widget id='ContactForm1' locked='false'
title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:includable id='main'>
{Hapus area
ini}
</b:includable>
</b:widget>
</b:section>
</b:widget>
</b:section>
Setelah itu simpan template anda.
Langkah kedua adalah memasang halaman contact form di page tersendiri. Caranya pada dashboard blogger buka menu page > new page > Tuliskan "Contact Us" pada tittle page dan letakkan kode dibawah ini dengan mode HTML (sebelahnya compose) ke dalam halaman baru anda tersebut.
<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 == "")
{this.value = "Name";}' onfocus='if (this.value ==
"Name") {this.value = "";}' />
<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 == "") {this.value = "Email
ID";}' onfocus='if (this.value == "Email ID")
{this.value = "";}'/>
<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 ==
"") {this.value = "Leave Your Message..";}'
onfocus='if (this.value == "Leave Your Message..")
{this.value = "";}'></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/AVvXsEjMmlbQ6UrJSy84xUzgDadmHepqMQn1kcRdNEEOlqbUAsUXnH_VDxEeqYgrbzLkwdAaJwuzog-uKi9tlZGr1qqSQaIC5AYXXgT7GRyhkik4soHhtOFvwDJe8hQv2-OMVdrO00nP4MvTBSg/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/AVvXsEhUZ5uhYV7qe0LB-8meQ0gdgYCAuy3c2P7nZTHUu__4TGbYkb68Jyrm9EpAFThaZfTg4vhNv3YgMIfOu3scNPEMBZbAAksBuJKXtRFNRLNC-b3nW0o62FXm_QNPScSmOiHU4wnOstOMNrc/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/AVvXsEjMmlbQ6UrJSy84xUzgDadmHepqMQn1kcRdNEEOlqbUAsUXnH_VDxEeqYgrbzLkwdAaJwuzog-uKi9tlZGr1qqSQaIC5AYXXgT7GRyhkik4soHhtOFvwDJe8hQv2-OMVdrO00nP4MvTBSg/s320/name.png)
no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
Jika sudah langsung anda publish. Hasilnya akan seperti ini
Demikian tutorial dari saya mengenai cara mudah memasang halaman contact form di blog. Diuar sana juga masih banyak tutorial cara mudah memasang halaman contact form di blog dengan berbagai script dan teknik yang berbeda. Namun, biasanya cara-cara tersebut mewajibkan kita untuk daftar/register pada website penyedia contact form. Jadi menurut saya, lebih praktis menggunakan tutorial yang saya bagikan ini. Selamat mencoba!
Demikian tutorial dari saya mengenai cara mudah memasang halaman contact form di blog. Diuar sana juga masih banyak tutorial cara mudah memasang halaman contact form di blog dengan berbagai script dan teknik yang berbeda. Namun, biasanya cara-cara tersebut mewajibkan kita untuk daftar/register pada website penyedia contact form. Jadi menurut saya, lebih praktis menggunakan tutorial yang saya bagikan ini. Selamat mencoba!
0 Response to "Cara Mudah Memasang Halaman Contact Form di Blog"
Post a Comment