Cara Membuat Contact Form Simple Di Blogger (Blogspot)

Baca Juga Artikel Berikut Ini

Cara Membuat Contact Form Simple di Blogger - Contact form merupakan salah satu hal yang sebaiknya ada dalam suatu blog. Mengapa harus anda? Hal ini dikarenakan contact form dapat jadi jembatan penghubung yang baik antara pemilik blog dengan pembacanya. Dengan adanya contact form pada blog anda membuat pengunjung anda bisa menghubungi dan bertanya anda secara individu tanpa mengganggu privasi, artinya hanya anda dan pengunjung anda (yang mengirim pesan) yang mengetahuinya

Formulir Kontak juga bisa sarana untuk melakukan kerja sama antara admin dengan pembaca blognya. Semua berawal dari komunikasi, termasuk melakukan permintaan kerja sama. Salah satu upaya yang bisa dilakukan yaitu melalui formulir tersebut.

Jangan khawatir, untuk pembuatannya tidaklah sulit. Karena yang dibutuhkan hanyalah elemen HTML, CSS, dan juga Javasricpt. Adapun cara membuat dan memasangnya di blogger(blogspot) yaitu dengan dua cara. Apa saja? Simak tutorialnya berikut ini

Cara Membuat Contact Form di Blogger

Cara Pertama

• Back Up Template anda terlebih dahulu
• Masuk ke Halaman 
• Pilih Halaman baru, masuk ke mode HTML, bukan compose
• Langkah selanjutnya masukkan kode berikut ini

<form id="kontak-arlina" 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="35" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi Pesan Anda Disini *" 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>



<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#0088FF}

#kontak-arlina{margin:5px;max-width:600px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:10px auto;padding:20px 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:160px;margin:8px 0;padding:20px 12px;background:#fff;color:#00c4ff;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:right;background:linear-gradient(50deg,#3A00FF,#0088FF);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:#4E00FF;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>



<div id='show-cat'>

</div>

<div id='show-post'>

<script type='text/javaScript'>

var cat_home='ISI DENGAN URL BLOG ANDA';cat_numb=11;cat_pre='Prev';cat_nex='Next';

var cat_name;var cat_start;var cat_class;

function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');

</script>

</div>

Kode by Arlinadzgn modified by Blog Firdaus

• Klik Publish 

Setelah mempublishnya, jangan lupa tambahkan Widget Laman melalui tata letak. Tambahkan Contact Form, supaya bisa tampil pada area home page

Cara Kedua

1. Masuk ke blogger anda
2. Pilih tata letak
3. Tambahkan gadget (anda boleh meletakkannya dimana saja, baik di sidebar maupun footer)
4. Pilih gadget HTML/Javascript
5. Masukkan kode yang sama seperti tadi ke dalam kotak, beri judul sesuai keinginan anda.

<form id="kontak-arlina" 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="35" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi Pesan Anda Disini *" 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>


<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#0088FF}
#kontak-arlina{margin:5px;max-width:600px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:10px auto;padding:20px 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:160px;margin:8px 0;padding:20px 12px;background:#fff;color:#00c4ff;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:right;background:linear-gradient(50deg,#3A00FF,#0088FF);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:#4E00FF;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>


<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='ISI DENGAN URL BLOG ANDA';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>

6. Klik Simpan

Sekarang anda sudah berhasil memasangnya. Jika anda ingin mengetahui hasilnya bisa lihat pada demo berikut ini.

Baca Juga Tutorial Berikut Ini

• Cara Membuat Tools Parse HTML

• Cara Membuat Permalink Blogspot

• Cara Memasang Script Lazyload

Penutup

Sistem kerja formulir kontak ini yaitu mengirimkan pesan menuju alamat email pemilik blog (tentu saja alamat email yang digunakan untuk login ke akun bloggernya). Ketika ada pesan masuk, maka akan ada pemberitahuan di email. Saya rasa sampai sini anda bisa memahaminya.

Bagaimana? Mudah kan cara membuatnya? Jika anda masih belum mengerti tentang cara membuat contact form di blogspot ini anda bisa langsung menanyakannya kepada admin. Sekian, semoga bermanfaat.