Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Aplikasi
    • editor
    • lightroom
  • Software
  • Tips
  • Tutorial
  • Whatsapp
  • Xiaomi
No Result
View All Result
Jejaker
  • Home
  • Aplikasi
    • editor
    • lightroom
  • Software
  • Tips
  • Tutorial
  • Whatsapp
  • Xiaomi
No Result
View All Result
Jejaker
No Result
View All Result

Home » Panduan Blog #4 Cara Membuat Formulir Kontak

Panduan Blog #4 Cara Membuat Formulir Kontak

Jejaker by Jejaker
in Blogger, tutorial
0
Share on FacebookShare on Twitter
Daftar Isi Buka
1. Cara membuat halaman kontak (Contact us) di blog keren dan kekinian
1.1. style 1 contact form untuk blogger
1.1.1. Cara pasang:
1.2. Style 2 Cara Pasang Halaman Contact Us di blogspot
1.2.1. cara pasang

Cara Membuat Formulir kontak di halaman statis blogspot | Selain ada halaman Disclaimer, Privacy Plicy, biasanya, pada blog juga akan terdapat halaman wajib lainnya, yaitu halaman kontak. Halaman Contact Us ini berfungsi untuk memudahkan pengunjung blog menghubungi admin blog, entah itu untuk meminta dibuatkan tutorial, melaporkan link yang rusak atau hanya sekedar ingin berinteraksi dengan admin secara personal.

Selain dari pada itu, jika blog sobat sudah besar biasanya ada juga yang ingin bekerja sama untuk content placement, beriklan pada blog sobat, jika sobat tidak menyediakan laman kontak, lalu bagaiman mana mereka yang ingin menjalin bisnis dengan sobat menghubungi sobat.

Hal ini sudah saya rasakan sendiri manfaat pasang halaman kontak pada blog, dimana ada salah seorang manager perusahaan kirim email melalui contact form dihalaman yang sudah saya sediakan, ternyata dia ingin mengajak saya untuk berbisnis yaitu content placement.

Baca Juga: Cara membuat Halaman Disclaimer, Privacy Policy dan TOS di blog

Ini baru beberapa manfaat, jika sobat contact form di blog. Akan ada banyak lagi manfaat lain setelah sobat membuat halaman kontak di blog sobat.

Agar pengunjung lebih mudah untuk menemukan lokasi halaman kontak di blog sobat, biasanya formulir contact us ini ditampilkan pada footer atau header ditempat dimana pengunjung dapat melihat dengan jelas.

Lalu bagamana cara untuk membuat formulir kontak di blog dengan mudah? simak tutorialnya dibawah ini:

Cara membuat halaman kontak (Contact us) di blog keren dan kekinian

Berikut ini ada beberapa style contact form blogger yang bisa sobat pilih sesuai dengan selera sobat masing-masing.

Cara memasangnya pun tidak perlu mengerti coding, karena tinggal pasang saja di halaman statis lalu di publihs

berikut ini beberapa pilihan styele contact form blogger

style 1 contact form untuk blogger

Cara pasang:

Langkah 1, sobat harus menambahkan widget di pada template sobat

caranya silahkan masuk pada blog sobat Tata Letak==> Klik tambahkan Gadget ==> Pilih Formulir kontak atau contact form

Langkah 2

Silahkan tambahkan CSS dibawah ini pada template sobat diatas kode </head>

Masuk ke dasbor blog ==> Tema==>Etid HTML dan temukan kode </head> ( Gunakan CTRL+F Untuk memudahkan pencarian kode </head>

Setelah ketemu, silahkan copy CSS dibawah ini sebelum </head>

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

Kemudian save

Langkah 3

Jangan keluar dulu dari Edit HTML, silahkan tambahkan kode dibawah ini diatas kode </head> juga

<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'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.jejaker.com/','7342017194742683056');
 _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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
 //]]>
 </script>

Silahkan ganti kode www.jejaker.com dengan URL blog sobat

dan 7342017194742683056 dengan ID blog sobat.

cara membuat halaman kontak di blog

Langkah 4

Membuat halaman baru, untuk menyimpan script formulir kontak di blog sobat.

caranya masuk dasbor blog, kemudian pilih Halaman, buat halaman baru, pilih mode HTML bukan Compose

Setelah itu, silahakn copy kode dibawah ini, pada halaman yang baru sobat buat.

Sebelum di paste, silahkan isikan dulu judul pada halaman terserbut, misalkan Contact Us, agar URL halamannya sama dengan judul halaman kontak sobat.

cara membuat formulir kontak di blog

<form name="contact-form">
 <div class='formcolumn1'>
 <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
 </div>
 <div class='formcolumn2'>
 <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
 </div>
 <div class='formcolumn3'>
 <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
 </div>
 <div class='formcolumn4'>
 <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
 </div>
 <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">
 ContactForm1,#comments{display:none}
 ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
 ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
 ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
 ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
 .formcolumn4{position:relative}
 .formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
 ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
 ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
 form{color:#888}
 .formcolumn1,.formcolumn2{float:left;width:50%}
 .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
 .formcolumn2{padding:0 0 0 10px}
 @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
 </style>

Untuk melihat hasilnya, silahkan lihat halaman berikut

Demo

Demikian formulir kontak untuk blogger style 1, untuk yang ingin mencoba style 2 silahkan simak tutornya dibawah ini:

Style 2 Cara Pasang Halaman Contact Us di blogspot

Berikut ini formulir kontak untuk blog yang bisa sobat coba dan pasang di blog sobat.

Contact form blogger ini fungsinya sama dengan yang diatas, namun sedikit beda tampilannya saja

cara pasang

Pertama, masuk ke edit HTML lagi pada template sobat kemudian cari kode </head>

Simpan CSS dibawah ini diatas kode </head>

<b:if cond='data:view.isPage'><style>
 /* Contact Form */
 comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{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 #1d2129;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 #1d2129;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:#008c5f;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:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;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}
 </style></b:if>

Kedua, Buata Halan baru dalam mode HTML bukan compose

&lt;form id="kontak" name="contact-form">
  &lt;input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
  &lt;input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
  &lt;textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5">&lt;/textarea>
  &lt;input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
  &lt;div style="max-width: 222px; text-align: center; width: 100%;">
    &lt;div id="ContactForm1_contact-form-error-message">&lt;/div>
    &lt;div id="ContactForm1_contact-form-success-message">&lt;/div>
  &lt;/div>
&lt;/form>
&lt;script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js">&lt;/script>
&lt;script>//&lt;![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' &amp;&amp; BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.igniel.com/','6600000000000000066');
_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': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>&lt;/script>

Jangan lupa save

Nama
Email
Isi pesan
Tulisan di formulir.
Kirim PesanTulisan di tombol submit.
6600000000000000066ID Blog. Ada 4 kali penulisan.
www.blogkamu.comAlamat blog tanpa http / https.

Berikut adalah ID Blog sobat

cara membuat halaman contact us di blog

Kemudian publish

Nah itu dia, 2 style halaman kontak blogger yang sobat bisa coba satu persatu sesuaikan dengan selera sobat masing-masing.

Tinggalkan komentar jika masih ada yang ingin ditanyakan, nanti admin akan bantu.

Tags: bloggertipstutorial
ShareTweet
Previous Post

Cara Download Video di Timeline LINE Android

Next Post

Teknik Fotografi Menakjubkan Yang Wajib Kamu Coba

Related Posts

garansi xiaomi

Perbedaan Garansi HP Xiaomi

download di indoxxi

Cara Download Film di IndoXXI

xioami dibawah 2 juta murah

Rekomendasi Hp Xiaomi Dibawah 2 Juta

kartu SIM by.u

Cara Aktivasi Kartu By.U Telkomsel

Next Post
macam macam teknik pengambilan gambar fotografi

Teknik Fotografi Menakjubkan Yang Wajib Kamu Coba

cara memperbaiki kartu memori yang rusak tanpa memformat di android

Cara Memperbaiki SD Card Tidak Terbaca Tanpa Format?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Rekomendasi

3 Cara Download Windows 10 May 2019 Update Original Dari Microsoft

file dari whataspp

Cara Agar Foto WhatsApp Tidak Tersimpan Otomatis

Cara Buka Akun Instagram di PC

download lightroom apk mod full 1200+ presets terbaru

Download Lightroom Full Mod Full Preset

Cara Setting ads.txt AdSense di Blogger dan wordpress

Mengatasi Ads.txt di Dashboard Adsense

Cara Uninstall dan Reinstall Aplikasi Bawaan Windows 10 Dengan Mudah

  • Hubungi Kami
  • Disclaimer
  • Privacy Policy
Email: [email protected]

© 2019 Jejaker.com | All Right Reserved

  • Home
  • Aplikasi
    • editor
    • lightroom
  • Software
  • Tips
  • Tutorial
  • Whatsapp
  • Xiaomi

© 2019 Jejaker.com | All Right Reserved

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.