Cocoped.com – Memiliki halaman kontak di blog itu sangat penting. Ini adalah bagaimana pengunjung dapat menghubungi Anda dan itu adalah sesuatu yang harus dimiliki setiap blogger. Jadi betapa penting nya sebuah kontak untuk pengguna blogger. Selain sangat berguna untuk pengunjung bisa menghubungi anda, Tampilan kontak pada blog anda akan menjadikan blog anda menjadi profesional 🙂

Jika Anda menggunakan rute menggunakan formulir kontak, saya sarankan Anda juga memasukkan alamat email di halaman Kontak. Anda dapat menetapkannya secara khusus untuk blog Anda jika Anda tidak ingin alamat email pribadi Anda dilihat. Alasan saya percaya ini sangat penting untuk menawarkan kedua opsi adalah karena sebagian besar merek dan perusahaan tidak akan mengisi formulir kontak untuk menghubungi Anda. Mereka biasanya ingin mengirim email langsung kepada Anda melalui klien email mereka sendiri dan menambahkan Anda ke kontak mereka.

Menambahkan formulir kontak ke Blogger juga dapat dilakukan dengan beberapa pengkodean. Blogger sebenarnya menawarkan formulir kontak gratis untuk blog Anda, sayangnya mereka membuatnya sebagai Gadget dan meletakkannya di halaman Layout sehingga ditambahkan ke sidebar Anda. Bukan tempat yang ideal untuk formulir kontak, jika Anda bertanya kepada saya! Itu harus terletak di halamannya sendiri, jadi beginilah cara mengatur agar anda bisa memilih dimana from kontak di pasang pada blog anda.

Menambahkan Formulir Kontak ke Blogger

Langkah 1 – Pertama, masuk ke halaman Layout di Blogger dan klik tautan Add a Gadget . Dari munculan, pilih More Gadgets di bilah sisi lalu pilih Contact Form dan tambahkan. Tidak masalah di mana anda akan memasang kontak tersebut, karena kami akan memodifikasi dan membuatnya terlihat bagus!

2. Sekarang, kunjungi halaman Customize > Edit HTML page.

Klik di dalam textarea editor dan tekan CTRL + F (CMD + F pada Mac) dan di bar pencarian ketikan ContactForm lalu tekan enter.

Anda akan menemukan kode di bawah ini. Klik panah bawah hitam di sebelah kiri:

  
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

lalu klik panah ke bawah lagi di samping:

<b:includable id=’main’>

3. Anda akan melihat kode ini:

<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>

Hapus semua yang ditampilkan dalam warna merah sehingga Anda hanya harus pergi dengan:
Dan akan menyisakan kode berikut

<b:includable id=’main’></b:includable>

4. Lakukan pencarian baru, kali ini cari ]]></b:skin> dan tempelkan kode ini secara langsung sebelum itu:

/*CUSTOM CONTACT FORM BY cocoped.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

5. Simpan template lalu buka Halaman untuk membuat halaman Kontak baru jika Anda belum memilikinya. Di editor halaman, beralih ke mode HTML dan tempelkan yang berikut:

<div class=”widget ContactForm” id=”ContactForm1″>
<div class=”contact-form-widget”>
<div class=”form”>
<form name=”contact-form”>
<div class=”fm_name”>
Your Name:
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” /></div>
<div class=”fm_email”>
E-mail Address *:
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” /></div>
<div style=”clear:both”>
</div>
<div class=”fm_message”>
Message *:
<textarea class=”contact-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” rows=”5″></textarea>
<input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” type=”button” value=”Submit” />
<div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”>
</div>
<div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”>
</div>
</div>
</form>
</div>
</div>
</div>

Simpan halaman Anda dan lihat formulir kontak baru Anda! Itulah Cara Menambahkan Formulir Kontak di Blogger, semoga artikel ini bermanfaat yah.