Cara Membuat Formulir Kustom di Situs Web atau Blog WordPress

Jika Anda baru saja membuat blog pertama Anda, maka sekarang, Anda akan tahu bahwa itu datang dengan formulir kontak default - sebagian besar tema premium datang dengan satu. Intinya adalah bahwa formulir kontak sangat penting ketika menyangkut audiens Anda yang ingin melakukan kontak dengan Anda karena satu dan lain alasan.

Terlebih lagi, dengan formulir kontak, keterlibatan pengguna Anda harus meningkat, itulah sebabnya penting bagi Anda untuk menggunakannya di blog Anda. Tetapi sekali lagi, Anda juga dapat menggunakan plugin formulir seperti formulir Kontak 7, formulir kontak cepat aman antara lain untuk membuat pengguna Anda menghubungi Anda.

Dan terlebih lagi, formulir kontak ini akan memungkinkan Anda untuk terhubung dengan audiens Anda secara langsung dan memungkinkan Anda untuk merampingkan pemasaran Anda juga.

Video tutorial

Masalahnya adalah bahwa sebagian besar formulir kontak default dan bahkan plugin datang dengan format stereotip yang sama, itulah sebabnya Anda mungkin ingin memilih sesuatu yang lebih khusus di sepanjang garis pengaturan formulir kontak Anda sendiri di WordPress.

Jika Anda cukup ahli dalam php, maka Anda harus dapat melakukannya dengan mudah, itulah sebabnya penting bagi Anda untuk membaca sisa artikel sehingga Anda dapat mengatur formulir kustom Anda sendiri untuk digunakan pengguna Anda, untuk terhubung dengan Anda.

1. Desain formulir:

Anda dapat membuat templat halaman terpisah atau menulis beberapa kode HTML di halaman WordPress Anda untuk ini, dan karena nanti jauh lebih sederhana, lebih masuk akal untuk memilih yang sama.

Anda dapat membuat formulir kustom di WordPress dengan mengikuti langkah-langkah yang tercantum di bawah ini. Dan seperti biasa, ingatlah untuk mencadangkan informasi Anda sebelum Anda mulai.

• Buka Halaman -> Tambahkan opsi Baru yang diberikan di bawah dasbor WordPress Anda.
• Beri judul halaman yang Anda inginkan, seperti 'Informasi pelanggan' atau 'detail pelanggan'.
• Sekarang navigasikan ke tab 'HTML' untuk menulis kode HTML.
• buat formulir khusus di WordPress yang Anda inginkan.
• Tambahkan metode “POST”, beri nama “customer_details”
• Tambahkan fungsi "form_validation" di properti onsubmit untuk menambahkan beberapa validasi JavaScript nanti dan berikan tindakan.
• Action adalah file PHP yang akan dieksekusi ketika form akan dikirimkan.
• Pada titik ini, Anda mungkin ingin menambahkan beberapa bidang dalam formulir seperti nama, email, jenis kelamin, usia dll dan tutup formulir.

Kode terakhir akan terlihat seperti ini

Nama Anda: <br />
Email Anda: <br />
Jenis Kelamin: Pria Wanita<br />
Usia Anda: <br />

2. Validasi:

Sekarang setelah Anda mendesain formulir, sekarang saatnya untuk memvalidasi hal yang sama. Jangan pernah mempercayai data pengguna 'apa adanya' dan selalu, selalu validasi sebelum Anda memasukkan data yang sama ke dalam database Anda.

Cukup ikuti kode yang tercantum di bawah ini untuk beberapa validasi cepat dan itu akan berhasil. Tuliskan kode validasi ini dan tutup di akhir.

fungsi form_validasi() {
/* Periksa Nama Pelanggan untuk pengiriman kosong*/
var nama_pelanggan = document.forms[“detail_pelanggan”][“nama_pelanggan”].nilai;
if (nama_pelanggan == “” || nama_pelanggan == null) {
alert(“Nama kolom harus diisi.”);
kembali salah;
}/* Periksa Email Pelanggan untuk format yang tidak valid */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“Alamat email yang diberikan tidak valid.”);
kembali salah;
}
}

Ini akan memeriksa dan memvalidasi nama pelanggan dan alamat email. Tambahkan kode ini setelah . Jadi, kode lengkap di WordPress akan terlihat seperti-

Nama Anda: <br />
Email Anda: <br />
Jenis Kelamin: Pria Wanita<br />
Usia Anda: <br />


fungsi form_validasi() {
/* Periksa Nama Pelanggan untuk pengiriman kosong*/
var nama_pelanggan = document.forms[“detail_pelanggan”][“nama_pelanggan”].nilai;
if (nama_pelanggan == “” || nama_pelanggan == null) {
alert(“Nama kolom harus diisi.”);
kembali salah;
}
/* Periksa Email Pelanggan untuk format yang tidak valid */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position&lt;1 || dot_position=customer_email.length) {
alert(“Alamat email yang diberikan tidak valid.”);
kembali salah;
}
}

Sekarang, yang tersisa untuk Anda lakukan adalah memublikasikan halaman dan itu akan berhasil.

3. Skrip sisi server:

Ingat bagian di mana kami telah menyebutkan "detail pelanggan.php"? Nah, sudah saatnya kita memperhatikan bagian itu juga.
Buka Notepad atau editor teks favorit Anda dan tuliskan kode yang dijelaskan di bawah ini dan simpan file sebagai customer-details.php di desktop Anda.

Pertama, deklarasikan beberapa variabel bernama $customer_name, $customer_email, $customer_sex, $customer_age dan tetapkan nilainya ke masing-masing bidang yang dikirimkan oleh formulir HTML.

Misalnya $customer_name = $_POST[“customer_name”] akan menangkap nilai dari formulir HTML dengan metode POST dan menetapkannya ke variabel $customer_name.

Sekarang, Anda perlu melakukan hal yang sama dengan nilai lain juga. Sekarang Anda perlu menghubungkan file PHP dengan database menggunakan mysqli_connect. Jika Anda tidak ingat konfigurasi database, Anda dapat menemukan pengaturan ini dari instalasi WordPress Anda.

Unduh wp-config.php dari instalasi WordPress Anda ke desktop menggunakan klien FTP favorit Anda seperti FileZilla. Buka wp-config.php menggunakan editor teks favorit Anda seperti Notepad dan Anda akan menemukan pengaturan database yang diperlukan.

Setelah koneksi database, masukkan data yang dikumpulkan dari formulir ke database WordPress menggunakan mysqli_query.

Ada langkah opsional dalam kode PHP ini.

Jika Anda ingin menampilkan beberapa pesan kepada pengguna setelah pengiriman formulir atau ingin mengarahkan pengguna ke halaman lain, Anda dapat menambahkan header (“Location:”) ke kode. Anda harus membuat halaman sukses untuk ini nanti.

Jadi, detail pelanggan lengkap.php akan terlihat seperti

// Dapatkan data
$nama_pelanggan = $_POST[“nama_pelanggan”];
$pelanggan_email = $_POST[“email_pelanggan”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// Koneksi database
$conn = mysqli_connect(“Database Host”,”Nama Pengguna Database”,”Kata Sandi Database”,”Nama Database”);
jika(!$sambungan) {
die('Masalah dalam koneksi database: ' .mysql_error());
}
// Penyisipan data ke database
$query = “INSERT INTO 'Database Name'.'Table Name' ( 'customer_name', 'customer_email', 'customer_sex', 'customer_age' ) VALUES ( $customer_name, $customer_email, $customer_sex, $customer_age )”;
mysqli_query($sambungan, $permintaan);

// Pengalihan ke halaman sukses
header(“Lokasi : “);

Unggah file customer-details.php ini ke folder tema menggunakan klien FTP favorit Anda.

4. Sukses:

Halaman sukses adalah halaman yang dapat dilihat pengguna setelah mengirimkan formulir dengan detailnya; Anda dapat mengatur halaman ini untuk menampilkan pesan khusus seperti "rincian Anda telah berhasil dikirim" atau yang serupa.

Intinya adalah Anda dapat menggunakan kode yang diposting di bawah ini untuk mengatur halaman sukses Anda sendiri lengkap dengan pesan khusus.

Buat halaman WordPress, beri judul seperti "Halaman Sukses", pastikan untuk mencocokkan slug halaman dengan 'halaman sukses' atau apa pun yang Anda berikan di header ("Lokasi"). Sekarang tulis pesan, seperti "terima kasih atas kerja sama Anda" atau sesuatu seperti itu dan Anda harus siap.

Anda selalu dapat memuat ulang situs Anda untuk memeriksa dan melihat apakah formulir kontak berfungsi sebagaimana mestinya dan di hampir semua kasus, itu akan berfungsi dengan baik. Namun, jika Anda mengalami beberapa masalah, Anda selalu dapat memeriksanya secara online atau meminta ahli untuk menyiapkan formulir kustom Anda.

Penting bahwa formulir kontak Anda tidak tampak terlalu agresif atau mengganggu dalam hal ini, sehingga dapat membantu meningkatkan tingkat konversi tersebut.

Terlebih lagi, Anda juga dapat menggunakan formulir khusus ini untuk mengumpulkan data dan informasi tentang pelanggan Anda yang selanjutnya dapat Anda gunakan untuk merampingkan kampanye pemasaran Anda.

Ini adalah salah satu alasan utama mengapa formulir, terutama formulir kontak sangat penting untuk semua blog dan yang lebih penting, Anda dapat menggunakan pengkodean yang tercantum di sini tidak hanya untuk membuat formulir khusus di WordPress, tetapi pada kenyataannya, membuat segala jenis formulir kontak dengan parameter yang berbeda.

Seperti yang disarankan sebelumnya, selalu merupakan ide bagus untuk melakukan pencadangan lengkap sebelum Anda mengotak-atik file inti Anda.

Setelah formulir aktif dan berjalan, Anda harus dapat memeriksa apakah formulir tersebut memvalidasi data seperti yang diprogram untuk melakukannya sebelum memasukkannya ke dalam database Anda.

Secara keseluruhan, formulir kontak sangat penting untuk blog dan situs web, karena membantu pelanggan menjangkau Anda dan dapat menghasilkan tingkat konversi yang lebih baik dalam jangka panjang. Jadi, pastikan Anda mencoba langkah-langkah yang tercantum di atas dan formulir kontak khusus Anda akan berfungsi dengan baik.