Cara Membuat Contact Us Pada Halaman Statis Blogger

Cara membuat Contact Us di Blogger sebenarnya bukanlah hal yang perlu di bahas lagi karena sebagian besar template bawaan Blogger sudah memiliki Contact Form sendiri dan cara memasangnya pun sangat mudah sekali. Akan tetapi keberadaan Contact Form bawaan Blogger ini sangat jarang terlihat di gunakan oleh blog-blog pada umumnya.

Berdasarkan dari beberapa pengamatan kami, para Blogger lebih suka memasang Contact Us di halaman statis blog. Namun untuk hal ini kita tidak akan membahas lebih jauh lagi tentang alasan mereka memilih halaman statis. Yang terpenting adalah kita mengetahui terlebih dahulu apa dan bagaimana cara membuat form Contact Us di halaman statis blog.

Contact Us dalam bahasa Indonesianya adalah hubungi kami. Jadi dapat di artikan bahwa Contact Us blog adalah layanan berupa halaman statis blog yang berisi formulir pengisian yang wajib di isi sebagai syarat untuk terjalinnya komunikasi antara pengunjung dan pengelola (Admin) blog.

Selain itu, keberadaan layanan Contact Us juga dapat menunjukan sejauh mana keseriusan dari blog atau website yang ada. Nah, jika sudah mengerti mengenai apa itu Contact Us, maka berikut ini cara membuat Contact Us pada halaman statis Blogger.

Gambar 1 : Tampilan contoh Contact Us Pada Halaman Statis Blogger

Copy semua code di bawah ini.

<form name="contact-form">
Name<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
Email Address <span class="wajib">*</span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
Massage <span class="wajib">*</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div class="formb">
<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" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '270853728822974467';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d270853728822974467','http://mediasiblog.blogspot.co.id','270853728822974467');
_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': '270853728822974467', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#272727;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style>

Kode ini dari berbagai sumber 

Setelah mengcopy semua kode di atas, langkah selanjutnya silahkan langsung saja masuk ke dashboard Blogger masing-masing. Untuk lebih jelas coba ikuti tutorial gambar serta penjelasannya di bawah ini.

Gambar 2 : Cara membuat Contact Us Pada Halaman Statis Blogger

1. Pages: Klik menu tersebut untuk tahap pembuatan halaman baru.
2. New Page : Klik untuk membuat halaman baru (Contact Us/Hubungi Kami).
3. HTML: Klik untuk memilih halman HTML.
4. Pastekan kode yang sudah di copy tadi.
5. Copy blogID (blogID Kamu). Jika belum tahu berapa blogID-nya silahkan lihat di bagian atas kolom Url. Contoh : blogID Mediasi Blog seperti di atas. Jika sudah mengcopy-nya silahkan gantikan blogID yang sudah ada dengan punya kamu. Masih bingung bagian mana saja yang harus di ganti? silahkan lihat kode di atas tadi. Ada tanda biru dan merah bukan?Nah untuk biru gantikan dengan blogID kamu dan untuk merah gantikan dengan Url/Alamat blog kamu.
6. Title Post : Isikan dengan Hubungi Kami atau terserah sesuai selera.
7. Publish. Klik. Selesai.

Jika ada kendala silahkan hubungi kami melalui halaman Kontak, Email, atau lewat FanPage FB. Jika tidak ada, maka sampai di sini dulu postingan mengenai cara membuat Contact Us pada halaman statis Blogger.