Cara membuat contact Us Di Halaman Statis Seperti ArlinaDesign

Laman Kontak pada dasarnya di platfrom blogger sendiri sudah disediakan dalam bentuk widget yang nanti nya dapat di pasang pada sidebar blog kita.

APA PENTINGNYA FORM INI ?

Contact form bisa dibilang sangat penting, karena salah satu unsur dari blog adalah pengunjung blog tersebut. Contact form digunakan supaya pengunjung blog kita dapat mengirim laporan, pemberitahuan, kritik dan saran, juga dapat menghubungi kita melalui sebuah email. Entah itu tentang blog sobat ataupun urusan pribadi.

BERIKUT CARA MEMBUAT CONTACT US DI HALAMAN STATIS

Langkah Pertama,Pilih Menu Halaman → Buat Halaman Baru
Copy Script dibawah ini di mode HTML


<div style="text-align: justify;">
<div style="text-align: left;">
Silakan isi form di bawah ini untuk menghubungi admin Wa'rung Blog. 
Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung 
merespon pesan yang Anda kirimkan.</div>
<br /></div>
<form id="contact-form" name="contact-form">
<input box-sizing:border-box="" id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input box-sizing:border-box="" id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea box-sizing:border-box="" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> 
<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>
<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'] = '891123191301067299';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d891123191301067299','https://zymiitheme.blogspot.co.id/','891123191301067299');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '891123191301067299', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#contact-form{margin:auto;max-width:100%}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-sizing:border-box; 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 rgba(0,0,0,.14);box-sizing:border-box; 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-sizing:border-box; rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{display:block;height:40px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#34495e;border:0px;border-radius:3px;text-align:center;letter-spacing:.5px;}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;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}
@media only screen and (max-width:100%px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
Kemudian,Klik Pratinjau untuk melihat Tampilan Kontak Yang Sudah Di Buat Tadi Lalu Di Publikasikan
Ganti kode https://zymiitheme.blogspot.co.id/ dengan Url blog anda dan ganti kode 891123191301067299 dengan blog id kalian.


EmoticonEmoticon