Cara Memasang Widget Contact Form di Halaman Statis Blogger

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.

Artikel Terkait

29 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Abu Haqqi
    23/3/22
    Profil: https://www.blogger.com/profile/16663537749775788034
    Terima kasih kak, keren halaman kontaknya
  • Maniak Kripto
    7/4/21
    Profil: https://www.blogger.com/profile/08626915967731159095
    bang, gmn cara nengahin judul halaman "hubungi kami"?
  • Unknown
    17/3/21
    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/12/20
    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.
  • KhasanNm
    28/8/20
    Profil: https://www.blogger.com/profile/15539934906421557034
    Masuknya kemana ya, kak Igniel?
    Kok nggak masuk ke email, apa ada yang salah? Tolong bantu dong kak
    https://khasannm.blogspot.com/p/contact_24.html
  • Salbiah
    4/6/20
    Profil: https://www.blogger.com/profile/14289187618832326013
    Sekarang kenapa ya kontak forum blogger pesannya gak masuk ke email?
  • Rich Ard
    30/5/20
    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.
    8/5/20
    Profil: https://www.blogger.com/profile/11320855545487265436
    Terima kasih mba igniel, tutor masih work 100%.
  • JULIAN MENDOME
    16/2/20
    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/12/19
    Profil: https://www.blogger.com/profile/05954257902637310087
    mantap mbag e
  • Faizall TM
    3/11/19
    Profil: https://www.blogger.com/profile/15010855191637072023
    untuk melihat pesannya dimana mba?
    kok di gmail blogger saya tidak ada yang masuk
    • Dewa Plokis
      24/11/19
      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/5/20
      Profil: https://www.blogger.com/profile/15010855191637072023
      Work ko gan wkwkwk ada yang kelewat aja aku tadi stepnya
  • CM Nime
    4/10/19
    Profil: https://www.blogger.com/profile/06312504889206611865
    di blog saya tampilan di mobile kok gak responsive ya mbak. apa memang begitu?
  • Admin
    18/7/19
    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/7/19
      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.
  • Trial MembƎr
    4/7/19
    Profil: https://www.blogger.com/profile/15515183494785880008
    Kontak formnya gak responsive ya mbak...
    • Igniel
      5/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Responsif kok.
  • Bapack
    17/6/19
    Profil: https://www.blogger.com/profile/03500056390480845005
    Kak, cara membuat tampilan gird di blog gimana tu kak?
  • Dwi Yulianto
    26/5/19
    Profil: https://www.blogger.com/profile/05275043524541095105
    Bagaimana cara mengubah alamat email yang kita gunakan sebagai halaman kontak?
  • Admin
    6/4/19
    Profil: https://www.blogger.com/profile/00951885909214717081
    Jadi tapi kok masuk di spam ya kak..?

    https://wisatayogyakarta.id
    • Igniel
      6/4/19
      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/2/19
    Profil: https://www.blogger.com/profile/00364946329117561888
    work, coba belajar dari mba igniel lah hehehe

    https://asnmengabdi.blogspot.com
  • Afaea
    31/1/19
    Profil: https://www.blogger.com/profile/13954199030791003815
    idblognya keren gitu ya
  • 무하마드 Rizki Riswandi
    14/12/18
    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?
    • 무하마드 Rizki Riswandi
      14/12/18
      Profil: https://www.blogger.com/profile/05372261840102071340
      sudah work kak! hehehe :D :V
  • Erik Hariansah
    27/11/18
    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/8/18
    Profil: https://www.blogger.com/profile/08678073736194732715
    ga work min
    • Igniel
      12/8/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Work kalau pasangnya bener