Panduan Blog #4 Cara Membuat Formulir Kontak

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

<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><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' &amp;&amp; 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></pre>

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

dan 7342017194742683056 dengan ID blog sobat.

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.

<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><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></pre>

Untuk melihat hasilnya, silahkan lihat halaman berikut

Demo Kontak

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>

<pre class="EnlighterJSRAW" data-enlighter-language="css" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><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></pre>

Kedua, Buata Halan baru dalam mode HTML bukan compose

<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
  <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"></script>
<script>//<![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'));
//]]></script></pre>

Jangan lupa save

Berikut adalah ID Blog sobat

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.