Membuat Sendiri Formulir Kontak Pada Halaman Blog

Blogger memiliki gadget formulir kontak sendiri dimana tampilannya sederhana namun memiliki fungsi yang cukup baik mengingat formulir kontak digunakan untuk berkirim pesan pribadi antara pengunjung blog dengan admin blog.

Metodenya pun cukup sederhana, pengunjung blog yang ingin berkirim pesan cukup memasukkan nama, alamat email yang masih digunakan beserta isi pesan yang ingin dikirim,setelah dikirim maka pesan tersebut akan masuk kedalam inbox gmail admin blog.

Formulir kontak biasanya diletakkan dibagian sidebar atau pada bagian footer blog,namun banyak pula yang menempatkannya pada bagian halaman blog yang bertujuan untuk keperluan  adsense/periklanan lainnya

Bagi anda yang ingin membuat sendiri formulir kontak hanya pada halaman blog, silahkan anda ikuti tutorial yang akan saya berikan dibawah ini.

I.Langkah pertama

Langkah pertama ialah menambahkan gadget formulir kontak pada bagian sidebar.

1.Masuk ke menu utama blogger dengan cara login di www.blogger.com.

2.Berikutnya  klik tata letak.

3.Berikutnya klik tambahkan gadget pada bagian sidebar, seperti contoh gambar dibawah ini.

4.Berikutnya klik  formulir kontak, seperti contoh gambar dibawah ini.

5.Berikutnya klik simpan.

Penambahan gadget formulir kontak pada sidebar bertujuan untuk mengaktifkan formulir kontak di blog, karena jika tidak? maka formulir kontak yang akan dibuat pada halaman blog tidak akan bekerja secara  optimal.

II.Langkah kedua

Langkah berikutnya ialah menyembunyikan formulir kontak  pada bagian sidebar dengan menggunakan CSS pada tema blog.

1.Silahkan anda klik tema » edit HTML, seperti contoh gambar dibawah ini.

2.Berikutnya anda copy kode berikut ini.

#ContactForm1{display:none !important;}

3.Paste kode tersebut diatas kode ]]></b:skin>.

4.Berikutnya klik simpan.

III.Langkah ketiga

Langkah berikutnya ialah memasang formulir kontak pada halaman blog,dalam hal ini saya akan memberikan sebuah style formulir kontak yang sederhana namun  memiliki kemampuan yang cukup baik.

1.Pertama, silahkan anda klik halaman » halaman baru,seperti contoh gambar dibawah ini.

2.Dalam dalam penulisan post di halaman, silahkan anda pindah dari mode penulisan ke mode tampilan HTML seperti contoh gambar dibawah ini.

3.Silahkan anda copy dan paste kode berikut ini.

<style type="text/css">
.contact-form {
width: 600px;
max-width:100%;
margin-left:auto;
margin-right:auto;
padding: 0;
color: #000;
}
.contactf-name {
float: left;
width: 45%;
}
.contactf-email {
float: right;
width: 45%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
padding: 20px 15px;
margin: 20px 0 30px 0;
}
.contact-form-button, .contact-form-button-submit {
width: 20%;
max-width: 20%;
height: 40px;
color: #fff;
background: #128C7E;
font-size: 0.875em;
border-radius: 5px;
}
.contact-form-button-submit {
-webkit-transition: background-color 100ms ease-out 100ms;
-moz-transition: background-color 100ms ease-out 100ms;
-o-transition: background-color 100ms ease-out 100ms;
transition: background-color 100ms ease-out 100ms;
}
.contact-form-button-submit:hover {
background: #2DB3A4;
}
</style>
<script>
var blogId = 'nomor-ID-blog';//1234567891011121315
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak terkirim, coba beberapa saat lagi.';
var  contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="contactf-email">
Email: <em>(harus diisi)</em><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;"></div>
<div class="contactf-message">
Pesan: <em>(harus diisi)</em><br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;"></textarea></div>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

4.Perhatikan teks berwarna merah pada kode yang sudah saya berikan diatas, silahkan anda ganti teks merah tersebut dengan ID blog anda, untuk cara mengetahui ID blog silahkan klik disini.

5.Berikutnya silahkan anda klik publikasikan.

Demikianlah cara membuat sendiri formulir kontak pada halaman blog, semoga bermanfaat.

Baca Juga