Contact Form Blog Kompi Ajaib

Contact form dalam sebuah blog merupakan bagian penting yang harus di miliki oleh sebuah blog ,mengapa demikian ? contact form merupakan suatu media komunikasi yang rahasia ,yang harus di sediakan oleh pengelola blog untuk pengunjung ,di mana melalui contact form ini pengunjung bisa menghubungi admin dari blog itu sendiri jika memiliki keperluan ,bisnis (pengunjung ingin memasang iklan) ,atau bertanya mengenai artikel yang ada di blog selain dari kolom komentar .

Sebelum saya menulis postingan ini ,saya memiliki masalah pada contact form blog elsaviara.com ,namun setelah browsing saya menemukan solusi nya di blog kompi ajaib milik nya kang adhy suryadi ,cintact form yang di share oleh kang adhy "kompi ajaib" sangat responsive ,kenapa saya bilang responsive saat saya test memalui browser versi mobile .

Lihat Demonya DISNI

Lalu bagai manakah cara pemasangan nya ,jika anda tertarik berikut adalah cara pemasangan nya !

Sebelum nya saya memakai contact form yang ini ,silahkan lihat DISINI

Cara pemasangan Contact Form Kompi Ajaib 

1. Buat psotingan di halaman/page statis dengan mode HTML

2. Copy Code javascript di bawah pada postingan halaman statis dengan judul contact ,contact us ,contact me .

<style scoped="scoped" type="text/css">
.contact-form-box{width:50%;margin:20px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;}
#ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;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: 96%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style>

<div class="contact-form-box">
<div style="text-align: justify;">
Silahkan tulis pesan sambutan atau pembuka anda untuk pengunjung di sini .
</div>
<br />
<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="Kirim" /><br />
<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>
</div>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '8520904820622677293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8520904820622677293','//www.elsaviara.com/','8520904820622677293');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Pesan anda telah di kirim.', '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': '8520904820622677293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Info:
Ganti semua blog ID yang kasi tanda hijau dengan ID blog anda ,jangan lupa ganti juga link bog elsaviara nya .

3. Kalau sudah selesai klik publish

Untuk memastikan contact form nya berfungsi atau tidak ,silahkan test dengan melakukan pengiriman melalui contact form yang telah anda buat !

Dengan demikian selesai pemasangan contact form yang responsive ini ,silahkan baca juga artikel lainya melalui related post di bawah .

Source : Sumber referensi Link