Cara Membuat Kontak Form di Wordpress

By
cara membuat kontak form di wordpress

Jika membuat kontak form di wordpress.com sudah tersedia di dashboard wordpress, sedangkan untuk wordpress.org kontak form dapat dibuat meggunakan beberapa plugin kontak form builder. Beberapa plugin kontak form builder populer yang biasa digunakan untuk membuat kontak form antara lain contact form 7, Fast Secure Contact Form, Ninja Form dan lain-lain.

Kontak form sangat penting khususnya bagi yang sering melakukan interaksi tidak langsung dengan pengunjung website, melalui proses kirim dan menerima email melalui kontak form, contohnya pemilik toko online atau usaha dan jasa lainya.

Kali ini tutorial singkat mengenai cara membuat kontak form di Wordpress yaitu dengan menggunakan plugin Fast Secure Contact Form. Karena plugin ini mudah digunakan, responsive, bisa di customize serta dilengkapi dengan captcha. Sedangkan Contact Form 7 walaupun sebagai plugin kontak form paling populer di wordpress namun biasanya harus menginstall plugin-plugin tambahan baik untuk menambahkan captcha dan memperbaiki tampilanya.

Sebelum membuat contact form di wordpress pertama siapkan dua email aktif, karena akan diperlukan dan akan dijelaskan di bawah.

Berikut cara membuat kontak form di wordpress.org menggunakan plugin Fast Secure Contact Form

Gambar di bawah adalah hasil final kontak form yang akan dibuat

tampilan fast secure contact form

Dan cara membuatnya adalah :

Pertama, install plugin melalui dashboard >> plugin >> add new dan cari Fast Secure Contact Form lalu klik install dan activated. Atau jika sudah mendownload dari wordpress install ke dalam folder wp-content >> plugin

Kedua, setelah di install lalu aktifkan, pada dashboard >> plugin akan ada menu baru FS Contact Form.

plugin fast secure contact form

Klik FS Contact Form lalu Add new form. Pengaturan yang perlu dilakukan antara lain :

Basic Setting


Form 1 Label : isi nama form (terserah dan mudah diingat)
Welcome Introduction : isi dengan kata pembuka misalnya untuk contoh gambar di atas welcome introductionya adalah "Silahkan lengkapi data berikut"

basic setting fs contact form

Email Setting

Email To : Isi dengan tujuan email ketika seseorang mengisi kontak form
Email Subject Prefix : Judul dari isi email
Return-path address (recommended) : Isi dengan email yang kedua, berbeda dengan email to

email setting fs contact form

Selanjutnya klik save changes. Dan lannjut setting pada tab kedua Fields.

Fields


Pada bagian ini akan terdapat 3 fields yang secara default sudah dibuat, yaitu name, message, subjek dan email. Jika form untuk dikirimkan ke email jangan hapus atau disabled field email, karena biasanay form tidak akan mengirim email.
Jika ingin manambahkan field baru klik add new field, dan isi
Label : Untuk keterangan dari field tersebut (ex : nama)
Field Type : Memilih tipe dari field tersebut
Required field : Centang jika field wajib diisi
Field modifiers: Default : Text default yang akan terisi di field (ex : emailanda@email.com)
Default as placeholder : Centang jika ingin text default di atas akan ditampilkan
Field modifiers: Select Option : Jika Field Type yang dipilih adalah select, maka isikan di bagian ini apa saja pilihannya
field setting fs contact form

Untuk bagian lainya opsional bisa diisi sesuai dengan kebutuhan. Dan jangan lupa klik save changes jika sudah selesai.

Style 


Enable a fieldset box around the form : Centang jika ingin menampilkan kotak dan border di sekitar form (lihat gambar di bawah)
Fieldset box label : Isi dengan label untuk berada di antara border di atas
Select the method of delivering the form style: Pilih jika ingin mengedit css apakah melalui external yaitu style.css atau secara default melalui tempat yang sudah disediakan dibawah style setting.

Label


Di bagian label ini untuk mengganti label, jika wordpress di install belum menggunakan bahasa Indonesia maka pada bagian ini kita dapat mengganti label sesuai dengan kata yang diinginkan.
label setting fs contact form

Security


Pada bagian ini kita dapat mengatur apakah akan menggunakan captcha atau tidak

Advanced


Di advanced setting isi
Confirmation email "From" name :  tampilan nama pengirim email ketika customer menerima email konfirmasi.

Sebelum mengisi Confirmation email address perhatikan pada langkah email setting di atas. Seperti contoh di gambar Email To : diisi dengan email yang berakhiran @gmail dan Return-path address (recommended) : diisi dengan nama email yang berawal info.

Confirmation email "From" address dan Confirmation email "Reply To" address : Isi dengan email yang sama dengan Return-path address (recommended) 

Pada bagian confirmation email message isi dengan kalimat yang akan kita kirimkan ketika mengirim email konfirmasi

Selanjutnya di bagian redirect setting, 
Enable redirect after the message sends : centang jika ingin mengarahkan seseorang ke halaman tertentu ketika selesai mengisi form.
Redirect delay in seconds : lamanya waktu seseorang menuggu sebelum di redirect ke halaman tertentu.
Redirect URL : Tujuan halaman yang akan diredirect

redirect advanced setting fs contact form

Tools


Jika semua setting di atas sudah disimpan, untuk melihat apakah kontak form ini bekerja, selanjutnya kita dapat mengirimkan test email melalui tab Tools ini, cukup masukkan email kita klik Send Test. Jika di cek di email ada email dari fast secure contact form maka kontak fomr sudah bersail dan siap di pasang di halaman, posting atau widget.

Untuk memasang Fast Secure Contact Form lihat pada basic setting terdapat shortcode. Jika yang dibuat adalah form pertama, maka shortcode nya adalah [si-contact-form form='1']
Cukup copy dan paste shortcode tersebut di halaman atau posting tempat kita ingin memasang kontak form.

Itu saja settingan standar yang perlu dilakukan untuk plugin fast secure contact form, masih banyak settingan lainya jika ingin dicoba dan melihat bagaimana hasilnya.

Demikian cara memasang atau membuat kontak form di wordpress menggunakan plugin fast secure contact form. Semoga membantu, dan jangan lupa untuk klik sharing dan follow kami untuk mendapatkan update terbaru setiap harinya.

2 comments:

  1. Halo, saya sudah setting semua tapi kenapa ya gak ada email masuk? padahal sudah test

    ReplyDelete
  2. bagus gan . . .
    sangat membantu . . .

    ReplyDelete

Terbaru