Cara membuat Halaman Contact Form untuk Blog

Halaman Kontak atau biasa kita kenal sebagai contact form adalah sebuah halaman atau layanan yang wajib kita sediakan dalam membangun website, tidak hanya untuk website sekarang blogger juga harus menyediakan contact form dimana layanan ini akan digunakan pengguna secara umum untuk menghubungi kita selaku pemilik blog.

Contact form blogger sebenarnya dapat kita buat dengan menambahkan widget contact form yang sangat sederhana melalui tata letak blogger hanya saja untuk tampilan widgetnya begitu sederhana dan muncul disetiap tampilan yaitu sidebar.

Oleh sebab itu beberapa contact form diluar sana sekarang sudah banyak sekali macam-macam bentuk dan desainnya tentu mereka membawa kekurangan dan kelebihannya masing-masing.

Tentu saja pada postingan kali ini saya juga membawakan contact form yang menurut saya pribadi ini sudah sangat bagus dan stabil terlebih lagi ini juga ringan yang sudah pasti sangat disenangi setiap pengguna karena cepatnya akses contact form serta pemasangan yang mudah.

Sementara untuk cara memasang contact form blogger tersebut bisa dibilang mudah anda cukup memasang kode yang akan saya berikan dibawah kemudian paste pada halaman statis yang sudah dibuat. Selengkapnya langsung ikuti saja langkah-langkah berikut dibawah ini.

Cara membuat Contact Form di Blogger

1. Buka Dashboard Blogger terlebih dahulu.

2. Pilih Halaman kemudian klik + Halaman Baru.

3. Klik Logo Pensil lalu ubah ke Tampilan HTML.

4. Tambahkan kode berikut:

<div class="Form">
<form name="contact-form">
<p></p>
Name
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Message
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<p></p>
<div style="max-width: 400px; text-align: center; 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>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxxxxx','//blog.hanfarhan.com/','xxxxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

silahkan ganti juga beberapa kode yang diberi tanda seperti berikut:

xxxxxxxxxxxxxxxxx ganti dengan BlogID anda (total ada 4 kode yang perlu diganti)

blog.hanfarhan.com ganti dengan Domain blog anda.

5. Beri judul yang sesuai kemudian Publikasikan.

6. Selesai, kini blog anda telah dilengkapi dengan contact form.

Demo

Seperti itulah cara memasang contact form diblogger cukup mudah dan simpel bukan? anda hanya perlu menambahkan kode yang sudah disediakan dan melakukan sedikit beberapa perubahan pada alamat domain dan blogid agar sesuai dengan blog anda.

Tapi jangan berhenti sampai disitu karena saya masih ada beberapa kode contact form dengan tampilan lainnya yang mungkin bisa jadi pertimbankan Anda untuk memasangnya. Berikut beberapa kode contact form keren untuk blog.

Contact Form - style 1

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="NAME" onblur='if (this.value == "") {this.value = "NAME";}' onfocus='if (this.value == "NAME") {this.value = "";}' /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></form></div></div></div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxxxxx','//blog.hanfarhan.com/','xxxxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

cara pemasangan sama seperti sebelumnya.

Demo

Contact Form - style 2

<style>
/* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666}#kontak{margin:auto;width:100%;max-width:470px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}
</style>
<form id="kontak" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dxxxxxxxxxxxxxxxxx','//blog.hanfarhan.com/','xxxxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]> </script>

cara pemasangan sama seperti sebelumnya.

Demo

Bagaimana? Keren bukan contact formnya? kini blog anda memiliki halaman contact form khusus dan tentu saja dengan begini setiap pengguna atau pengunjung blog dapat menghubungi anda secara mudah, siapa tau yang menghubungi anda ingin berbisnis atau memasang iklan? dengan adanya contact form ini sudah pasti sangat membantu.

Baiklah mungkin pembahasan saya sampai disini saja untuk cara memasang contact form di blog semoga membantu dan bermanfaat sampai jumpa lagi pada postingan berikutnya.

Update!

kode contact form yang ada diatas semuanya bisa dikatakan berfungsi bisa juga tidak karena setelah saya amati untuk sekarang ini widget contact form bawaan blogger harus dipasang jika tidak maka contact form tersebut tidak dapat mengirim pesan.

Lalu nanti akan tampil dong widget contact formnya? jadi 2 tampilan, sidebar dan halaman? nah saya ada solusinya yaitu dengan menyembunyikan widget contact form yang terpasang disidebar atau posisi lainnya.

Sebenarnya ini hanyalah cara lama dengan menyembunyikan widget contact form kemudian memindahkannya di halaman statis. Tapi tidak apa saya akan tetap menulisnya sebagai update konten saya ini, baiklah ikuti langkah-langkah berikut:

Cara Mengatasi Contact Form Blogger Tidak Berfungsi

1. Buat yang sudah memasang kode contact form diatas silahkan hapus semua kode <script> contact form, contoh kode yang perlu dihapus sebagai berikut:

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxxxxx','//blog.hanfarhan.com/','xxxxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

2. Publikasikan, lanjutkan langkah berikutnya.

3. Pilih Tata Letak kemudian klik + Tambahkan Gadget.

4. Cari dan pilih Formulir Kontak kemudian klik Simpan.

5. Sekarang pilih Tema lihat dan klik panah bawah disamping tombol Sesuaikan lalu klik Edit HTML.

6. Tambakan kode berikut tepat diatas </b:skin>

/* Contact Form Hidden */
#ContactForm1{display:none!important;}

7. Simpan dan selesai.

Demikian informasi update widget contact form blog tidak bisa mengirim pesan, dengan begini sekarang widget contact form anda dapat kembali digunakan dan berkerja dengan semestinya.

Referensi:
https://www.contohblog.com/2018/03/cara-membuat-halaman-kontak.html
https://bakuloreg.blogspot.com/2017/10/cara-membuat-contact-form-di-blogspot.html

Berbagi :