Cara membuat halaman contact form di blog AMP Cara membuat contact form di blog non-javascript atau bisa disebut AMP. Kali ini saya akan share bagaimana cara me
Cara membuat contact form di blog non-javascript atau bisa disebut AMP.
Kali ini saya akan share bagaimana cara membuat contact form di halaman blog AMP.
Langkah 1:
Masuk ke HTML editor template di dashboard blogger anda.
Cek bagian </body> apakah seperti berikut.
<!--</body>--></body>
Bila tidak maka ubah kode </body> dengan kode diatas.
Kode diatas berguna untuk menyembunyikan sebuah javascript dan juga mempercepat loading blog anda. Namun. Kode diatas mempunyai kekurangan yaitu: beberapa widget atau gadget bawahan blogger yang memakai javascript tidak berfungsi. Misal: statistik blog widget, atau map dan lain". (tidak semua widget akan seperti itu) dan juga contact form menjadi error atau tidak dapat mengirim form atau pesan yang dikirimkan pengunjung tidak terkirim kepada admin blog.
Nah berikut caranya untuk mengatasi error tersebut.
Pesan Awal sebelum kode form: (edit sesuka kalian)
Silahkan isi form di bawah ini untuk menghubungi admin Website Development Indonesia. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
Form dibawah pesan diatas:
<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 isi form di bawah ini untuk menghubungi admin Kompi Ajaib. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
</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'] = '2583045784323695327';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2583045784323695327','//www.kompiajaib.com/','2583045784323695327');
_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': '2583045784323695327', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Hal yang perlu diperhatikan:
window['blogger_blog_id'] = '2583045784323695327' silahkan ganti kode blog id 2583045784323695327 yang saya kasih mark kuning tersebut dengan blog id Anda yang tertera di address bar browser halaman dashboard blog Anda.
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2583045784323695327','//www.kompiajaib.com/','2583045784323695327') silahkan ganti angka yang saya kasih mark kuning tersebut dengan blog id Anda. Dan www.kompiajaib.com silahkan ganti dengan domain blog Anda.
'blogId': '2583045784323695327' silahkan ganti angkanya dengan id blog Anda.
Selesai... Silahkan publish halaman contact form yang barusan Anda buat dan silahkan coba contact formnya. Dan form ini sudah saya buat responsive, tinggal rubah tampilannya bila ingin sesuai dengan selera Anda pada kode CSS-nya.
DEMO
Demikian artikel yang saya buat. Semoga membantu.
Source: kompiajaib.com
Di optimalkan oleh: Dimas Lanjaka