Cara membuat contact form simpel di page blog ( Anti GAGAL )

 


Contact form sangat penting untuk sebuah blog, apalagi jika blog kamu adalah blog tentang tutorial ataupun blog jualan. Mengapa demikian? ketika kamu menawarkan jasa atau menjual produk, pengujung blog kamu harus dapat berinteraksi dengan pemilik blog segingga pengunjung akan lebih percaya dan merasa bahwa kamu adalah seorang yang profesional di bidangnya.

Walaupun kamu menawarkan untuk menghubungi kamu via WA (whatsapp) atau berinteraksi pada kolom komentar (dll) tetap saja akan terasa kurang jika tanpa contact form

Bagaimana cara membuat contact form yang simpel?

Ada bayak sekali penyedia layanan contact form dari pihak ke tiga secara gratis maupun yang berbayar seperti (foxyformjotform123contactform, dll.). Silahkan kamu bisa pilih dari ke tiga penyedia tersebut, namun saya akan lebih merekomendasikan kamu untuk membuat contact form sendiri yang sudah di fasilitasi oleh blogger

Step 1 : Menambahkan formulir kontak

Buka blogger.com > menu tataletak > sidebar > tambahkan gadget


Mucul jendela baru lalu klik tanda ➕ untuk menambahkan formulir kontak


Centang pada tampilkan formulir kontak dan silahkan ubah judul sesuai dengan keinginan kamu > Simpan


Step 2 : Menyembunyikan formulir kontak melalui edit HTML

Masuk ke menu Tema (Template) > Edit HTML

Lalu kamu cari kode ]]></b:skin> (jika kesulitan silahkan gunakan CRTL + F) kemudian copy paste kode di bawah ini tepat di atasnya

div#ContactForm1 { display: none !important; }


Kemudian simpan tema ( dipojok kanan atas ) seperti biasa

Step 3 : Menambahkan formulir kontak ke halaman (page)

Buka menu Halaman (page) > ➕Halaman Baru

Akan muncul jendela untuk menulis kemudian pilih tampilan HTML


Kemudian Copy paste kode dibawah ini 

Welcome<br /><br /><form id="hookkanan" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea><br /><br /><input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><br /><br /><br /><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><style scoped="" type="text/css">#comments,.post_meta,#blog-pager{display:none}

#main-wrapper{width:100%;padding:0}

form{color:#666}

#sidebar-wrapper{display:none}

#hookkanan{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:0 auto;padding:10px;background:#dedede;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:96.8%;max-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#dedede;color:#444;border:1px solid rgba(0,0,0,.14);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:#34495e;margin:auto;max-width:140px;vertical-align:middle;cursor:pointer;padding:15px;font-size:15px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}

#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;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:94.5%}}

</style><br /><br /><script type="text/javascript">//<![CDATA[if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');//]]></script><br /><br /><script data-src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>


<script>

    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6334988478330954682?hl';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6334988478330954682?hl','https://www.hookkanan.net/','6334988478330954682?hl');

    _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': '6334988478330954682?hl', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

    </script>

Ganti yang berwarna merah dengan ID Blog dan yang warna biru ganti dengan URL Blog kamu, cara mendapatkan ID Blog silahkan masuk ke dasboard blogger lalu lihat url nya


Sampai tahap ini contact form kamu sudah selesai di buat

Step 4 : Menampilkan Halaman (page) Contact Form

Setelah contact form kamu berhasil dibuat, contact form tidak akan muncul di blog kamu, langkah berikutnya kamu hanya tinggal menambahkan ceklist agar contact form kamu muncul di bawah (footer) blog kamu

Buka menu Tata Letak kemudian ceklist Contact Form (bisa berubah tergantung judul contact form yang kamu buat)


Step 5 : Test Contact Form kamu

Jika kamu mengikuti tutorial ini dari awal dan melakukannya sama persis, saya jamin 100% it's work, jika ada kendala, silahkan corat coret di kolom komentar di bawah

2 komentar untuk "Cara membuat contact form simpel di page blog ( Anti GAGAL )"