Cara Membuat Formulir Kontak (Contact Form) di Halaman  Statis Blogger.

Cara Membuat Halaman Statis Formulir Kontak ini melengkapi sekaligus update tips cara menciptakan form kontak sebelumnya.

Langsung saja kita buat:

1. Klik Laman (Pages) > Laman Baru (New Page)
2. Isu judul laman, contohnya Kontak, Contact Us, Contact Me, Hubungi Kami, Kontak Admin.
3. Klik mode HTML (sebelah Compose) di kanan atas
4. Copas arahan 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 sanggup 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 Formulir Kontak di Blogger. Pesan yang terkirim akan ada di email Anda. Jika gagal masih ada cara lainnya di bawah ini.

CARA LAIN

Yang ini model lain lagi. Desain formulir kontak di halaman statis ini dari blog Kang Ismet. ibarat di bawah ini:

 Cara Membuat Halaman Statis Formulir Kontak ini melengkapi sekaligus update tips  Cara Membuat Halaman Formulir Kontak di Blogger

Cara Membuat Halaman Formulir Kontak di Blogger

Cara menciptakan halaman statis form kontak di blogegr sebagai berikut.

1. Klik Layout > Add a Gadget di sidebar
2. Klik More Gadgets > klik/pilih Contact Form


 Cara Membuat Halaman Statis Formulir Kontak ini melengkapi sekaligus update tips  Cara Membuat Halaman Formulir Kontak di Blogger

3. Save!
4. Geser Widget Contact Form ke posisi paling bawah.

Tahap berikutnya Membuat Halaman Formulir Kontak di Blogger

1. Klik Template > Edit HTML
2. Cari arahan ]]></b:skin>
3. Copas arahan berikut ini di atas arahan tadi:

.widget.ContactForm,.widget #ContactForm1{display: none !important;}
4. Save!

Langkah selanjutnya ialah menciptakan halaman khusus form kontak:

1. Klik Page > New Page
2. Segera isi judul halaman dengan Kontak
3. Klik mode HTML
4. Copas arahan berikut 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">
#comments, #blog-pager, .breadcrumbs, .post-footer{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;
}
</style>

5. Di sajian pilihan (option) sebelah kanan, pastikan setting halaman form kontaknya ibarat ini.

 Cara Membuat Halaman Statis Formulir Kontak ini melengkapi sekaligus update tips  Cara Membuat Halaman Formulir Kontak di Blogger


6. Klik Publish!

Beres. 
Silakan uji coba.

Demikian Cara Membuat Halaman Formulir Kontak di Blogger. Good Luck & Happy Blogging! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours