Blogger memiliki gadget formulir kontak yang terintegrasi secara langsung. Untuk memasangnya pada template sangat mudah dilakukan. Sehingga bisa mengurangi beban teknis bagi kita yang memiliki keterbatasan memahami kode HTML, CSS dan JavaScript.
Namun sayangnya, formulir kontak default ini dirancang dengan antarmuka yang sangat sederhana. Selain itu, kemudahan tersebut hanya berlaku jika kita memasang formulir kontak di sidebar atau bottombar. Berbeda halnya jika kita menginginkan agar formulir kontak terpasang pada halaman.
Meskipun juga tidak bisa dikatakan sangat sulit memasangnya pada page atau halaman khusus. Formulir kontak yang merupakan sebuah gadget ini perlu cara khusus agar bisa berfungsi jika kita memasangnya pada halaman khusus.
Dan pada praktikum kali ini kita akan mencoba membuat sebuah page "Hubungi Kami". Dimana didalamnya kita coba mengkustom dengan fitur "Formulir Kontak". Sehingga ketika ada seseorang yang menggunakannya. Pesan akan terkirim masuk melalui email yang terintegrasi dengan Blogger.
Cara Membuat Halaman Contact Us di Blogger
Halaman "Kontak Kami" merupakan bagian penting dalam sebuah website. Halaman ini bisa menjadi penghubung antara pengunjung dengan pemilik blog. Karena pengunjung dapat mengajukan permintaan bantuan melalui halaman tersebut.
Lalu bagaimana cara memasangnya jika kita menggunakan Blogger? Jawaban untuk pertanyaan tersebut bisa melalui beragam metode. Ada yang menggunakan cara mudah melalui script pihak ketiga. Ada juga yang mengunakan script HTML sendiri yang dihubungkan dengan ID Blog.
Dan cara ketiga melalui formulir kontak bawaan Blogger seperti yang akan dijelaskan sebagai berikut:
1. Login ke dashboard Blogger.
2. Pilih salah satu blog yang akan disetting.
3. Klik "Tata Letak" pilih "Tambahkan Gadget" pada bagian manapun. Mengapa dikatakan demikian? Karena kita hanya ingin mengambil fungsinya saja. Sedangkan formulir kontak yang terlihat sebagai gadget justru nanti akan kita hilangkan melalui properti CSS; yakni display: none;.
4. Pilih "Formulir Kontak".
5. Klik "Simpan".
6. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML". Kemudian paste kode berikut sebelum ]]></b:skin>.
7. Klik "Save" untuk menyimpan perubahan template.
8. Klik "Halaman" dan buat halaman baru dengan memberi judul "Hubungi Kami" atau "Contact Us".
9. Klik mode "Tampilan HTML" dan paste di sana semua kode di bawah ini (Dan untuk kalimat pembukanya silahkan modifikasi sendiri):
<p>Dengan senang hati, Kami akan menerima masukan dari Anda. Apakah terkait saran dan masukan demi perbaikan konten yang ada di Sebardi Blog. Maupun tentang informasi tautan yang rusak, kadaluarsa atau tidak bisa diakses dari perangkat yang digunakan oleh pengguna.</p><p>Apabila formulir kontak di bawah tidak bisa berfungsi sebagaimana mestinya. Kritik dan saran juga bisa langsung dikirimkan melalui email ke sebardiblog@gmail.com.</p><p>Sekali lagi perlu ditegaskan bahwa Kami senang mendengar dari Anda. Jadi jangan ragu untuk menghubungi kami melalui formulir di bawah ini.</p><p><span style="text-align: center;">Terima kasih atas perhatiannya </span></p><p><span style="text-align: center;">Salam dari Indonesia.</span></p>
<div style="color: green; text-align: center;"><br /></div>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p>
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" 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" type="button" value="Send" />
<p></p>
<div style="max-width: 222px; 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>
</div>
10. Klik "Publikasikan".
11. Halaman kontak kami akan terlihat seperti screenshot di bawah ini:
12. Coba mengisi pesan dengan memasukan nama, email serta keterangan kemudian klik "Send".
13. Jika berhasil nanti ada pesan masuk dari formulir kontak melalui email.
14. Hasil yang terlihat bisa lihat melalui link demo di bawah ini.
Penutup
Formulir kontak yang merupakan gadget bawaan Blogger ini telah menyediakan perlindungan spam. Fitur ini dapat membantu mengurangi jumlah pesan spam yang diterima melalui formulir. Sehingga kelebihan yang dimiliki ini akan mempermudah dalam pengelolaan pesan yang masuk.
Namun demikian meskipun formulir kontak bawaan Blogger memiliki beberapa kelebihan. Tetap perlu diperhatikan bahwa fungsi dan fitur formulir ini sangat mungkin memiliki keterbatasan. Apalagi jika dibandingkan dengan formulir kontak khusus yang disediakan oleh layanan pihak ketiga.
Dan jika Anda memiliki kebutuhan yang lebih kompleks atau menginginkan kontrol lebih besar atas formulir kontak. Sangat disarankan agar mempertimbangkan penggunaan formulir kontak eksternal yang dapat diintegrasikan dengan Blogger.
Adapun saya pribadi, penggunaan formulir kontak gratisan masih mencukupi.
Sekian pembahasan kali ini tentang cara custom gadget contact us Blogger.
Semoga bermanfaat.
Work gan. Terima kasih. Semangat.
BalasHapussama-sama mas, semoga bermanfaat
Hapus