Cara Mudah Buat Kontak Form Dengan Formidable

Cara Mudah Buat Kontak Form Dengan Formidable

Sesuai dengan motonya beautiful form in 60 seconds, menjadikan pembuatan halaman kontak menjadi lebih/sangat mudah. Teman-teman dapat menggunakan template form atau mendesain form sendiri. Tidak itu saja, Formidable juga menyediakan fitur tambahan Google reCHAPTCHA dan mendukung Askimet untuk mengontrol aktifitas SPAM. 

Tutorial cara mudah buat kontak form dengan Formidable akan menjelaskan cara mendesain form sendiri dengan aktifitas drag n drop dan mengedit CSS secara live.

Konfigurasi Global

Silahkan install dan aktifkan plugin Formidable, setelah itu, carilah menu Formidable klik global settings. Pada styling & scripts, load Formidable styling, pilih only on applicable pages jika Formidable hanya untuk halaman kontak saja, tapi jika akan menggunakan Formidable pada beberapa halaman, pilihlah on every page of your site. Centang juga use HTML5 in forms.

Konfigurasi Formidable 1Gambar 1

Pada user permission, pilih administrator untuk semua opsi jika blog hanya dikelola oleh satu orang saja, tapi, jika dikelola oleh lebih dari satu orang, silahkan diatur permission tersebut untuk editor, author atau lainnya.

Konfigurasi Formidable 2Gambar 2

Untuk dapat menggunakan reCAPTCHA, silahkan klik tautan free reCAPTCHA Key untuk mendapatkan site key dan private key. Selanjutnya, pada halaman reCAPTCHA, klik get reCAPTCHA, loginlah menggunakan akun Google, klik kembali get reCAPTCHA. Pada register new site, tuliskan nama untuk label, misalnya igdarmawan.info: Personal Blog, untuk domains tuliskan nama domain dari website dan untuk owners tuliskan alamat email Google yang digunakan, klik register.

Konfigurasi Formidable 3Gambar 3

Setelah selesai, silahkan cek reCAPTCHA yang sudah di buat dan klik key. Teman-teman akan melihat site key dan private key, salinlah kedua key itu.

Konfigurasi Formidable 4

Konfigurasi Formidable 5Gambar 4

Pastikan saat menyalin kedua key penempatannya sudah benar, site key ke form site key Formidable, begitu juga dengan private key ke form private key Formidable, sedangkan untuk bahasa reCAPTCHA, teman-teman bebas menggunakan bahasa Indonesia atau English.

Konfigurasi Formidable 6Gambar 5

Untuk default messages, teman-teman bebas mengeditnya atau menerjemahkannya ke dalam bahasa Indonesia, klik update options untuk menyimpan semua konfigurasi.

Konfigurasi Formidable 7Gambar 6

Edit CSS Secara Live

Selanjutnya, pada menu Formidable pilih styles, disinilah teman-teman mengedit CSS secara live. Pada tab edit styles terdapat banyak konfigurasi CSS (sebelah kiri) dan CSS live preview (sebelah kanan). Untuk konfigurasi CSS terdapat beberapa option, yaitu; general, filed labels, field description, field colors, field settings, check box/radio filed, section field, data field, buttons, form massages DLL.

Silahkan teman-teman bermain-main dengan option tersebut, bereksperimenlah, buatlah style dari kontak form cocok dengan tema website, misalnya ukuran font atau warna font DLL, jika sudah selesai, klik save style. AYO Baca Juga “5 Plugin Utama Untuk WordPress Anda”

Pembuatan Kontak Form

Selanjutnya, pada menu Formidable pilih forms, disinilah proses pembuatan kontak form akan terjadi. Klik add new dan tuliskan nama form, teman-teman dapat menggunakan template untuk membuat kontak form dengan mengklik load template dan menata sendiri layout kontak form dengan melakukan drag n drop.

Konfigurasi Formidable 8Gambar 7

Untuk menata sendiri layout kontak form, silahkan drag label single line text di sebelah kanan kontak form, kemudian drop pada halaman kontak form yang kosong. Ganti kata-kata single line text menjadi misalnya name, perhatikan tanda panah kebawah di sebelah kanan kontak form, kliklah tanda panah tersebut dan akan muncul informasi lengkap dari field optional.

Centang required untuk menampilkan bahwa label name harus di isi, untuk indicate required field with gunakan karakter seperti ini *, untuk field key, CSS layout classes, label position biarkan saja kosong dan untuk field size, silahkan diatur sendiri berapa pixel untuk ukurannya (sesuaikan dengan theme), misalnya 262 pixel, sedangkan untuk characters maximum, slahkan diatur juga berapa maksimal karakter untuk label form name tersebut, misalnya 50 karakter dan untuk validation, ini dimaksudkan untuk informasi jika kontak form pada label name tidak di isi, maka akan muncul pesan warning, misalnya label name harus diisi/tidak boleh kosong.

Konfigurasi Formidable 9Gambar 8

Selanjutnya, untuk label email, silahkan drag n drop email address, untuk label website, silahkan drag n drop website/url, untuk label subject, silahkan drag n drop single line text, untuk label message, silahkan drag n drop paragraf line dan untuk reCAPTCHA, silahkan drag n drop reCAPTCHA. Label email, website, subject dan message, proses field optional hampir sama dengan label name.

Bermain-mainlah dengan konfigurasi ini sampai teman-teman menemukan komposisi dan tata layout yang tepat, sehingga halaman kontak form cocok dengan theme. Jangan lupa klik create untuk menyimpan kontak form yang sudah dibuat.

Konfigurasi Formidable 10Gambar 9

Setelah disimpan, selanjutnya klik tab settings, untuk general dan customize HTML tidak perlu di edit dan untuk form actions, silahkan teman-teman memodifikasi form ini sesuai dengan kebutuhan blog, perhatikan tanda panah kebawah di sebelah kanan, kliklah tanda panah tersebut, kemudian editlah nama label misalnya email, untuk to tidak perlu di edit, teman-teman dapat menambahkan CC atau BCC ataupun reply to jika meneruskan email ke alamat email yang lain.

Untuk from, silahkan klik email, untuk subject, silahkan klik name (lihat menu customization di sebelah kanan) dan untuk message tidak perlu di edit.

Silahkan centang append IP address, browser and referring URL to message jika ingin mengetahui lebih lengkap informasi pengisi kontak form dan untuk send emails in plain text maksudnya email akan terkirim tidak berformat HTML, hanya teks biasa, klik update untuk menyimpan semua konfigurasi.

Konfigurasi Formidable 11Gambar 10

Informasi Email

Pada menu Formidable pilih entries, disini, teman-teman akan melihat informasi email dari semua pengisi kontak form, mulai dari name, email, subject, messages dan entry creation date. Informasi tersebut juga terkirim ke alamat email pengelola website.

Konfigurasi Formidable 12Gambar 11

Demikian panduan cara mudah buat kontak form dengan Formidable, hasil dari plugin Formidable dapat teman-teman lihat pada halaman contact.

MAU bertanya dan berbagi pengalaman tentang artikel ini, AYO berikan komentarnya, tapi, baca dulu Term Of Service pada poin 3 dan 4 sebelum menuliskan komentar.

Leave a Reply

4 Comments On "Cara Mudah Buat Kontak Form Dengan Formidable"

avatar
Ridha
Guest
Ridha

Master, pakai plugin apa ini? Terima Kasih.

wpDiscuz
Close
error: