Cara membuat halaman contact us pada blog


Contact atau formulir kontak pada suatu blog / web biasanya digunakan sebagai suatu sarana atau suatu media untuk mudahkan komunikasi antara publisher blog ( blogger ) dengan pembaca blog, seperti halnya dalam blog "INFORMASIKU" ini, kami menyertakan formulir kontak pada utama artikel dan laman khusus. Formulir kontak ini selain berfungsi untuk media komunikasi, juga biasanya dibuat untuk kelengkap suatu blog agar terlihat lebih profesional, bahkan bisa dijadikan identitas bahwa blog tersebut dikelola dengan baik, karena dengan formulir kontak ini menandakan bahwa blog atau web tersebut menerima segala masukan yang disampaikan oleh para pembaca, karena dengan menu / laman kontak ini para pembaca bisa mengirimkan komentar, kritik , saran dan semacamnya langsung kepada si pembuat tulisan ( ini bisa langsung ke penulis ataupun admin dari blogger tersebut jika memang blog atau web tersebut dikelola bukan oleh satu orang ).

Berikut ini salah satu contoh contoh tampilan formulir kontak yang ada pada blog "INFORMASIKU" ini 

cara membuat kontak us pada blog
contoh formulir kontak


Untuk penempatan suatu kontak bisa berpariasi, bisa di simpan dilaman utama, ataupun pada laman khusus dengan bantuan tombol navigasi ,atau bahkan di setiap laman artikel kita, seperti pada blog saya ini, kolom kontak saya sediakan di setiap laman artikel dan pada laman khusus, memang untuk lebih terlihat profesional biasanya formulir kontak ini hanya di sediakan pada laman khusus, namaun lasan saya pribadi menyediakan formulir kontak ini agar si pembaca artikel saya lebih mudah dalam mencari formulir kontak pada artikel saya, karena saya yakin bahwa tidak semua pembaca selalu melihat - lihat dan mengecek semua tombol navigasi yang ada dalam blog saya, maka dari itu saya tempatkan formulir kontak pada setiap laman saya.

Banyak teknik dalam membuat suatu laman kontak / contact us ini, disini saya akan beri dua cara yang mudah yang bisa digunakan untuk membuat formulir kontak pada blog blogsopt, pertama bisa menggunakan jasa proxiform. klik link  berikut untuk masuk ke situs tersebut.

link :http://www.foxyform.com/

setelah anda masuk pada situs tersebut anda akan melihat menu seperti gambar :

cara membuat halaman contact us ( kontak )


pada menu menu "setting" anda centang pilihan nama dan email atau bisa menambahkan subject dan title, itu terserah anda saja. Pada menu "advanced setting" anda bisa menyesuaikan warna , ukuran font (tulisan) untuk menyesuaikan dengan blog anda. kemudian untuk menu target adress anda isikan email yang ingin anda gunakan sebagai penerima pesan dari pembaca blog anda, jangan lupa centang recaptcha, setelah itu klik "create formular "maka hasil akan seperti gambar.



http://www.belajarkomputerdasarku.xyz/2017/07/cara-membuat-halaman-contact-us-pada.html




setelah itu anda bisa copy ( ctrl + c ) kode html yang ada pada kolom HTML CODE seperti gambar diatas, atau anda biarkan kode terparkir disana sejenak.

Nah sekarang anda masuk ke draf blogger anda kemudian pada menu laman anda seperti gambar

http://www.belajarkomputerdasarku.xyz/2017/07/cara-membuat-halaman-contact-us-pada.html


kemudian klik laman baru, dan beri judul " kontak ", atau nama apapun terserah anda, kemudian klik tombol HTML untuk mengedi laman dari html, selanjutnya paste kode yang sudah anda copy dari proxyform tadi pada laman html tersebut seperti gambar ,

cara membuat kontak us
laman kontak edit menggunakan html

jika anda ingin menambahkan prakata sebelum form formulir kontak anda bisa edit pada menu compose, klik menu compose yang berada disamping tombol HTML, kemudian tambahkan / ketik prakata pembuka yang anda inginkan diatas nama proxyporm seperti gambar




Biarkan nama proxyform apa adanya, sekarang setting pada menu setting laman yang ada pada sebelah kanan laman edit seperti gambar

cara membuat formulir kontak


kemudian pilih "pilihan " pada kolom komentar pembaca, anda pilih jangan bolehkan , ini gunanya agar laman tidak menampilkan tombol tambah komentar pada laman. jika semua sudah pilih tombol publish , maka hasil akan seperti berikut, 

http://www.belajarkomputerdasarku.xyz/2017/07/cara-membuat-halaman-contact-us-pada.html

Nah sampai sini anda sudah berhasil membuat laman/ formulir kontak.

Untuk cara kedua yaitu dengan cara manual untuk membuat formulir kontak, anda bisa copy script berikut ini 

 <script>
var blogId = 'id blog anda disini';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan Anda telah dikirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yang valid diperlukan.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<br />
<form name="contact-form">
<div>
<br />
Nama Anda : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
<div>
<br />
Email: <em>(wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<br />
<div>
Pesan: <em>(wajib)</em></div>
<textarea class="contact-form-email-message" 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" onclick="sendEmailMsg()" type="button" value="Kirim" />

<br />
<br />
<br />
Terimakasih.<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<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>


kemudian paste pada laman kontak anda untuk caranya sama seperti diatas, namun pada script diatas terdapat tulisan "id blog anda disini" ganti dengan id blog anda caranya lihat pada url draf blog anda seperti gambar


sekarang lihat perbedaanya, jadi terserah anda ingin menggunakan yang mana heheh. untuk hasil formulir kontak yang kedua anda bisa lihat pada laman kontak saya.


Sekian informasiku "Cara membuat halaman contact us pada blog". Semoga bermanfaat.


Share This Post :

Previous
Next Post »