Home  ›  Desain Blog

August 28, 2016

Cara Membuat Contact Form di Halaman Statis Blog

August 28, 2016

Baca Juga

Formulir Kontak (Contact Form) di Halaman Statis Blog
Cara Membuat Formulir Kontak (Contact Form) di Halaman Statis Blog

BLOGGER sudah menyiapkan widget "Formulir Kontak" untuk dipasang di sidebar blog. 

Widget contact form ini memudahkan pengunjung menghubungi admin blogger untuk "kepentingan pribadi" atau "pesan khusus" yang tidak ingin diketahui pengunjung lain.

Dengan adanya halaman khusus Form Kontak ini, maka pengunjung/pembaca tidak mesti mengirimkan pesan via email, cukup di contact form ini. What a User Friendly!

Berikut ini CB share cara membuat halaman khusus (halaman statis) formulir kontak sehingga Contact Form tidak muncul di sidebar.

Contoh atau demo halaman kontak di blogger ini bisa dilihat di Halaman Kontak.

Jika ada pengunjung  yang mengisi contact form tersebut, maka pesannya akan masuk ke Inbox Email Gmail kita sebagai admin blog, yaitu email yang digunakan untuk membuat blog.

Jika tidak ada di folder email utama (Primary), maka akan masuk di folder "Social".

Cara Membuat Formulir Kontak (Contact Form) di Halaman Statis Blog

Langsung kita bikin:

1. Klik Laman (Pages) > Laman Baru (New Page)
2. Isu judul laman, misalnya Kontak, Contact Us, Contact Me, Hubungi Kami, Kontak Admin.
3. Klik mode HTML (sebelah Compose) di kanan atas
4. Copas kode di bawah ini sebagai isi Laman

<script>
var blogId = '12345678910';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<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>
Pesan
<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="Kirim" />
<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>

5. Ganti angka warna merah dengan blogID Anda yang ada di address bar.
6. Publikasikan!

Demikian Cara Pertama Membuat Halaman Kontak (Contact Form) di Halaman Statis Blog Anda. Jika gagal masih ada cara lainnya di bawah ini.


Cara Lain Membuat Formulir Kontak (Contact Form) di Halaman Statis Blog

Berikut ini cara lain membuat formulir kontak di halaman statis yang dishare Sneet.

 Tahap #1: Tambahkan Gadget Contact Form 

 1. Klik Layout > Add a Gadget > Klik More Gadgets > pilih "Contact Form".

Membuat Contact Form

2. Klik Save!
3. Seret dan pindahkan posisi widget Contact Form tadi ke bawah elemen "Blog Posts"

Contact Form di Halaman Statis Blog

4. Klik Save arrangement!

 Tahap #2: Sembunyikan Widget "Contact Form"

 1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.widget.ContactForm { display: none; }

Tahap #3: Membuat Halaman Kontak 

 1. Page > New Page
2. Isi judul dengan, misalnya, Kontak
3. Klik mode HTML
4. Copas kode berikut ini di kolom content:

<style type="text/css">
.widget.ContactForm { display: block; }
.post-footer { display: none; }
#blog-pager { display: none; }
.blog-feeds { display: none; }
.widget.ContactForm .title { display: none; }
.widget.ContactForm * { max-width: 100%; }
</style>

5. Klik Publish !

Kini halaman kontak sudah ada di blog Anda. Yang di atas adalah tampilan simple atau sederhana, seperti pada gambar di atas.

Tampilan Form Kontak Lainnya

Berikut ini kode dan tampilan halaman kontak dari widget contact form lainnya --ini yang digunakan CB-- dari Kang Ismet.

Membuat Contact Form

Tahapannya membuat halaman kontaknya seperti cara di atas:

1. Layout > Add a Widget  > Contact Form
2. Page > New Page > Isi judul dengan Kontak
3. Klik mode HTML dan copas kode ini:

<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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 type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan, pilih/centang "Enter" untuk baris baru.

Widget Contact Form

Publikasikan!

Sekarang klik "Template" > "Edit HTML" > Copas kode berikut ini:

/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Save Template!

 CARA LAIN Membuat Form Kontak di Halaman Statis

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#ContactForm1,#ContactForm1 br {display:none}

3. Save!

4. Layout > Add a Gadget > Pilih Contact Form
5. Save!

 Bikin Halaman Statisnya:

1. Laman > klik Laman Baru
2. Copas kode ini:

<form id="kontak-form" 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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-form{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 rgba(0,0,0,.14);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 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:#95a5a6;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:#e74c3c;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:100%;}}
</style>

 3. Save! Beres.

Form Kontak sudah dibuat dan sudah muncul.  Kini blog Anda sudah punya halaman khusus Kontak berisi Contact Form!

Untuk menampilkan di Navigasi Menu, silakan ke tutorial berikut ini: Menampilkan Halaman Statis di Navigasi Menu Blog.

Good Luck & Happy Blogging! (www.contohblog.com).*

Tags :
Previous
« Prev Post
Next
Next Post »
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

14 comments on Cara Membuat Contact Form di Halaman Statis Blog

  1. OPFansub9/17/2015 11:33 AM

    Mas CB Izin Clone/duplicate template ini ya ^^
    cuma buat template pribadi mas ga untuk di share kok templatenya ^^

    ntar dibawah blog ada nama desain orinya mas ^^
    bisa langsung di cek template clone mas maaf spam cuma mau jujur aja mas template mas saya clone hehehe...

    http://sampinganblognih.blogspot.com

    ReplyDelete
  2. zeropromosi4/04/2016 11:13 PM

    jika ingin pengunjung kirim pesan ke alamat email kita yang bukan gmail tapi yahoo gimana ya caranya?

    ReplyDelete
    Replies
    1. CB Blogger9/25/2016 10:24 AM

      integrasikan inbox email gmail-nya dengan email yahoo

      Delete
  3. Dani Guntur7/15/2016 6:12 AM

    diprakteka ga jadi a, masalahnya apa ya a?

    ReplyDelete
    Replies
    1. CB Blogger9/25/2016 10:25 AM

      kode diatas tidak pernah gagal cb terapkan, selalu berhasil, karena hanya memanipulasi kode contact form bawaan blogger

      Delete
  4. Unknown9/25/2016 9:48 AM

    hmmm , agan cb bagaimana caranya agar pesan yang di input dapat dikirim ke email?

    ReplyDelete
    Replies
    1. CB Blogger9/25/2016 10:23 AM

      itu sudah otomatis terkirim ke email kita, di menu 'Social'

      Delete
    2. Unknown10/06/2016 7:37 PM

      makasih gan cb, tapi saya masih ada kendala, setelah dikirim berhasil, tidak ada pesan ke email saya gan cb, mohon pencerahannya

      Delete
  5. Admin Cs9/18/2017 6:07 PM

    Betul,,, setelah dikasih code
    .widget.ContactForm { display: none; }

    memang tampilannya oke,, tp waktu tekan kirim,, tdk ada progres sama sekali. Jika tidak pakai kode tsb. malah muncul 2 form,,, tp yg work yg bawah,

    ReplyDelete
  6. Catatan Matematika1/29/2018 9:22 PM

    gan saya berhasil buatnya! cuma kenapa ketika kita klik setiap postingan! dibawah postingan tampil form kontak tersebut! ngilanginnya gimana dan maunya cuma tampil di page

    ReplyDelete
  7. Jamal Firdaus5/22/2018 11:31 AM

    kalau cara sembunyikan contact form kaya gmn gan?

    ReplyDelete
    Replies
    1. CB Blogger5/22/2018 10:58 PM

      Ya... jangan dipasang alias dihapus saja

      Delete

Subscribe to: Post Comments (Atom)

Contact Form

Name

Email *

Message *

Copyright © Contoh Blog. All rights reserved.