Sabtu, 12 Mei 2018

Membuat Halaman Contact Us (Contact Form) Pada Blog

Membuat Halaman Contact Us (Contact Form) Pada Blog

Membuat Halaman Contact Us (Contact Form) Pada Blog
Cara Membuat Halaman Contact Us (Contact Us) Pada Blog - Membuat Halaman Kontak pada blog sangatlah diperlukan untuk menyediakan layanan interaksi kepada para pengunjung jika ingin menghubungi kontak admin. Dengan adanya Halaman "Kontak" ini diharapkan pengunjung dapat berinteraksi dengan admin lebih mudah.

Cara Membuat Halaman Contact Form ini ada terbagi menjadi dua, yang pertama adalah melalui pihak ketiga yang memberikan pelayanan pembuatan Contact Form secara simpel dan gratis, yang kedua adalah dengan cara pembuatan kode manual yang bisa anda cari dalam internet.

Di kesempatan kali ini Blog Mang Otep akan memberikan bagaimana Cara Membuat Halaman Contact Form dengan dua cara tadi. Kalian bisa pilih cara mana yang akan kalian gunakan sebagai desain blog anda. Simak tutorialnya berikut ini :

1. Halaman Contact Form Dengan Pihak Ke-3

Pada umumnya layanan pembuatan Halaman Contact Form ini berada dalam sebuah situs atau website, berikut mamang cantumkan link dengan jasa layanan pembuatan Halaman Contact Form terbaik, sebagai berikut :
  1. FOXYFORM
  2. 123 Contact Form
  3. FormSpring
  4. Kontactr
  5. PagePow
  6. My Contact Form
  7. Email Me Form
  8. etc
Kalian bisa memilih satu diantara website diatas dan mendapatkan kode HTML langsung untuk ditempatkan pada Halaman Statis di Blog anda.

2. Halaman Contact Form Buatan sendiri

Sebenarnya cara kedua ini yang dimaksud adalah anda tidak perlu mengunjungi situs di atas untuk pembuatan Halaman Contact Form dan cukup mencari kode yang ada di internet dan langsung memasangnya pada blog anda.

Sebagai contohnya adalah kode yang mamang pakai pada blog ini dengan desain yang cukup sederhana tapi keren. Berikut mamang bagikan kode nya di bawah ini :

<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: 222px; 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}
#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:#66afe9;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:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#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:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-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'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1300850271808010327','//www.mangotep.com/','1300850271808010327');
_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': '1300850271808010327', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Kemudian anda tambahkan kode dibawah ini kedalam Edit HTML tepat di atas kode </head>

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

Cara Memasang Halaman Contact Form Di Blog

Sekarang kita berlanjut ke bagaimana cara memasang kode yang sudah kalian dapatkan baik dari cara nomor satu maupun nomor dua diatas. Setelah mendapatkan kode yang ingin kalian jadikan Halaman Kontak sekarang kalian tinggal menempatkan pada Halaman Statis, berikut adalah langkah - langkah nya :
  1. PASTIKAN anda menambahkan widget KONTAK pada Tata Letak
  2. Masuk ke Blogger.com dan menuju Menu Halaman (Page)
  3. Buatlah Halaman Baru (New Page) dan pastikan kalian mengisi judul dengan "Kontak" atau "Kontak Kami" dan sejenisnya sehingga URL halaman tidak menjadi default (Blog-Page).
  4. Copy kode yang sudah kalian dapatkan tadi dan masukkan ke dalam "Mode HTML" pada Halaman Blog Anda.
  5. Publikasikan Halaman Anda.


Diatas adalah Live Demo dari kode cara nomor dua di atas, jika anda ingin memiliki sama seperti itu, silahkan copy kode pada cara nomor 2 di atas.

Demikianlah info dari Blog Mang Otep dengan artikel Membuat Halaman Contact Us (Contact Form) Pada Blog, semoga bermanfaat untuk anda. Jika menyukai artikel ini kalian bisa like, share, and subscribe untuk berlangganan artikel terbaru langsung dari email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments