Kontak Form Blogspot

Membuat Form Kontak di Platform Blogspot Dengan Memanfaatkan Free Online Form Generator

Jika artikel yang lalu sedikit mengulas tentang 'Cara membuat form kontak menggunakan google docs', kali ini saya ingin sharing trik yang tidak jauh beda dengan artikel sebelumnya. Bedanya trik yang satu ini kelihatan lebih original sehingga jika dilihat sekilas mirip dengan form kontak yang dipakai oleh kebanyakan situs web pada umumnya.

OK langsung saja mulai, langkah-langkah yang perlu anda lakukan adalah:

1. Daftar dulu di situs ini. Gratis
2. Setelah daftar dan verifikasi email, masuk ke halaman member area. Pada panel tab sebelah kanan klik 'Create a new form'. Berikut text field yang wajib anda isi:
   
   • Web form Name: Isikan dengan nama form anda. Nama yang anda isikan akan muncul sebagai nama pengirim di kotak masuk email ketika emailmeform mengirimkan alert (pemberitahuan) bahwa ada seseorang yang mengirimkan email via form kontak anda.
   • Recipients Emails: Isikan dengan alamat email anda. Pesan yang ditulis oleh visitor melalui form kontak akan di forward ke alamat email anda.
   • Spam Email address: Optional. Alamat email untuk spam.
   • Thank you page: Isikan dengan alamat url redirect ketika tombol kirim form kontak diklik. Sebelumnya buat dahulu Halaman terima kasih ini, pada 'blogger dashboard' → 'Entry Baru' → tuliskan konten/isi halaman terima kasih anda.
     
     Contoh: 'Terima kasih telah menghubungi saya. Pesan anda akan saya balas secepatnya'. Klik terbitkan entry → Lihat blog → copy alamat url dari halaman blog yang baru saja anda buat kemudian pastekan pada text field 'Thank you page' emailmeform.
   • Number of fields: Isikan berapa jumlah text field yang ingin anda buat. Default 4, Kemudian klik next.
   
   
3. Pada halaman 'Web Form Creation Wizard - Step 2 of 7', jika blog anda berbahasa Indonesia ganti 'Your Name' dengan 'Nama' misalnya, 'Your Email Address' ganti dengan 'Alamat email', 'Subject' dengan 'Subjek', 'Message' dengan 'Pesan'.
   
   • Pada kolom 'Text Effects' sesuaikan dengan selera anda apakah teks mau dibuat tebal atau normal.
   • Kolom 'Field Type' biarkan saja setting default.
   • Kolom 'Required?' sesuaikan dengan keinginan anda. Masing-masing kotak isian dapat diatur dengan 'Yes' (Wajib diisi) dan 'No' (Tidak Wajib/optional). Kemudian klik next.
   
   
4. Pada halaman 'Web Form Creation Wizard - Step 3 of 7' pada kolom 'Size and Details' sesuaikan column (Cols) setiap field form kontak anda. Semakin banyak jumlah angka yang anda masukkan semakin lebar pula kotak isian form kontak. Untuk kotak isian Pesan (message) jumlah baris (Rows) isi sesuai dengan selera anda. Semakin banyak jumlahnya, akan semakin panjang ke bawah kotak isian kontak form pada bagian message (pesan). Klik next.
5. Pada halaman 'Web Form Creation Wizard - Step 4 of 7', 'font', 'color' isikan sesuai dengan selera.
   
   • 'Form Description', 'Header', 'Footer', 'Style CSS' biarkan saja kosong, Jika menguasai HTML dan CSS silahkan dimodifikasi jika anda berkenan.
   • 'Send Button Name' ganti text 'Send email' dengan 'Kirim email'.
   • 'Send Button alignment' sesuaikan posisinya menurut selera anda, ada tiga pilihan; 'Left' (kiri), 'Middle' (tengah), dan 'Right' (kanan).
   • 'Include a Clear button' centang check box 'yes' ganti nama 'Clear' dengan nama pilihan anda, misalnya ganti dengan 'Reset'.
   • 'Anti Spam' jika fitur ini ingin anda pasang check 'Show Image with Letters and Numbers', jika tidak klik 'None'. Anti spam ini jika di aktifkan maka visitor yang akan mengirimkan email kepada anda wajib mengetik code verikasi pada kotak isian anti spam.
   • 'Image Verification' atur properti dari tampilan 'Anti Spam'.
   • 'Display Mode' biarkan saja defaultnya. Klik next.
   
   
6. Pada halaman 'Web Form Creation Wizard - Step 5 of 7' sesuaikan properties pesan anda, atau biarkan saja pakai setting default. Klik next.
7. Pada halaman 'Web Form Creation Wizard - Step 6 of 7' adalah preview dari form kontak yang baru saja anda buat. Jika sudah sesuai dengan yang anda inginkan klik Finish, jika masih memerlukan penyesuaian klik Back.
8. Pada halaman terakhir 'Web Form Creation Wizard' klik pada 'Get the HTML Code'. Simpan code tersebut di notepad, yang nanti akan di pasang pada blog anda.

OK. Sekarang tinggal membuat code CSS untuk mengatur penempatan form kontak yang baru saja anda buat. Pada blogger dashboard masuk ke bagian 'LayOut' → klik pada 'Edit HTML' → Cari code berkut ']]></b:skin>' tanpa tanda quote. Tuliskan code CSS berikut di atas code ']]></b:skin>':

[css collapse="false"]
.formkontak {
width:415px;
height:auto;
margin:0px;
}
[/css]

Sesuaikan lebar (width) dengan setting anda. Semakin banyak angkanya semakin lebar. Selanjutnya buat posting baru untuk halaman kontak. Pada halaman posting, navigasikan ke 'Edit HTML', misalnya anda akan menuliskan:

[html collapse="false"]
<p>Anda dapat menghubungi saya dengan menggunakan kontak form di bawah ini</p>
<div class="formkontak">pastekan code HTML dari emailmeform dibagian ini</div>
[/html]

Selesai. Klik 'Terbitkan Entry'. Test form kontak yang baru saja anda buat, login ke alamat email yang anda gunakan untuk mengisi pada kotak isian 'Recipient email'. Lihat apakah pesan yang baru anda tulis sudah masuk. Untuk yang hosting sendiri (self hosting blog/web) tahap pembuatannya sama.

Contohnya dapat anda lihat di halaman email me