Modifikasi Contact Form Blogger Dihalaman Statis

​

Threat kali ini saya akan mencoba modifikasi blogger contact form yang biasanya ditampilkan sebagai widget baik itu sidebar blog maupun footer widget. Namun akan sedikit berbeda jika kita tampilkan Contact form blogger ini di halaman statis, selain menghemat ruang di homepage juga akan lebih efektif agar tampilan blog menjadi lebih rapi. Cara seperti ini juga menjadi solusi error contact form pada saat kita menyembunyikan JS.widget untuk mempercepat loading blog.

DEMO

Untuk konsepnya adalah sebagai berikut:
CSS

Code:

<style scoped="scoped" type="text/css">
.pesan-text{position:relative;padding:16px 20px;background-color:#757D75;color:#fafafa;text-align:center;line-height:1.5em;font-size:18px;}
.contact-form-box{width:100%;margin:10px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 10px;padding: 10px;background: #fff;border: 2px solid #ccc;color:#999;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #ececec;outline:none}
#ContactForm1_contact-form-email-message{width: 100%;height: 150px;margin: 5px auto;padding: 10px;background: #fff;border: 2px solid #ccc;color:#999;font-family:Arial, sans-serif;}
#ContactForm1_contact-form-submit {display:block;;float: left;font-size:24px;color: #fafafa;padding: 20px 40px;margin: 10px 0 5px 0;cursor: pointer;background-color:#68C3A3;border:1px solid #68C3A3;}
#ContactForm1_contact-form-submit:hover {background-color:#e06666;border:1px solid #e06666}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message{font-size:18px;color:#e06666;width: 100%;margin-top:10px;text-align:left}
#ContactForm1_contact-form-success-message{font-size:18px;color:#1abc9c;width: 100%;margin-top:10px;text-align:left}
@media screen and (max-width: 768px){
.contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 100%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 100%;}
}
</style>

HTML

Code:

<div class="contact-form-box">
<div class="pesan-text">
Anda bisa menghubungi Author Samsury Blog melalui contact e-mail dibawah ini :
</div>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<br />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

JS

Code:

<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2076720373-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7816675335259590745';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7816675335259590745','//samsury-sites.blogspot.com/','7816675335259590745');
_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': '7816675335259590745', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Note:
Ganti angka ID 7816675335259590745 dengan ID blog anda, untuk cara melihat IDnya anda bisa masuk ke dashboard blogger bagian atas pada tab url adrress. Untuk pesan-textnya silakan ganti sesuai selera anda

 

keren tips nya gan, ijin nyoba