Search This Blog

Menambahkan Kontak Form Bawaan Blogger Di Halaman Statis

  • Monday, July 9, 2018 at 4:12:00 PM
  • 0 Comments
  • Views
Kali ini aku membuat halaman kontak dengan gadget Contact Form bawaan Blogger. Sebenernya aku udah ngebaca tutorial ini udah lama banget, tapi waktu itu aku malah pasang Contact Form dari 123formbuilder. Tutorial ini aku dapetin dari blognya mbak Arlina Design. Waktu pemasangan gadget ini aku sempet kebingungan karena kontak form di halaman statis ini ga bisa ngirim dan ga ada status error atau sukses nya.  Untungnya aku membaca di salah satu komentar tentang permasalahan yang sama dan ada solusinya yaitu ternyata aku belum masang gadget nya ke blogku, aku malah masang kode yang buat halaman statis dulu, hehe. Aku udah ngerubah CSS nya sedemikian rupa di sesuaikan dengan template blog ini. Penasaran? Ikuti pengalamanku masangin gadget ini di blogku.

Pemasangan
Pertama masuk ke Blogger › Layout. Kemudian klik "Add a Gadget", tambahkan gadget Contact Form.
Add Contact Form gadget.
Kemudian berpindah ke bagian Theme › Edit HTML, terapkan kode berikut ini sebelum kode </style> atau ]]></b:skin>.
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
    width: 96%;
    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: 96%;
    height: 175px;
    margin: 5px auto;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    color:#777;
    font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
    -moz-box-shadow: inset 0px 1px 0px 0px #9acc85;
    -webkit-box-shadow: inset 0px 1px 0px 0px #9acc85;
    box-shadow: inset 0px 1px 0px 0px #9acc85;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
    background: -moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background: -webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background: -o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background: -ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#74ad5a&#39;, endColorstr=&#39;#68a54b&#39;, GradientType=0);
    background-color: #74ad5a;
    border: 1px solid #3b6e22;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 12px;
    text-decoration: none;
    margin: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
}
#ContactForm1_contact-form-submit:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
    background: -moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background: -webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background: -o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background: -ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background: linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#68a54b&#39;, endColorstr=&#39;#74ad5a&#39;, GradientType=0);
    background-color: #68a54b;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
    width: 98.5%;
    margin-top:35px;
}
#ContactForm1_contact-form-error-message img {
    width: 11px !important;
}
Simpan template.
Langkah kedua yaitu membuat halaman statisnya. Berpindah ke Pages › New page atau halaman baru lalu beri nama Kontak (atau Contact Us, Contact Me, atau apapun sesuai dengan keinginan kamu).
Klik New page atau halaman baru.
Agar tampilannya rapih sebaiknya gunakan "Press "Enter" for line breaks" pada menu "Page Settings" seperti gambar di bawah ini.
Page settings.
Lalu pastekan kode berikut ini di halaman statis Kontak pada HTML mode.
<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Nama&quot;;}" onfocus="if (this.value == &quot;Nama&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="" />
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email&quot;;}" onfocus="if (this.value == &quot;Email&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="" />
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>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 100%%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
Pastekan pada HTML mode.
Publikasikan dan lihat hasilnya. Kita bisa test dengan mengklik tombol Kirim tanpa mengisi form nya, apabila muncul pesan error berarti pemasangan kontak form ini berhasil.
Test kontak form.
Demikian cara menambahkan Kontak Form bawaan Blogger di halaman statis, terima kasih.
No comments
No comments

Post a Comment