Cara Membuat Contact Email Blogger Premium Responsif


Berbagai macam bentuk form contact dapat dijumpai di website atau blog yang sudah dikelola secara profesional. Bentuk sederhana dari form contact adalah Formulir kontak email (email contact form).

Formulir kontak email merupakan salah satu cara yang dibuat oleh admin website atau blog supaya bisa berinteraksi baik langsung atau tidak langsung melalui email ke penggguna / pengunjung. Buat anda pemilik blog keberadaan kontak formulir email ini disarankan oleh google dan wajib di pasang apabila blog anda ingin didaftarkan mengikuti Program Google Adsense.

Seperti yang kita ketahui ataupun belum anda ketahui, untuk bisa terdaftar di Program Google Adsense, Google menetapkan persyaratan yang ketat sebelum suatu blog diterima (Approved) mengikuti Program Google Adsense. Salah satu syaratnya yaa ini dengan keberadaan formulir kontak email di blog anda.

Poin Penting
  1. Formulir Kontak Email Blogger.
  2. Cara Pembuatan dan Pemasangan Formulir Kontak Email Blogger.
  3. Modifikasi Formulir Kontak Email Blogger.
  4. Tampilan Formulir Kontak Email Blogger Premium dan Resposif.

Keberadaan Contact form pada sebuah situs web / blog bisa dijadikan sebagai indikator bahwa situs tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna terhadap apa yang ada di dalamnya. Sebenarnya Blogger.com sudah menyediakan fitur / layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di Blogspot. Tapi, sepertinya banyak pemilik blogger belum mau memanfaatkan atau menggunakan widget formulir kontak bawaan blogspot. Mereka lebih memilih untuk membuat contact form menggunakan layanan contact form dari pihak ketiga antara lain seperti foxyform, jotform, 123contactform dan lainnya.

Informasi Singkat
Surat elektronik (akronim: ratel, ratron, surel, atau surat-e) atau pos elektronik (akronim: pos-el.) atau imel (bahasa Inggris: email) adalah sarana kirim mengirim surat melalui jalur jaringan komputer (misalnya Internet).

Konsep surel pertama kali dikemukakan oleh Ray Tomlinson pada akhir tahun 1971. Ray Tomlinson pada saat itu bekerja untuk Bolt Beranek and Newman "BBN" milik lembaga pertahanan Amerika. Pada awalnya" Ray bereksperimen dengan program komputer yang bernama SNDMSG yang pada saat itu digunakan untuk meninggalkan pesan pada komputer, sehingga orang yang memakai komputer dapat membaca pesan yang ditinggalkan oleh pemakai komputer "saat itu normal ketika banyak orang menggunakan komputer yang sama secara bergantian".

Eksperimen Ray kemudian dilanjutkan dengan menghubungkan SNDMSG melalui file protocol yang bernama CYPNET sehingga program SNDMSG dapat mengirimkan pesan ke komputer lain" namun masih berada dalam satu jaringan ARPAnet. Eksperimen tersebut berhasil dan Itulah awal terciptanya surel.

Pesan surel pertama kali yang dikirim oleh Ray pada 1971 merupakan surel pertama di dunia. Isi Pesan berupa "kata kata tes" sepenuhnya dilupakan, Kemungkinan pesan pertama yang dikirimkannya adalah QWERTYUIOP atau huruf serupa," kata Ray dalam akun Flickr miliknya. Pada tahun 1972, Ray mengenalkan lambang @ "Indonesia dibaca ET" sebagai identitas email untuk memisahkan antara Identitas pengguna dengan domain. @ "bahasa inggris ditulis AT" artinya adalah "kepada".
Sumber : Wikipedia

Penggunaan layanan contact form dari pihak ketiga memang lebih mudah untuk diterapkan dan juga memiliki tampilan yang kekinian, namun dibalik itu semua tidak semua layanan contact form pihak ketiga memberikan layanannya secara gratis, sekalipun ada yang gratis maka itupun belum sepenuhnya full service, akan tetapi bersifat semi service artinya layanan formulir kontak email akan disisipi iklan baik secara langsung maupun tidak langsung dan hal ini pun merupakan hal yang wajar lah mengingat hubungan timbal balik untuk penggunaan layanan yang bersifat gratis. Sisipan iklan secara langsung biasanya terlihat di blog sedangkan sisipan iklan tidak langsung bisa terlihat pada kiriman email yang masuk ke kontak email baik pemilik blog ataupun pengguna blog yang mendapatkan feedback dari kiriman email layanan pihak ketiga.

Sebelum lanjut lebih dalam pembahasannya ada baiknya saya infokan terlebih dahulu bahwa artikel ini hanya membahas penerapan dan pemasangan formulir kontak email yang disediakan secara default oleh Blogger.com (Blogspot), namun bentuk dan tampilan premium responsif formulir kontak email yang saya bagikan ini masih bisa diadopsi untuk penggunaan di website dengan sedikit modifikasi tentunya.


Seperti yang saya katakan sebelumnya, Penggunaan layanan contact form dari pihak ketiga memang lebih mudah untuk diterapkan dan juga memiliki tampilan yang kekinian. Namun, formulir kontak email resmi bawaan blogspot masih jauh lebih baik dari itu. Formulir kontak email bawaan blogspot memang terlihat standar dan kurang menarik, namun jangan khawatir saya berikan solusinya agar formulir tersebut bisa tampil maksimal, terlihat premium dan juga responsif. Beberapa kelebihan yang dimiliki formulir kontak email bawaan blogspot antara lain :
  • Pesan akan langsung segera terkirim secepat kilat ke inbox email setelah pengguna mengklik tombol kirim (Send),
  • Sistim antar muka yang ramah sehingga memberikan kemudahan pengunjung untuk mengirimkan email secara langsung,
  • Mudah untuk di kostumasi dengan menggunakan kode CSS,
  • Halaman keseluruhan tidak akan me-reload ketika email telah terkirim,
  • Pesan yang dikirim dari formulir kontak ini akan dikirimkan ke email admin. Jika blog memiliki lebih dari satu admin, maka semuanya akan mendapatkan email yang dikirim oleh pengunjung.
Selain cara memodifikasi tampilan formulir kontak email ini, saya juga akan memberikan tutorial cara mengimplementasikan formulir kontak email ini melalui bentuk widget dan juga pemasangan pada halaman statis blog (Entri Halaman), sekalian pada akhir artikel saya berikan bonus tambahan informasi yang masih terkait mengenai formulir kontak email ini.

PERINGATAN
Sebelum lanjut ke pembahasan berikutnya ada baiknya anda melakukan pencadangan kode template HTML blog, agar tidak terjadi hal-hal yang tidak diinginkan.

DAFTAR ISI
  1. Pemasangan Formulir Kontak Email Sebagai Sidebar Widget
  2. Pemasangan Formulir Kontak Email Pada Halaman Statis
  3. Modifikasi Tampilan Formulir Kontak Email
  4. Alat Editor Tampilan CSS Tampilan Formulir Kontak Email
  5. Tips&Trik
  6. Bonus Konten
#1 Pemasangan Formulir Kontak Email Sebagai Sidebar Widget


Pemasangan formulir kontak email sebagai widget saat ini sudah cukup mudah dan sudah bisa diakses langsung dari pilihan standar blogspot widget. Adapun langkah-langkah pemasangan sebagai berikut.
  1. Login ke Blogger Dashboard.


  2. Pilih Tata Letak, kemudian klik Tambahkan Gadget.


  3. Pilih Formulir Kontak, kemudian tekan tombol Simpan.

Berikut hasil formulir kontak email standart default blogger (blogspot) seperti yang terlihat pada gambar di bawah ini.


Tampilan formulir kontak memang masih belum maksimal untuk itu diperlukan beberapa modifikasi melalui kode CSS agar tampilan formulir tersebut bisa terlihat premium dan juga mendukung fitur responsif. Buat modifikasi tampilan formulir kontak email ini bisa di lihat pada Bab 3 di bawah ini.

#2 Pemasangan Formulir Kontak Email Pada Halaman Statis


Pemasangan formulir kontak email pada halaman statis (Entri Halaman) cukup mudah namun membutuhkan sedikit trik supaya yang ditampilkan hanya terlihat pada halaman statis (bukan sebagai widget). Namun bisa juga pemasangan formulir kontak email di padukan antara halaman statis dan sebagai widget, sesuai dengan kebutuhan anda.

2.1. Pemasangan Formulir Kontak Di Halaman Statis dan Sebagai Widget
  1. Ikuti langkah yang ada pada Bab 1, yaitu Pemasangan Formulir Kontak Email Sebagai Sidebar Widget. Hal ini penting dilakukan untuk me-registrasi otorisasi penggunaan fitur formulir kontak blogger.
  2. Selanjutnya silakan mengikuti cara pemasangan pada sub Bab 2.2 dibawah ini.
2.2. Pemasangan Formulir Kontak Di Halaman Statis Saja
  1. Pastikan anda sudang memasang formulir kontak untuk widget seperti pada langkah Bab 1.
  2. Apabila ingin memasang Formulir Kontak Di Halaman Statis dan Sebagai Widget silakan anda lewati bagian ini dan lanjutkan kembali pada langkah Nomor 5.

    Pemasangan Formulir Kontak Di Halaman Statis Saja membutuhkan sedikit trik, yaitu dengan memasang beberapa baris kode CSS di HTML Template Blog, untuk itu sebaiknya mem-backup kode Template Blog anda untuk mencegah hal-hal yang tidak diinginkan. Apabila sudah di backup maka selanjutnya silakan anda ikuti langkah-langkah berikut ini.

    Pada Blogger dashboard klik tombol Template.


  3. Kemudian klik tombol Edit HTML.


  4. Selanjutnya pada editor template blog tekan tombol Ctrl + F untuk menampilkan kotak pencarian. Ketikan </b:skin> pada kotak pencarian dan tekan enter untuk menampilkan lokasi kode tersebut. Apabila sudah ketemu maka letakan kode berikut ini di atas kode </b:skin>.
    div#ContactForm1 {display: none !important;}


    Setelah sudah dimasukan kode CSS diatas selanjutnya tinggal tekan tombol Save untuk menyimpan. Tahapan trik inject kode CSS sudah selesai maka langkah selanjutnya merupakan tahapan pemasangan pada halaman statis (Entri Halaman). Apabila Contact Form masih terlihat dikotak widget maka silakan anda taruh kode tersebut pas diatas kode </Body>.

  5. Selanjutnya kembali ke Blogger Dashboard kemudian klik Halaman (Pages) setelah itu klik Tambah Halaman (New Page).


  6. Pada Halaman baru yang sudah muncul, buat judul laman, misalnya Contact Us, Contact Me, Hubungi Kami, atau yang lainnya. Klik tombol HTML (sebelah Compose) untuk masuk ke mode edit kode HTML.


    Berikutnya copy dan pastekan kode di bawah ini sebagai isi konten halaman.
    <div class="Form">
    <form name="contact-form">
    <p></p>
    Nama
    <br />
    <input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    <p></p>
    Email
    <span style="font-weight: bolder;">*</span><br />
    <input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    <p></p>
    Pesan
    <span style='font-weight: bolder;'>*</span>
    <br />
    <textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <p></p>
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
    <p></p>
    <div style="max-width: 400px; text-align: center; width: 100%;">
    <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
    <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
    </div>
    </form>
    </div>

    Nonaktifkan kolom komentar, kemudian langsung publikasikan halaman contact form pada mode HTML atau di aktifkan juga boleh, silakan disesuaikan dengan kebutuhan saja.

    Setelah semua kode sudah dimasukan silakan di pastikan terlebih dahulu apakah sudah sesuai, kalau sudah maka langkah selanjutnya tinggal menerbitkan artikel halaman ini dengan menekan tombol Publish (Publikasikan).


  7. Lihat atau kunjungi halaman contact form Anda, kemudian cobalah kirim pesan untuk mengetahui apakah formulir kontak bekerja sesuai dengan yang diharapkan.
#3 Modifikasi Tampilan Formulir Kontak Email


Formulir kontak email standar blogger (blogspot) dapat di modifikasi tampilannya melalui kode CSS agar lebih menarik dan terlihat premium, seperti yang terlihat pada gambar di bawah ini. Apabila anda ingin menggunakan tampilan seperti di bawah ini maka anda cukup menambah kode CSS dan mengganti kode HTMLnya saja.


Kostumisasi tampilan juga bisa anda lakukan sendiri sesuai dengan kebutuhan dan selera anda. Bagi anda yang ingin melakukan kostumisasi tampilan bisa menggunakan editor tampilan yang saya berikan pada Bab 4.


<style>
.kotakemail{
width:60%;
border:1px solid #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.KontakEmail{
text-align:left;
padding:10px;
background:#f3f3f3;
transition: all 1s ease-in-out;
}
.KontakEmail:hover{
}
.latar{
margin:0;
padding:40px 10px 40px 10px;
border:1px solid #ccc;
border-radius:2px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZs8QTjcBW45WkAIsvACb0e3USr2LXjwkpCB74T112yQgS8TCZ_uTVhz_lAgra6WwLrBsadsCV6oLPWlFnCA8tbJ5KqBbLXjyauyQJ141YSQdiRTA2xSNnLwsvaRFqvpZvapy9FbgP8sI/s1600/background-texture.png);
}
@media screen and (max-width:640px){
.kotakemail{width:100%;}
.latar{padding:0px 0px 0px 0px;background:none;border:none;border-radius:0px;}
}
@media screen and (max-width:350px){
.kotakemail{width:100%;}
.latar{padding:0px 0px 0px 0px;background:none;border:none;border-radius:0px;}
}
.judulAtas{
width:100%;
height:68px;
margin:0 0;
background:#ff0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDoExVm5l3ScFNb5Id3AjQMsvSnSeiOLkdXYn-i1lxlhkqy7TtV4ZqYOpEy0SgV0-iCnFsbPHLCe25DnsgPg6ag0Y1_A4_m22WmrIp-YPkh1pAFf7pk3CEm06l0j6Tx8oG5sxoUhvphw/s1600/Mail-icon.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
text-align:center;
font-weight:bold;
font-size:16px;
text-shadow:0px -1px 0px rgba(255,255,255,.5);
transition: all .3s ease-in-out;
}
.judulAtas:hover{
background:#8C2854 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji6gphJ52bY6Vv8IPPZkTkHcgbN0fnQk4mLZcSN6gSi-lnJA6AOEkpzrR3pcJzzykGFrmj-Y3jFAw5zJz8Kb8hss86TU51r5qHsgc__dShz9jOFVZ_MduaIYiOObt8N0sFDLXoJ4v2HZ8/s1600/Mail-icon-google.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
}
.keteranganbawah{
width:100%;
color:#000;
font-weight:400;
margin:0 0;
padding:5px 10px 5px 10px;
text-align:justify;
font-size:14px;
background: #f3f3f3; /* Old browsers */
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
background:#fff;
transition: all .3s ease-in-out;
}
.contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {
border:1px solid #ccc;
background: #f1c608;
}
</style>

<div id="latarBG" class="latar">
<center>
<div class="kotakemail">
<div class="judulAtas"></div>
<div class="KontakEmail">
<form name="contact-form">
<p></p>
<div style="background:#e8f2ff;width:100%;border:1px solid #ccc;font-size:16px;padding:0px;">
<span style="color:#ffffff;background:#60a2ff;padding:3px 6px 3px 6px;"><i class="fa fa-user"></i></span>
<span style="color:#000000;font-weight:400;">Your Name</span></div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Enter your name here..."/>
<p></p>
<div style="background:#ffe8e8;width:100%;border:1px solid #ccc;font-size:16px;padding:0px;">
<span style="color:#ffffff;background:#ff530b;padding:3px 5px 3px 5px;font-weight:400;">@</span>
<span style="color:#000000;font-weight:400;">Your Email*</span></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="✉ Enter your email here..."/>
<p></p>
<div style="background:#ebffe8;width:100%;border:1px solid #ccc;font-size:16px;padding:0px;">
<span style="color:#ffffff;background:#20cc00;padding:3px 6px 3px 6px;"><i class="fa fa-pencil-square"></i></span>
<span style="color:#000000;font-weight:400;">Your Message*</span></div>
<p></p>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write your message here..."></textarea>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value=" Kirim " style="width:100%;margin-top:-20px;opacity:0.8;"/>
<div style="text-align: center; width: 100%;">
<br />
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>
<div class="keteranganbawah">
Harap gunakan formulir kontak ini dengan bijaksana. Mungkin tidak semua pesan yang masuk bisa saya balas. Tapi saya akan berusaha sebisa mungkin membaca semua pesan yang dikirimkan. Harap maklum, saya bukan robot. Terima kasih.
</div>
</div>
</center>
</div>

#4 Alat Editor Tampilan CSS Tampilan Formulir Kontak Email


Bagi anda yang ingin mengkostumasi tampilan formulir kontak email silakan gunakan editor di bawah ini untuk mempermudah dan mempercepat hasil kostumisasi. Jangan Lupa untuk merubah BlogID pada kode di bawah dengan BlogID milik anda.

Kode CSS |
HTML or JavaScript |



Live View Code...

#5 Tips&Trik
  • Setelah memasang formulir kontak email pada halaman statis jangan lupa untuk memasang tombol link menuju halaman tersebut. Tombol link bisa di pasang pada Menu Utama atau diletakan pada bagian blog yang anda inginkan. Saya sarankan tombol link tersebut dipasang pada menu utama untuk mempermudah pengunjung meng-akses halaman kontak tersebut.
  • Jika anda memiliki pengetahuan yang cukup mengenai Javascript, anda bisa menambahkan script animasi untuk lebih mempercantik efek tampilan formulir kontak email tersebut.
  • Bagi anda yang baru belajar mengenai kode CSS dan HTML, anda bisa mengunjungi situs w3School untuk memperdalam pengetahuan anda mengenai kode-kode tersebut.
#6 Bonus Konten


Bonus konten artikel kali ini merupakan sesuatu yang membuat pengunjung blog semakin betah dan rajin melihat halaman kontak anda. Silakan anda Like, Comment dan Share sekiranya artikel ini bisa menambah pengetahuan dan bermanfaat.


Keyword :


Formulir, Kontak, Email, Blog, Blogger, Blogspot, Premium, Responsif, Contact, Form, Cara, Pemasangan, Lengkap, Modifikasi, Kostumisasi, HTML, CSS, Javascript

Incoming Search Term :


Pengertian Contact Form, Definisi Formulir Kontak Email, Pemasangan Form Email Blogspot, Membuat Contact Form Blogger, Modifikasi Contact Form Blog, Kustomisasi CSS Form Email Blogspot, Cara Menampilkan Contact Form Di Halaman Statis atau Entri Halaman.
edit Tags: Blogspot

Related Cara Membuat Contact Email Blogger Premium Responsif:

LihatTutupKomentar