Pasang plugin Contact Form WP

Oct 04, 2011 by Ayah Jayvyn in Belajar Web | Tags: belajar, blog, cara membuat, cara membuat blog, membuat blog, membuat web, myjayvyn, plugin, wordpress

Dari sekian banyak plugin contact form.. plugin Formidable ini layak diacungi dua jempol, selain menggunakan script Ajax, aman karena mengusung Recaptcha dan Akismet, juga mudah untuk dimodifikasi.

Lihat contoh contact form menggunakan plugin Formidable dibawah ini:

————————————————————————————————————————-

[formidable id=11]

————————————————————————————————————————-

Cara buatnya gimana??

1. Silakan login ke wordpressnya masing2, www.namadomain.com/wp-admin

2. Pada bagian sebelah Dashboard disebelah kiri, cari Plugins, klik Add New

3. Tuliskan formidable forms dikotak pencarian , lalu klik tombol Search Plugins

4. Akan muncul deretan plugin hasil dari proses pencarian tadi. Klik Install Now pada plugin Formidable forms

5. Klik OK

6. Klik Activate Plugin

Selesai aktifasi plugin, akan muncul menu baru dijajaran dashboard judulnya Formidable.

7. Kita klik Setting dulu ya

8. Lalu yg perlu diisi disini adalah public key dan private key recaptcha.

Catatan! Jika belum memiliki informasi key tersebut, lakukan 2 hal berikut:

Lakukan registrasi, caranya klik link dibawah ini
http://myjayvyn.com/2011/register-di-google-recaptcha

Install plugin wp-reCAPTCHA, caranya klik link dibawah ini
http://myjayvyn.com/2011/memasang-plugin-wp-recaptcha/

9. Untuk setting yang lainnya biarkan saja, ga perlu dirubah. Langsung saja klik update options

Selesai dengan setting, lanjut dengan belajar cara membuat formnya.

10. Klik Form

11. Klik Add New

12. Pilih yang Blank Form, klik Create

13. Tuliskan Judul Form dan kata-kata pendahuluannya. Misal judul form Kontak Kami dan kata pendahuluannya Ingin mengetahui bisnis Kami lebih detail? Silakan isi form berikut ini

Untuk membuat kolom dengan ukuran 1 baris seperti kolom nama, email dan subject gunakan Single Line Text.

14. Cara menambahkan kolom Nama pada form.

Klik Single Line Text satu kali.

Pada kotak layout akan muncul kolom single line text seperti gambar dibawah ini. Ganti label Untitled dengan tulisan Nama.

Klik Field Options

Lengkapi setting kolom Nama seperti pada contoh gambar dibawah

Penambahan kolom nama selesai. Tambahkan kolom lainnya seperti email dan subject kedalam form, lakukan cara yang sama seperti diatas (step 14).

Menambahkan kolom pilihan pada form seperti kolom jenis kelamin, gunakan Radio Buttons

15. Cara menambahkan kolom Jenis Kelamin pada form

Klik Radio Buttons satu kali.

Pada kotak layout akan muncul kolom Radio Buttons seperti gambar dibawah ini. Ganti label Untitled dengan tulisan Jenis Kelamin. Ganti label Option 1, 2 dan seterusnya dengan opsi yang diinginkan. Untuk menambah opsi, klik +Add an Option

Setelah diganti hasilnya akan seperti gambar dibawah ini.

Menambahkan kolom checklist pada form seperti kolom Hobby, gunakan Checkboxes

16. Cara menambahkan kolom Hobby pada form

Klik Checkboxes satu kali.

Pada kotak layout akan muncul kolom Checkboxes seperti gambar dibawah ini. Ganti label Untitled dengan tulisan Hobby. Ganti label Option 1, 2 dan seterusnya dengan opsi yang diinginkan. Untuk menambah opsi, klik +Add an Option

Setelah diganti hasilnya akan seperti gambar dibawah ini.

Menambahkan kolom dropdown pada form seperti kolom Darimana Anda mendengar tentang website Kami, gunakan Dropdown

17. Cara menambahkan kolom Darimana Anda mendengar tentang website Kami pada form

Klik Dropdown satu kali.

Pada kotak layout akan muncul kolom Dropdown seperti gambar dibawah ini. Ganti label Untitled dengan tulisan Darimana Anda mendengar tentang website Kami. Ganti label Option 1, 2 dan seterusnya dengan opsi yang diinginkan. Untuk menambah opsi, klik +Add an Option

Setelah diganti hasilnya akan seperti gambar dibawah ini.

Menambahkan kolom pesan atau message. Berhubung kolom pesan biasanya panjang dan membutuhkan baris lebih dari satu maka kita gunakan Paragraph Text.

18. Cara menambahkan kolom Message pada form

Klik Paragraph Text satu kali.

Pada kotak layout akan muncul kolom paragraph text seperti gambar dibawah ini. Ganti label Untitled dengan tulisan Message.

Andapun bisa menentukan banyaknya baris sesuai keinginan (defaultnya 5 baris). Setelah diganti hasilnya akan seperti gambar dibawah ini.

19. Dan terakhir adalah menambahkan fitur pengaman untuk form.

Klik reCAPTCHA

Maka pada kotak layout akan muncul fitur Recaptcha

Selesai sudah tata cara penambahan kolom kedalam layout form. Penambahan kolom jenis apapun lakukan langkah-langkahnya seperti diatas. Dibawah ini ada fungsi-fungsi pada setiap kolom yang mungkin berguna nantinya. Silakan pahami penjelannya pada gambar berikut.

20. Setelah dirasa pas layout formnya, klik Create/Update

Setelah layout jadi, berikutnya lakukan setting form.

21.Klik Settings

22. Pada menu General lengkapi informasinya seperti pada gambar dibawah

23. Klik menu Emails

Email Recipient : isi dengan alamat email Anda yang valid.

24. Klik Update

25. Secara keseluruhan pembuatan form telah selesai. Lakukan pengecekan dengan mengklik Formidable >> Forms dari area dashboard. Maka disitu muncul list dari form yang telah dibuat.

26. Tugas Anda sekarang, menampilkan layout form ini pada sebuah halaman website. Buatlah dulu Page baru, pada area dashboard klik Pages >>Add New

27. Kasih judul pagenya.. misal Buku Tamu

28. Lihat dibagian Insert/Upload.. dijajaran itu terdapat icon baru. Fungsinya untuk memanggil dan menampilkan form yg telah dibuat ke page. Klik saja icon Add Formidable Form

29. Muncul jendela baru. Pilih form Kontak Kami, lalu klik Insert Form

30. Muncul kode seperti contoh dibawah ini, untuk angkanya tidak selalu sama dengan contoh dibawah.

31. Selanjutnya klik tombol Publish

32. Selesaaiii sudah.. Alhamdulillah..

Sekarang lihat tampilan website Anda, seharusnya ada penambahan page baru dijajaran menu Page yang judulnya Kontak Kami.

Alhamdulillah...
Semoga artikel ini dapat bermanfaat bagi Anda. Terima kasih atas keikhlasannya memberikan donasi berupa komentar melalui salah satu layanan berikut Facebook Like, Facebook Comment, Alexa Review atau Wordpress Comment. Jazakallahu Khair