Blog - BisaBikinWeb

Cara Membuat Form Contact

February 7, 2022February 7, 2022 by adminin UncategorizedLeave a Comment

Dalam sebuah website, kebutuhan form contact cukup penting. Kegunaannya juga beragam, yang paling utama biasanya untuk mengumpulkan contact email dari pengunjung website kita. Ini berguna jika kita ingin melakukan action lebih lanjut, misalnya contact email tsb akan kita jadikan target dalam pengiriman informasi produk atau jasa yang kita tawarkan ke mereka.

Di postingan kali ini, kita akan belajar cara membuat contact form menggunakan plugin yang populer, yaitu Contact Form 7. Untuk contoh kali ini, fungsi dari contact form ini kita tujukan untuk mendapatkan feedback dari pengunjung website ini.

Silahkan kamu install plugin Contact Form 7 melalui menu : Plugins – Add New, lalu lakukan aktivasi dengan klik tombol Activate. Jika sudah, maka akan muncul menu Contact pada panel menu kiri. Langsung saja klik Menu Contact – Add New, maka akan muncul tampilan seperti gambar dibawah ini.

Untuk Contact Form contoh ini, kami memberi nama : Feedback Fom.

Nah, perhatikan di situ ada label, berikut kegunaan dari tiap label tsb :

Your-name : untuk isian nama pengunjung website
Your-email : untuk isian email pengunjung website
Subject : untuk isian judul email
Your message : untuk isian feedback atau pesan yang ingin disampaikan

Kita juga bisa menambahkan beberapa isian baru, misal jenis kelamin, umur dan upload file, yuk kita coba.

Gender : menggunakan tag radio buttons
Age : menggunakan tag number
Photos :menggunakan tag file

Untuk jelasnya, bisa dilihat gambar di bawah ini.

Isian gender menggunakan tag radio buttons , attribute seperti gambar dibawah ini.

Isian Age menggunakan tag number, attribute seperti gambar dibawah ini. Untuk Required field yg dicentang, artinya wajib dipilih. Untuk range artinya hanya bisa diisi dengan angka antara 15 sampai 75. Kamu bebas menentukan sendiri isiannya ya.

Isian Your Photo (file) menggunakan tag file, attribute seperti gambar dibawah ini. Untuk Required field tidak dicentang, artinya tidak wajib diisi. Untuk file size limit (bytes) diisi 1.000.000 bytes artinya maksimal filesize yg diupload adalah 1Mb. Untuk Acceptable file types, diisi jpg, jpeg, gif & png , artinya hanya file dengan tipe-tipe tsb yang bisa diupload, selain itu ditolak.

Hasil dari tambahan isian tsb dapat dilihat pada gambar dibawah ini. Perhatikan kotak warna merah, itu untuk tambahan tab table title di setiap isian yang baru kita buat. Title disesuaikan dengan fungsi dari tiap-tiap isian baru tsb. Khusus untuk isian Your gender ( kotak warna orange ) , karena itu adalah isian multiple, maka tidak menggunakan tab label. Jangan lupa untuk menyimpan Form Contact yang baru saja kita buat ini, dengan klik tombol Save sesuai gambar dibawah.

Sampai sini apakah sudah selesai ? ternyata belum 🙂 Kita masih harus meng-connect-kan form utama yang barusan kita susun ke dalam body email yang akan terkirim ke email kita disaat pengunjung website kita mengisi Form Contact tsb. Caranya dengan masuk ke settingan Mail seperti gambar dibawah ini.

Berikut keterangan dari tiap element pada tab Mail tsb.

To : semua isian pada Contact Form akan terkirim ke isian To, settingan default akan mengambil alamat email dari admin website. Kamu bisa juga mengisinya dengan alamat email yang lain.
Form : akan terisi site title dari website tsb dan akun email default dari wordpress.
Subject : akan terisi dari isian Subject
Additional headers : akan terisi dari isian email pengunjung website
Message Body : akan terisi oleh isian-isian sesuai dengan element Form Contact yang sudah dibuat sebelumnya.

Form Contact baru ini akan tampil pada list Contact Form, klik menu Contact – Contact Forms pada panel menu kiri. Hasilnya seperti gambar di bawah ini. Perhatikan pada kolom Shortcode, ini akan kita siapkan untuk di copy-paste ke page baru saat kita akan menampilkan Feedback Form tsb untuk bisa digunakan pengunjung website.

Kemudian kita akan membuat Page baru untuk disisipkan Form Contact ini. Pilih menu Pages – Add New, beri nama page tsb, misal Feedback Pengunjung. Lalu sisipkan shortcode Feedback Form (Form Contact) yang baru saja kita buat pada page Feedback Pengunjung. Sisipkan shortcode tsb di body page dengan sebelumnya pilih tab Text. Jangan lupa untuk menyimpan dengan klik tombol Publish ( panah orange) dan kita bisa test untuk melihat hasil akhir dari pembuatan Contact Form ini dengan mengakses URL pada Permalink yang ditunjukkan panah hijau Contoh seperti gambar dibawah ini.

Cara Memasang Popup Website

December 24, 2021December 24, 2021 by adminin Plugin, WordpressLeave a Comment

Popup Website adalah jendela kecil yang muncul saat kita mengunjungi sebuah website. Popup ini biasanya digunakan untuk meningkatkan konversi atau kegiatan dari pengunjung yang menguntungkan misal menjadi subscriber, mendownload ebook, mendaftar keanggotaan hingga melakukan pembelian barang atau jasa.

Dibawah ini adalah contoh popup pada website yang seringkali kita jumpai dibanyak website, ini berisi iklan diskon penawaran harga.

Ada cukup banyak plugin wordpress yang menyediakan popup semacam ini antara lain :

Popup Maker
Popup Builder
OptinMonster
Sumo
Popup by Supsystic

Nah di kesempatan ini , kita akan mencoba membuat popup dengan menggunakan salah satu plugin tsb yaitu Popup Maker. Langsung saja kita install plugin tsb, pada menu Plugins – Add New – ketik Popup Maker di isian keyword, akan muncul plugin tsb , lalu klik tombol Install Now dan klik tombol Active untuk melakukan aktivasi plugin Popup Maker tsb. Setelah plugin Popup Maker tsb aktif, maka akan muncul menu Popup Maker pada panel menu kiri, klik Popup Maker lalu akan tampil list sample popup yang sudah tersedia.

Selanjutnya kita akan mulai untuk membuat sample popup, dalam case ini kta membuat popup untuk promosi gratis bikin/setup website untuk kebutuhan client UMKM.

Pertama-tama kita siapkan image banner untuk ditampilan di popup, disini kita bisa menggunakan tools photoshop atau online tools gratis misalnya canva.com .

Setelah image banner siap, kita mulai membuat popup baru dengan cara klik menu Create Popup lalu isi Popup Name & kosongkan saja isian Popup Title, kemudian pada bagian input area, insert image banner yang sudah kita siapkan sebelumnya. Cara insert image banner yaitu dgn klik tombol Add Media – pilih tab Media Library, makan tampilan akan seperti dibawah ini.

Kemudian kita lanjut setting pop tsb pada menu Trigger – Add New Trigger, pilih Time Delay / Auto Open. Lalu centang pada opsi Prevent popup from showing to visitor again using a cookie? Lalu pilih On Popup Close pada opsi Stop showing popup once visitor takes this action, lalu klik tombol Add, contoh seperti gambar dibawah ini.

Kemudian pada setting Time Delay Settings, default isian Delay adalah 500 ms ( setengah detik), biarkan saja, lalu klik tombol Add

Dan tampilan setting Trigger akan mejadi seperti gambar dibawah ini.

Kita lanjutkan setting untuk action mengarahkan ke halaman tertentu saat popup ditutup oleh pengunjung website, untuk contoh, kita akan arahkan ke halaman Homepage (utama). Klik menu Targeting – Choose a Condition – General – HomePage. Kita juga bisa men-setting untuk tidak memunculkan popup pada akses mobile browser dan tablet browser, namun kali ini kita akan biarkan saja sesuai default, seperti yang tampak pada gambar dibawah ini.

Kemudian kita akan setting posisi display dari popup tsb, pilihan posisi ada di tengah, kanan bawah, atas dan kiri bawah. Silahkan disesuaikan dengan kebutuhan, pada umumnya setting display popup ada di posisi tengah halaman web. Pilihan posisi display dapat terlihat pada kotak berwarna merah seperti gambar dibawah ini.

Selanjutnya, kita akan aktifkan popup yang baru saja kita buat, caranya klik menu Popup Maker – All Popups, pada bagian list popup, pastikan Enabled aktif pada popup yang baru saja kita buat, warna opsi Enabled menjadi hijau, contoh seperti gambar dibawah ini.

Sampai disini kita sudah berhasil membuat popup website yang akan muncul di halaman utama saat website kita diakses oleh pengunjung. Kita dapat bereksperiment dengan beragam atribut popup ini, karena cukup banyak setting yang disediakan oleh popup maker plugin ini.

Semoga panduan ini bermanfaat buat teman-teman semua !

Note : jika popup tidak muncul, pastikan Anda cek jika ada plugin cache yang aktif, coba untuk nonaktifkan dulu.

WordPress – Cara Memasang Google Analytics di Website

October 6, 2021October 11, 2021 by adminin Plugin, WordpressLeave a Comment

Tolak ukur kesuksesan sebuah website salah satunya adalah dari banyaknya jumlah pengunjung (statistik) dan pembaca website kita. Cara memonitor statistik pengunjung website dapat menggunakan tools yang bernama Google Analytics. Kita akan coba memasang tools google analytics pada website. Ada dua pekerjaan yaitu, membuat/mendaftar google analytics di google dan memasang plugin wordpress di website kita.

Mendaftar Google Analytics

Sign in pada https://analytics.google.com/analytics/web/ menggunakan akun gmail kita, kemudian akan muncul tampilan Welcome dari google analytics, klik tombol Start Measuring ( atau Setup For Free)

Akan muncul tampilan Create Account dengan 3 langkah yaitu :

1. Account Setup
2. What do you want to measure?
3. Property setup

Kita akan bahas satu persatu 3 langkah diatas tadi.

Account Setup

Isi Account name dengan title website yang akan kita monitor. Untuk Account Data Sharing Settings, biarkan saja default isiannya, tidak perlu diubah, lalu klik tombol next

What do you want to measure?

Akan muncul pilihan apa yang mau kita ukur, dalam hal ini pilih Web, lalu klik tombol next

Akan muncul Property setup, isi :

- Website Name : nama website kita
- Website URL : url lengkap website kita
- Industry Category : sesuaikan dengan industri website, misal Travel
- Reporting Time Zone : pilih Indonesia

Kemudian klik tombol Create, akan muncul form Google Analytics Terms of Service Agreement. Pilih negara Indonesia, klik 2 checkbox yang tersedia lalu klik tombol I Accept.

Kemudian akan muncul tampilan My email communications, klik tombol Save.

Setelah itu akan muncul tampilan Google Analytic yang menampilkan Tracking Info, berupa Tracking ID, Status dan Website Tracking. Tracking ID dan Tracking Code inilah yang bisa kita pasang pada website yang akan kita monitor traffiknya. Karena website kita menggunakan WordPress, akan lebih mudah mengintegrasikan Google Analytics ini dengan cara menginstall Plugin WordPress. Biarkan saja page google analytics ini terbuka untuk mempermudah proses integrasi dengan plugin wordpress.

Menginstall Plugin Google Analytics

Silahkan masuk ke dashboard wordpress pada website kita dengan melakukan login, kemudian pilih menu Plugins – Add New. Pada isian keyword , ketik google analytics, maka akan muncul banyak pilihan plugin, dalam contoh ini kita pilih plugin : Google Analytics Dashboard Plugin for WordPress by MonsterInsights. Klik tombol Install Now, setelah proses tsb lalu lanjutkan dengan meng-klik tombol Activate,

lalu setelah proses aktivate selesai, akan muncul tampilan plugin dari Monster Insight.

Klik tombol Launch The Wizard lalu akan muncul pilihan Business Website, Publisher (blog) dan Ecommerce, untuk latihan kali ini, kita pilih Business Website, lalu klik tombol Save and Continue.

Kemudian akan tampil info di step ini kita akan meng-koneksikan Google Analytic + WordPress, klik tombol Connect MonsterInsight. Lalu akan muncul proses authentication dan pilih akun gmail yang tadi sudah kita gunakan untuk membuat akun google analitic.

Selanjutnya akan tampil info plugin MonsterInsight akan minta akses ke akun gmail tsb, klik tombol Allow.

Selanjutnya akan tampil pilihan profile dari google analitic yg sudah kita buatkan sebelumnya, pilih pofile tsb dan klik tombol Complete Connection.

Kemudian akan muncul info Finalizing Authentication dan Recommendation Setting, langsung saja scroll ke bawah , klik tombol Save and continue. Lalu akan muncul info Recommended Addon, abaikan saja pilihan upgrade to pro, langsung klik tombol Save and continue. lalu kemungkinan akan muncul tawaran untuk install plugin lain (MonsterInsights Recommends WPForms), abaikan saja dengan memilih link Skip this Step, lalu klik tombol Finish Setup & Exit Wizard.

Selamat ! kita baru saja berhasil mengintegrasikan google analitic di website, tampilan utama dari plugin analitic ini seperti gambar dibawah ini.

Kemudian klik tombol View Reports untuk masuk ke dalam tampilan utama Overview Report. Ada 2 tab yaitu Session dan Page View, karena belum ada traffic yang tercatat, maka tampilannya masih seperti ini, alias kosong 🙂

Kita akan coba ambil contoh reports yang sudah ada trafficnya, ini diambil dari web resmi monsterinsights.com , seperti capture dibawah ini.

Tepat di bawah grafik lalu lintas, kita akan melihat statistik cepat yang terkait dengan perilaku pengunjung situs kita , termasuk jumlah sesi, jumlah tampilan halaman, durasi sesi rata-rata, dan rasio pengunjung yang mental (pergi) dari keseluruhan situs kita .

Kita dapat menggunakan tanggal untuk menampilkan 7 hari terakhir atau 30 hari terakhir, atau beberapa periode waktu default lainnya. Kita juga dapat mengubahnya ke rentang tanggal khusus jika kita perlu melihat data untuk jangka waktu tertentu.

Kita juga akan melihat persentase perubahan dibandingkan dengan periode waktu yang kita pilih untuk laporan ini. Misalnya, jika kita memilih untuk melihat jumlah sesi dan tampilan halaman selama 30 hari terakhir, kita juga akan melihat perbandingan dengan 30 hari sebelumnya.

Cukup banyak fitur google analitic yang tersaji melalui plugin ini. Di kesempatan lain kita akan bahas lebih detail fitur dan report lainnya, yang tentu saja sangat berguna sebagai bahan analisa untuk dijadikan acuan dalam berstrategi menaikkan traffic dan kunjungan ke website kita.

Ok sampai jumpa lagi di artikel yang lainnya teman-teman, semoga bermanfaat !

Cara Install Plugin di WordPress

September 1, 2021September 1, 2021 by adminin Plugin, WordpressLeave a Comment

Setelah menginstall wordpress, maka langkah selanjutnya untuk melengkapi fitur di website kita, dari wordpress menyediakan fitur aplikasi yang bernama plugin. Nah plugin ini memungkinkan kita untuk mengisi website dengan beragam fitur aplikasi seperti header dengan slider, contact form, keranjang belanja, tracking analitic pengunjung dan lain-lain.

Cara install plugin di wordpress sangat mudah, silahkan ikuti step dibawah ini :

Pilih menu Plugin – Add New pada area dashboard wordpress, maka akan muncul tampilan dibawah ini. Lalu ketik mana plugin yang ingin kita install :

Setelah itu akan muncul list plugin yang berhubungan dengan nama plugin yg kita cari. Kita bisa memilih plugin yg sesuai dengan kebutuhan, lalu klik tombol ‘Install Now’. Plugin akan terinstall dan tombol berubah menjadi tombol ‘Activate’.

Kemudian klik tombol ‘Activate’ untuk mengaktifkan plugin tsb. Nah, sampai disini kita sudah berhasil melakukan install plugin di website. Langkah selanjutnya adalah men-setting plugin yg sudah aktif tsb. Settingan tiap plugin berbeda sesuai dengan fungsinya.

Untuk setting plugin akan kami jelaskan pada postingan-postingan berikutnya yg tentunya sesuai dengan fungsi dan kegunaan dari masing-masing plugin tsb. Sampai jumpa di postingan berikutnya.

Elementor Sebagai Plugin Andalan Page Builder

December 22, 2020 by adminin elementor, Plugin, WordpressLeave a Comment

Elementor adalah salah satu plugin WordPress yang berfungsi sebagai page builder. Dengan Elementor, pembuatan sebuah page website menjadi semakin mudah. beberapa fitur dan kelebihan dari Elementor antara lain :

Tidak membutuhkan keahlian coding, ini karena Elementor adalah plugin dari WordPress
Drag and drop, cukup geser dan letakkan elemen atau object yang dibutuhkan untuk membuat page
Fitur lengkap, sudah cukup untuk membuat page standar dengan beragam fitur
Responsive design, tampilan otomatis menyesuaikan viewnya jika diakses dari laptop atau gadget
Integrasi, mudah diintegrasikan dengan addon, template atau plugin wordpress lainnya
Cepat dan mudah, dapat memenuhi ekspektasi dari mockup awal hingga selesai pembuatan

Intinya, jika kita menggunakan Elementor sebagai page builder di wordpress, proses pembuatan sebuah website jadi mudah dan cepat. Yang paling asyik adalah, kita bisa membuat sebuah page atau website, benar-benar dari awal desain, sehingga bisa menyesuaikan dengan mockup design awal yang disepakati, jadi selesainya sebuah page atau website tsb menjadi lebih pasti.

Dan karena Elementor ini adalah bagian plugin dari WordPress, tidak dibutuhkan keahlian coding. Cukup drag & drop, lalu properties dan attribut bisa disesuaikan dengan kebutuhan, mengacu pada mockup design.

Di kesempatan lain, kita akan coba membuat website dengan beragam kategori industri sebagai study case belajar. Sampai jumpa lagi 🙂

4 Fitur Utama CPanel Dalam Mengelola Website

August 25, 2020August 26, 2020 by adminin CPanelLeave a Comment

CPanel adalah alat bantu untuk mengelola setiap elemen akun hosting website Anda. Tampilan dari CPanel seperti gambar dibawah ini

Fungsi dan fitur dan CPanel cukup banyak, namun disini kita akan mempelajari kebutuhan dasar dari sebuah website menggunakan alat bantu yang bernama CPanel antara lain :

Membuat akun email
Meng-install website
Backup website dan database
Cek kapasitas hosting

Sedangkan untuk fungsi dan fitur CPanel lainnya, akan kita pelajari via postingan artikel lain di web ini.

Membuat Akun Email

Setelah kita membayar domain dan hosting, tentu saja kita bisa membuat akun email sesuai dengan nama domain tsb. Misal kita akan membuat akun email : support@bisabikinweb.id

Langkah pertama tentunya login ke CPanel, lalu pilih icon menu Email Account

Kemudian pilih tombol Create, akan muncul tampilan form pembuatan akun email. isikan kolom seperti contoh dibawah ini :

Domain : pilihlah domain yang sesuai dengan nama websitenya
Username : isi dengan nama akun email yang baru, misal support
Security : isi dengan password yang cukup aman
Storage Space : defaut isian (1024 MB) atau bisa diubah sesuai kebutuhan ataupun unlimited
Automatically Create Folders for Plus Addressing : defaut isian

Setelah lengkap, klik tombol Create , maka akan muncul akun email yang baru saja kita buat.

Selanjutnya, untuk mengakses akun email tsb, melakukan pengiriman dan terima email, standardnya bisa melalui webmail yang disediakan oleh provider hostingnya, misal menggunakan URL standar : http://namadomainnya/webmail.

Meng-install Website

Selanjutnya adalah cara meng-install website menggunakan WordPress. Panduan ini sudah ada di artikel utama, silahkan Anda akses halaman berikut ini : Cara Membuat Website

Backup Website dan Database

Salah satu kegiatan maintenance sebuah website adalah dengan melakukan backup website dan database secara berkala. Ini sebagai antisipasi utama manakala ada problem di website yang kita kelola, sehingga untuk me-recovery webiste tsb bisa cepat dan mudah prosesnya.

Pilih menu icon Backup Wizard

Akan muncul tampilan Backup Wizard seperti gambar dibawah ini

Klik tombol Back Up , akan muncul tampilan Select Partial Backup yang berisikan 3 pilihan yaitu Home Directory, MySQL Databases dan Email Forwarders & Filters. Kita akan mencoba menggunakan 2 fitur saja yaitu Home Directory dan MySQL Databases.

klik tombol Home Directory , lalu akan muncul tampilan Final Step, klik kembali tombol Home Directory.

Lakukan hal sama untuk membackup database, dengan klik tombol MySQL Databases. Akan muncul tampilan list database yang ada, jika kita hanya memiliki satu website yang terinstall, maka list database hanya muncul satu saja. Contoh di artikel ini mendownload hanya satu file backup database sesuai dengan penggunaan nama databasenya.

Secara otomatis akan terdownload file backup website dan file backup database ke local komputer kita dalam bentuk file tar.gz dan sql.gz seperti gambar dibawah ini.

Cek Kapasitas Hosting

Standar dari CPanel untuk mengecek kapasitas penggunaan hosting dan batasannya, cara paling mudah bisa dilihat dari tampilan kanan seperti gambar dibawah ini. Terlihat penggukaan disk sudah mencapai 2,4 GB dari kapasitas disk yang unlimited.

Demikian beberapa Fungsi dan fitur dasar dari CPanel yang wajib kita kuasai sebagai pengelola website. Selamat mencoba teman-teman !

WordPress – Cara Redirect Website Menggunakan Plugin

August 20, 2020August 20, 2020 by adminin Plugin, WordpressLeave a Comment

Terkadang kita sudah menyewa domain dan hostingnya, tapi ternyata website kita belum siap, entah itu dari segi desain atau konten. Untuk itu kita akan coba arahkan website yang belum siap tsb ke akun sosial media yang sudah ada, kemungkinan besar ini sudah ada donk ya.

Kita bisa menggunakan plugin wordpress untuk melakukan redirect tsb seperti panduan dibawah ini.

Pilih menu Plugin – Add Plugins , ketik keyword : redirect pada kolom isian kanan, maka akan muncul pilihan plugin, disini kita akan pilih Plugin Redirection sesuai gambar dibawah ini.

Kemudian install Plugin tsb dengan meng-klik tombol Install Now. Setelah berhasil terinstall, aktifkan dengan meng-klik tombol Activate.

Selanjutnya kita akan melakukan setting redirection dengan cara, pilih menu Plugin – Redirection – Settings. Disini akan muncul tampilan Plugin redirection, klik tombol Start Setup – Continue Setup – Finished Setup – Finished.

Kemudian pilih menu Tools – Redirections, maka akan muncul tampilan Redirections. Isi kolom seperti gambar dibawah ini.

Source URL : URL website kita
Query Parameters : default sesuai isian
Target URL : URL sosial media kita
Group : default sesuai isian

Setelah itu, klik tombol Add Redirect, maka list Redirect akan terisi data yang baru saja kita simpan, seperti gambar dibawah ini.

Untuk mencoba URL redirect yang baru saja kita buat, silahkan klik postingan ini : https://bisabikinweb.id/contoh-redirect-halaman.html yang jika kita kunjungi, akan redirect (pindah) ke URL sosial media seperti yang kita setting sebelumnya.

Demikian cara redirect website menggunakan Plugin di WordPress, selamat mencoba teman-teman.