MASIGNCLEAN101

Membuat Halaman Contact Us (Contact Form) Pada Blog


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

Cara Membuat Halaman Contact Form ini ada terbagi menjadi dua, yang pertama yaitu melalui pihak ketiga yang memperlihatkan pelayanan pembuatan Contact Form secara simpel dan gratis, yang kedua yaitu dengan cara pembuatan aba-aba manual yang sanggup anda cari dalam internet.

Di kesempatan kali ini akan memperlihatkan bagaimana Cara Membuat Halaman Contact Form dengan dua cara tadi. Kalian sanggup 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 sanggup menentukan satu diantara website diatas dan mendapat aba-aba HTML eksklusif untuk ditempatkan pada Halaman Statis di Blog anda.

2. Halaman Contact Form Buatan sendiri

Sebenarnya cara kedua ini yang dimaksud yaitu anda tidak perlu mengunjungi situs di atas untuk pembuatan Halaman Contact Form dan cukup mencari aba-aba yang ada di internet dan eksklusif memasangnya pada blog anda.

Sebagai misalnya yaitu aba-aba yang mamang pakai pada blog ini dengan desain yang cukup sederhana tapi keren. Berikut mamang bagikan aba-aba 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 aba-aba dibawah ini kedalam Edit HTML tepat di atas aba-aba </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 aba-aba yang sudah kalian dapatkan baik dari cara nomor satu maupun nomor dua diatas. Setelah mendapat aba-aba yang ingin kalian jadikan Halaman Kontak kini kalian tinggal menempatkan pada Halaman Statis, berikut yaitu 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 aba-aba yang sudah kalian dapatkan tadi dan masukkan ke dalam "Mode HTML" pada Halaman Blog Anda.
  5. Publikasikan Halaman Anda.


Diatas yaitu Live Demo dari aba-aba cara nomor dua di atas, kalau anda ingin mempunyai sama menyerupai itu, silahkan copy aba-aba pada cara nomor 2 di atas.

Demikianlah warta dari dengan artikel Membuat Halaman Contact Us (Contact Form) Pada Blog, agar bermanfaat untuk anda. Jika menyukai artikel ini kalian sanggup like, share, and subscribe untuk berlangganan artikel terbaru eksklusif dari email anda.
Sumber https://www.mangotep.com/

:) hihi :( :-) :D ;( ;-( :-d @-) :P :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) (c) cheer
Click to see the code!
Subscribe to: Post Comments (Atom)