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 (foxyform, jotform, 123contactform, 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
Kemudian simpan tema ( dipojok kanan atas ) seperti biasa
Step 3 : Menambahkan formulir kontak ke halaman (page)
Buka menu Halaman (page) > ➕Halaman Baru
#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)
jualbajumuslimanakperempuanlucu
BalasHapusProdusen Baju Polos Wanita Murah
BalasHapus