Cara Membuat Form Kontak Simple di Halaman Statis Blogger - Mediaachmad

Mediaachmad.com - Cara membuat Form Kontak (Contact Us) Simple dan Keren di Halaman Statis Blogger. Kembali lagi dengan mediaachmad kali ini, mediaachmad akan memberikan sebuah tutorial bagaimana cara memasang dan membuat Form Kontak di Halaman Statis Blogger, Form Kontak ini sangatlah penting untuk Blog karena memiliki banyak fungsi, seperti ada yang melaporkan Bug di Blog Kita, ada yang menawarkan kerjasama, dan masih banyak lagi.

Kita akan membuat dan memasang Form Kontak Simple dan Keren di Halaman Statis Blogger. Oke Langsung simak tutorial dibawah ini.

Cara membuat Form Kontak (Contact Us) Simple dan Keren di Halaman Statis Blogger

1. Pertama, silakan sobat masuk ke Blogger, Lalu pilih menu HALAMAN, Klik Tombol HALAMAN BARU (New Page).
2. Kedua, Masukan semua kode dibawah ini, dan simak Keterangan untuk beberapa kode yang di tandai.

<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>

<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'] = '9999000000000000009';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d9999000000000000009','//www.URLBLOGSOBAT.com/','9999000000000000009');
_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': '9999000000000000009', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Silakan sobat ganti kode yang di tandai, sesuai keinginan, simak keterangan dibawah ini.

Keterangan :




• Nama, Email, Isi Pesan : Tulisan di dalam Form Kontak
• 9999000000000000009 : ID Blog Sobat, Cara mendapatkannya, sobat bisa melihat URL Page, simak dibawah ini

https://www.blogger.com/blogger.g?blogID=9999000000000000009#editor . . .

9999000000000000009 adalah Blog ID sobat.
• Kirim Pesan : Tulisan di Tombol Submit.
• www.URLBLOGSOBAT.com : URL Blog Sobat tanpa menggunakan https atau http.


3. Ketiga, Selesai kemudian klik Publish.

Mungkin itu yang dapat mediaachmad sampaikan tentang Cara membuat Form Kontak (Contact Us) Simple dan Keren di Halaman Statis Blogger, semoga dapat bermanfaat sekian dan terima kasih.