hakcipta terpelihara irfan khairi sdn bhd - openedu.com.my · bawah your name, anda cuma perlu ......

P a g e | 1

Hakcipta Terpelihara Irfan Khairi Sdn Bhd

P a g e | 2


Panduan Menghasilkan Borang

(Contact Form 7)

Panduan ini akan menunjukkan cara untuk menghasilkan borang pembayaran atau borang

hubungi.

1.Login ke dashboard Wp-Admin anda.

Contoh: www.ikwebhosting.com/wp-admin

Jika anda lupa password, klik pada Lost your password?

2. Gerakkan cursor (mouse) pada Plugins dan klik pada Add New.

http://www.ikwebhosting.com/wp-admin

P a g e | 3


3. Taip perkataan Contact Form 7 dalam kotak carian.

4. Klik pada Install Now.

P a g e | 4


5. Kemudian klik Activate.

Proses install Plugin sudah pun selesai dijalankan =)

6. Seterusnya gerakkan cursor (mouse) pada Contact dan klik pada Add New.

P a g e | 5


7. Namakan borang anda di bahagian Title.

Contoh: Borang Pembayaran.

8. Kemudian anda akan lihat bahagian FORM seperti ini:

P a g e | 6


Jika anda lihat gambar di atas, hasil FORM tersebut akan jadi seperti ini:

9. Oleh itu jika anda mahu membuat borang pembayaran, anda perlu menambahkan lagi

beberapa option seperti alamat, pilihan produk, dan lain-lain lagi.

Untuk contoh kali ini kita akan lakukan penambahan ruangan ‘Pilihan produk’. Kita akan

letakkan ruangan Pilihan Produk tersebut di bahagian sebelum butang ‘Send’. Oleh itu, anda

perlu membuat jarak dibahagian sebelum butang ‘Send’ seperti gambar di bawah:

P a g e | 7


Ianya terpulang pada anda untuk letak dimana-mana bahagian. Jika mahu letak di bahagian

bawah ‘Your Name’, anda cuma perlu membuat ruangan kosong sahaja seperti yang

ditunjukkan di atas.

Seterusnya klik pada drop-down menu.

Paparan seperti ini akan muncul.

P a g e | 8


Anda perlu mengisi ruang di bahagian Options seperti gambar di bawah:

Jika sudah selesai, klik pada Insert Tag.

P a g e | 9


Satu code khas akan muncul di ruangan kosong yang telah anda hasilkan sebentar tadi.

Kemudian, di atas code tersebut, anda boleh tambah ayat seperti ‘Pilihan Produk’ atau apa-apa

sahaja pilihan anda.

Jika anda buat menu untuk Pilihan Produk, anda perlu letak seperti ini:

<label>Pilihan Produk

Jangan lupa untuk letakkan juga </label> di hujung code tadi. Sebagai contoh boleh rujuk

seperti gambar di bawah:

Selesai.

P a g e | 10


10. Untuk contoh kali ini kita akan lakukan penambahan ruangan ‘Alamat’ pula. Kita akan

letakkan ruangan Alamat di bahagian selepas ‘Your Email’. Oleh itu, anda perlu membuat jarak

dibahagian selepas ‘Your Email’ seperti gambar di bawah:

Seterusnya klik pada text.

P a g e | 11


Paparan seperti ini akan muncul:

Kemudian klik pada Insert Tag.

P a g e | 12


Satu code khas akan muncul di ruangan kosong yang telah anda hasilkan sebentar tadi.

Kemudian, di atas code tersebut, anda boleh tambah ayat seperti ‘Alamat’ atau apa-apa sahaja

pilihan anda. Jika anda buat ruangan untuk alamat, maka anda boleh letakkan seperti ini:

<label>Alamat

Jangan lupa untuk letakkan juga </label> di hujung code tadi. Sebagai contoh boleh rujuk

seperti gambar di bawah:

Selesai.

Anda boleh menambah beberapa lagi jenis ruangan ke dalam form. Ulang sahaja langkah 9

atau langkah 10 untuk memilih jenis ruangan yang lain.

P a g e | 13


11. Jika anda sudah selesai memasukkan kesemua ruangan tambahan yang anda inginkan, klik

pada Save.

12. Kemudian klik pada Mail.

P a g e | 14


13. Satu perkara yang paling penting sekali adalah di bahagian TO. Pastikan anda mengisi

alamat email anda yang aktif. Ini kerana, borang yang telah diisi oleh pelanggan, akan dihantar

ke dalam email yang telah anda isikan di ruangan ini.

P a g e | 15


14. Di bahagian Message Body, anda perlu copy code [menu-627] dan [text-60] ke dalam

ruangan Message Body.

*Code tersebut mungkin berlainan mengikut jenis menu yang anda pilih sebelum ini. Sila

abaikan 4 code pertama yang tertera iaitu [your-name][your-email][your-subject] dan [your-

message].

Jika sebelum ini anda ada membuat penambahan sebanyak 3 ruangan, maka akan ada 3 code

tambahan yang muncul di situ dan anda perlu copy ketiga-tiga code baru tersebut ke dalam

ruangan Message Body.

Jika semuanya sudah selesai, klik SAVE.

P a g e | 16


15. Setelah klik Save, page tersebut akan di ‘refresh’ secara automatik. Kemudian anda akan

lihat code baru akan keluar di bawah tajuk form yang telah anda hasilkan tadi. Seperti contoh di

bawah:

Anda perlu copy code tersebut.

16. Kemudian gerakkan cursor (mouse) pada Pages dan klik All pages.

P a g e | 17


17. Pilih page yang anda ingin masukkan borang ke dalamnya. Untuk contoh ini, kita akan

memilih page Homepage.

Klik Edit with Elementor.

18. Apa yang perlu anda lakukan seterusnya adalah ‘paste’kan code yang telah anda copy di

langkah 15. Anda perlu letakkan code tersebut pada ruangan yang anda mahu borang tersebut

muncul.

Klik pada Add new section.

19. Kemudian pilih satu structure.

P a g e | 18


20. Anda perlu drag text ke dalam section yang telah anda hasilkan.

21. Kemudian klik pada Text.

P a g e | 19


22. ‘Paste’kan code yang telah anda copy di langkah 15.

23. Jika sudah selesai, klik update.

P a g e | 20


24. Anda boleh masuk ke website dan lihat hasilnya. Gambar di bawah ini adalah hasil yang

telah kita lakukan sebentar tadi.

25. Anda juga boleh edit semula borang yang telah anda hasilkan. Caranya adalah klik pada

contact dan klik Edit.

P a g e | 21


Semoga sukses selalu

hakcipta terpelihara irfan khairi sdn bhd - openedu.com.my · bawah your name, anda cuma perlu ......

Documents