Cara Memasang Widget Contact Form di Halaman Statis Blogger

Cara membuat widget contact form di halaman statis (page) Blogger (Blogspot) agar pesan langsung masuk ke email pribadi.
Cara Memasang Widget Contact Form di Halaman Statis Blogger

Salah satu widget yang menurut saya sangat penting adalah formulir contact me (hubungi saya) di halaman statis Blogger. Saya kurang nyaman kalau mesti menyebar nomor pribadi di tempat umum. Makanya memilih widget ini karena pesan masuk ke email. Calon client bisa langsung menghubungi tanpa perlu tahu nomor pribadi saya. Kecuali kalau mereka minta nomor baru saya kasih.

Dengan adanya widget ini, visitor yang kebetulan mempunyai niat untuk mengajak kerjasama jadi gampang menghubungi. Entah itu menyewa jasa sesuai keahlian, content placement, pemasangan iklan banner, menulis review, dan sebagainya. Saya sangat terbantu dengan widget contact form ini karena memperlancar urusan bisnis.

Membuat Widget Contact Form Di Halaman Page Blogspot

Lihat kan? Tawaran berdatang dengan sendirinya. Calon client bisa kabur lho kalau mereka kesulitan menemukan kontak atau tempat yang bisa digunakan untuk menghubungi kamu.

Cara Pasang Widget Kontak Halaman Statis Blogspot

Masuk ke dashboard Blogger dan pergi ke pengaturan HTML dengan mengakses menu Theme » Edit HTML. Tambahkan kode berikut "SEBELUM / DI ATAS" </head>.

<b:if cond='data:view.isPage'>
<style>
  /* Contact Form */
  #comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;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 #1d2129;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:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;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}
</style>
</b:if>

Simpan dulu ya biar kodenya bekerja. Klik tombol Save theme.

Saatnya membuat widget contact form di halaman statis page Blogger. Pergi ke menu Pages lalu klik tombol New page. Berikan judul apapun bebas, suka-suka kamu. Pastikan memilih mode HTML (bukan Compose).

Perhatikan URL yang terbuka. Disana formatnya kurang lebih seperti ini. 6600000000000000066 adalah ID blog kamu. Simpan dulu karena nanti akan dipakai.

https://www.blogger.com/blogger.g?blogID=6600000000000000066#editor/target=page;pageID=xxxx
Membuat Widget Form Contact Us di Halaman Statis Blogger

Copy semua kode berikut ke text editor.

<form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" 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="Isi pesan" rows="5"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
  <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"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.igniel.com/','6600000000000000066');
_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': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Ganti beberapa kode dibawah dengan milik kamu sendiri.

Value Keterangan
Nama
Email
Isi pesan
Tulisan di formulir.
Kirim Pesan Tulisan di tombol submit.
6600000000000000066 ID Blog. Ada 4 kali penulisan.
www.blogkamu.com Alamat blog tanpa http / https.

Setelah selesai diganti, klik tombol Publish.

Oke cukup ya cara memasang widget formulir kontak di halaman page Blogger ini. Semoga calon client tidak bingung lagi ketika ingin menghubungi kamu.

41
Cara Memasang Widget Contact Form di Halaman Statis Blogger
Cara Memasang Widget Contact Form di Halaman Statis Blogger
Cara membuat widget contact form di halaman statis (page) Blogger (Blogspot) agar pesan langsung masuk ke email pribadi.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

41 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Dede Sandi Rahmat
    27 Desember, 2022
    Profil: https://www.blogger.com/profile/17082969089307810956
    kenapa sekarang jadi gak bisa kirim pesan ya?
    • Igniel
      27 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Dari Blogger sendiri ada update. Ada satu value random yang cuma di-generate sama Blogger, belum bisa diakalin pake JS. Jadi nggak work lagi.

      Masih dicari dan diulik cara barunya.
    • Igniel
      27 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sebetulnya masih jalan kalau script bundle bawaan Blogger gak dihapus.
    • Dede Sandi Rahmat
      27 Desember, 2022
      Profil: https://www.blogger.com/profile/17082969089307810956
      Kayaknya saya belum pernah hapus apa-apa, kak. Soalnya kan ini contact form nya bawaan dari igniplex
    • Igniel
      27 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya, maksudnya di Igniplex sudah dihapus script bundle-nya untuk meringankan loading.

      Jangan khawatir kak, banyak template lain yang mengalami error serupa kok karena update ini dari Blogger langsung. Solusinya masih dicari.
  • Sasaa
    26 Desember, 2022
    Profil: https://www.blogger.com/profile/05200489069685576367
    Udah gak work lagi untuk blog gak bisa sending pesan,,
  • BINTANG PELANGI
    14 Desember, 2022
    Profil: https://www.blogger.com/profile/05055181564476242679
    Terima kasih mbak igniel untuk keterangannya dan saya merasa terbantu. tapi ada yang mau saya tanyakan mbak tadi kok ada deretan angka seperti ini: ets/227187 itu maksudnya apa ya? apakah bagian dari id blog juga atau apa. mohon penjelasannya, maksih
  • Admin
    02 Agustus, 2022
    Profil: https://www.blogger.com/profile/15968256476551563696
    The submit not working sir
  • Gio The Lucky
    17 Juli, 2022
    Profil: https://www.blogger.com/profile/07424664408352091158
    Ini bisa gak di terapkan di link tertentu , misal ketika audiens akan downloads pdf
  • Tahsin.ID
    23 Maret, 2022
    Profil: https://www.blogger.com/profile/16663537749775788034
    Terima kasih kak, keren halaman kontaknya
  • elshalih
    07 April, 2021
    Profil: https://www.blogger.com/profile/08626915967731159095
    bang, gmn cara nengahin judul halaman "hubungi kami"?
    • Gio The Lucky
      17 Juli, 2022
      Profil: https://www.blogger.com/profile/07424664408352091158
      Bikin link aja yang menuju kesana
  • Unknown
    17 Maret, 2021
    Profil: https://www.blogger.com/profile/13825831724478559942
    Kak kan saya pkek contact form yang ini sebelumnya work tapi setelah ganti domain udah gk work lagi kira2 apa masalahnya ya sya pakek domain dri freenom untuk test. Mohon bantuannya kak
  • Sari Sarwono
    13 Desember, 2020
    Profil: https://www.blogger.com/profile/04418316615167460501
    Nambah dikit ya.. untuk blog ID, kalau di New Page, ntar ada 2 kode di address bar.
    Pilih kode yang di depan.
    Atau, bisa langsung dilihat di address bar ketika buka "Edit HTML".
    Biasanya, email yang terkirim akan masuk folder SPAM. Silahkan ditandai sebagai bukan SPAM. Maka semua beres.

    Makasih Mbak Igniel tutorialnya.
    • Admin
      02 Agustus, 2022
      Profil: https://www.blogger.com/profile/15968256476551563696
      Front??? you mean the different one that last the url??
  • KhasanNm
    28 Agustus, 2020
    Profil: https://www.blogger.com/profile/15539934906421557034
    Komentar ini telah dihapus oleh KhasanNm selaku penulis.
  • Salbiah
    04 Juni, 2020
    Profil: https://www.blogger.com/profile/14289187618832326013
    Sekarang kenapa ya kontak forum blogger pesannya gak masuk ke email?
    • Mohammad Fanirifanto
      15 Desember, 2022
      Profil: https://www.blogger.com/profile/16786215440635128891
      Kode yang sekarang sudah sedikit beda. ada tambahan Contact Form Token.
      Mungkin ini yang membuat pesan tidak masuk ke email.
      Bisa cek postingan saya soal ini. Semoga bisa membantu
  • Rich Ard
    30 Mei, 2020
    Profil: https://www.blogger.com/profile/08181588658968702674
    mba buat yang masih pakai domain blogsopt, caranya gimana ya? pesannya gak masuk2..
  • Afif Maulana Efendi, S.T.
    08 Mei, 2020
    Profil: https://www.blogger.com/profile/11320855545487265436
    Terima kasih mba igniel, tutor masih work 100%.
  • JULIAN MENDOME
    16 Februari, 2020
    Profil: https://www.blogger.com/profile/01590676706362880067
    sdh jadi widget contact sy, tapi kenapa di masuknya di email bukanya di utama tapi di update, itu gimna ya cara biar masuk di utama? sy pake gmail.
    makasih
  • Regars
    10 Desember, 2019
    Profil: https://www.blogger.com/profile/05954257902637310087
    mantap mbag e
  • Faizall TM
    03 November, 2019
    Profil: https://www.blogger.com/profile/15010855191637072023
    untuk melihat pesannya dimana mba?
    kok di gmail blogger saya tidak ada yang masuk
    • Dewa Plokis
      24 November, 2019
      Profil: https://www.blogger.com/profile/07018191407966224650
      Untuk sementara layanan contact mail versi blogspot sepertinya tidak support. Berbeda kalau yang sudah pakai domain, pasti work cara diatas.

      Maaf min nyerobot...hehehe
    • Faizall TM
      12 Mei, 2020
      Profil: https://www.blogger.com/profile/15010855191637072023
      Work ko gan wkwkwk ada yang kelewat aja aku tadi stepnya
  • Anonim
    Anonim04 Oktober, 2019
    di blog saya tampilan di mobile kok gak responsive ya mbak. apa memang begitu?
  • Admin
    18 Juli, 2019
    Profil: https://www.blogger.com/profile/09188399858089813264
    maaf untuk membuat/mencantumkn kolom kontak pada blog, lebih bagus pake form kontak seperti ini atau hanya dengan mencantumkan no hp, alamat email atau akun fb ?.
    • Igniel
      18 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Form kontak di atas masuknya ke email yang digunakan untuk Blogspot. Artinya hanya 1 Gmail.

      Jadi tergantung mas aja. Kalau mau lebih banyak pilihan bisa juga cantumkan email lain & no hp dan FB.
  • Rabbit Run
    04 Juli, 2019
    Profil: https://www.blogger.com/profile/15515183494785880008
    Kontak formnya gak responsive ya mbak...
  • Bapack
    17 Juni, 2019
    Profil: https://www.blogger.com/profile/03500056390480845005
    Kak, cara membuat tampilan gird di blog gimana tu kak?
  • Dwi Yulianto
    26 Mei, 2019
    Profil: https://www.blogger.com/profile/05275043524541095105
    Bagaimana cara mengubah alamat email yang kita gunakan sebagai halaman kontak?
  • Admin
    06 April, 2019
    Profil: https://www.blogger.com/profile/00951885909214717081
    Jadi tapi kok masuk di spam ya kak..?

    https://wisatayogyakarta.id
    • Igniel
      06 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nama, email, dan isi pesannya apa? Cuma mgasal karena buat test? Pasti masuk spam. Coba isinya yang bener kaya ngirim pesan pada umumnya.
  • Info ASN
    21 Februari, 2019
    Profil: https://www.blogger.com/profile/00364946329117561888
    work, coba belajar dari mba igniel lah hehehe

    https://asnmengabdi.blogspot.com
  • Afaea
    31 Januari, 2019
    Profil: https://www.blogger.com/profile/13954199030791003815
    idblognya keren gitu ya
  • M. Rizki Riswandi, S.Kom
    14 Desember, 2018
    Profil: https://www.blogger.com/profile/05372261840102071340
    work di halaman statis, tapi ketika mengirim pesan hanya muncul "sending Message" saja.. pesannya ga terkirim :(
    gimana fix nya kak?
    • M. Rizki Riswandi, S.Kom
      14 Desember, 2018
      Profil: https://www.blogger.com/profile/05372261840102071340
      sudah work kak! hehehe :D :V
  • Erik Hariansah
    27 November, 2018
    Profil: https://www.blogger.com/profile/02694044177157308115
    Buat tutor dong untuk mengganti tampilan homepage static menjadi grid responsive seperti di blog igniel ini.
  • Unknown
    12 Agustus, 2018
    Profil: https://www.blogger.com/profile/08678073736194732715
    ga work min