syahlim.com - Contact Us adalah form kontak kami (dalam bahasa indonesia) yang berguna untuk menghubungi pemilik situs / blog bagi pengunjung yang ingin menyampaikan suatu pesan melalui form kontak tersebut secara personal maupun pribadi.
Dengan ada contact us ini situs maupun blog anda akan terlihat lebih profesional dan memudahkam pengunjung untuk berinteraksi dengan mudah dengan anda, hal ini juga berpengaruh terhadap saat anda mendaftarkan Google AdSense pasti akan di approve dikarena navigasi bantuan anda lengkap seperti About, Privacy Policy, Disclaimer, TOS dan Contact Us ini wajib ada di situs maupun blog anda.
Penasaran bagaimana cara membuat contact us responsive blog ini? tanpa banyak kata langsung saja anda simak tutorialnya berikut ini.
Cara Membuat Contact Us Responsive di Blog
1. Langkah awal pastinya anda harus login terlebih dahulu ke blogger.com.
2. Jika sudah login masuk ke menu Halaman > Halaman Baru di Dashboard blog anda masing-masing, dan masuk ke menu tab HTML ingat bukan Compose ya tapi HTML di halaman statis blog anda.
3. Setelah itu buat judul Contact Us / Contact di halaman statis anda terlebih dahulu, bebas sebenarnya nama Contact Us tergantung selera anda dan Copy / Salin kode berikut ini.
Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
<br />
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea 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: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#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-shadow:inset 0 1px 1px 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-shadow:inset 0 1px 1px 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:#F44336;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#F44336;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#F44336;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<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'] = '8152346918761342667';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8152346918761342667','//infiniteidn.blogspot.com/','8152346918761342667');
_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': '8152346918761342667', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
4. Jika sudah anda salin tempelkan kode diatas di halaman statis anda tadi, Ganti semua id blog 8152346918761342667 ini dengan id blog milik anda masing-masing, untuk mendapatkan id blog anda tinggal salin di kolom pencarian url browser anda contoh seperti url berikut https://www.blogger.com/blogger.g?blogID=8152346918761342667 dan ganti juga url blog syahlim.com dengan url blog anda.
5. Klik “Publikasikan” selesai.
Untuk demo result berikut ini:
Itulah Cara Membuat Contact Us Responsive di Blog. Bagaimana mudah bukan? sesimple itu yakin masih belum bisa, sampai disini dulu untuk artikel kali ini semoga bermanfaat ok see you next time.