Cara Membuat Formulir di WordPress Tanpa Plugin

Diterbitkan: 2023-07-25

Apakah Anda ingin membuat formulir di WordPress tanpa menggunakan plugin? Formulir adalah beberapa elemen situs web yang paling penting dan digunakan, dan ada beberapa keuntungan membuatnya tanpa menggunakan plugin.

Mengapa Membuat Formulir di WordPress Tanpa Plugin

Ada banyak plugin formulir WordPress yang dapat Anda gunakan untuk membuat formulir. Tetapi membuat formulir di WordPress tanpa menggunakan plugin dapat bermanfaat karena beberapa alasan:

Kesederhanaan dan ringan: Anda menghindari biaya tambahan yang datang dengan menginstal dan memelihara plugin saat Anda membuat formulir tanpa plugin. Bentuk sederhana yang dibuat dengan kode khusus bisa lebih ringan dan efisien daripada yang dibuat menggunakan plugin.
Kustomisasi: Membuat formulir dari awal memberi Anda kendali penuh atas desain dan fungsinya. Anda dapat menyesuaikan formulir agar sesuai dengan kebutuhan spesifik situs web Anda dan menyesuaikannya.
Pengalaman belajar: Membangun formulir tanpa plugin bisa menjadi pengalaman belajar yang hebat bagi pengembang atau pengguna yang tertarik untuk meningkatkan keterampilan pengkodean mereka. Anda bisa memahami mekanisme yang mendasari penanganan formulir dan pemrosesan data.
Mengurangi ketergantungan: Anda mengurangi ketergantungan situs web Anda pada kode eksternal dengan tidak mengandalkan plugin. Ini berguna jika Anda ingin meminimalkan potensi risiko keamanan atau konflik yang timbul dari penggunaan banyak plugin.
Kinerja: Formulir kode khusus dapat memberikan kinerja dan kecepatan yang lebih baik untuk situs web Anda karena ringan dibandingkan dengan plugin. Formulir khusus ini hanya menyertakan fitur yang Anda perlukan dan tidak memiliki fungsi tambahan yang disediakan oleh plugin yang mungkin tidak Anda manfaatkan.
Fleksibilitas: Formulir khusus menawarkan fleksibilitas yang lebih besar untuk diintegrasikan dengan bagian lain dari situs web Anda atau jenis pos khusus. Anda dapat memperluas fungsionalitas formulir berdasarkan kebutuhan unik Anda.
Tentu, sebagian besar plugin menyediakan opsi serupa menggunakan shortcode. Namun dengan formulir berkode khusus, Anda dapat menambahkannya ke lokasi tertentu di situs web tergantung pada bagaimana Anda ingin menampilkannya.

Cara Membuat Formulir di WordPress Tanpa Plugin

Ada banyak jenis formulir yang bisa Anda buat di WordPress tanpa menggunakan plugin. Tetapi formulir kontak adalah salah satu yang paling penting dan populer. Jadi kami akan menunjukkan cara membuat formulir kontak dalam tutorial ini.

Sebelum memulai , kami harap Anda memiliki pemahaman dasar tentang pemrograman karena kami akan menggunakan bahasa scripting dan bahasa markup seperti HTML dan PHP. Jika Anda tidak memiliki pengetahuan yang diperlukan untuk itu, kami sarankan Anda meminta bantuan programmer untuk membantu Anda membuat formulir.

Untuk membuat formulir kontak di WordPress, Anda harus membuat halaman kontak terlebih dahulu. Jadi mari kita mulai dengan itu.

1) Buat Halaman untuk Formulir

Buka Halaman > Tambah Baru dari dasbor WordPress Anda.

Ini akan membuka editor halaman, di mana Anda dapat memasukkan judul halaman dan deskripsi tambahan yang diperlukan selain formulir kontak yang sebenarnya. Tetapi jika formulir adalah satu-satunya hal yang Anda butuhkan di halaman ini, kami dapat melanjutkan dan membuat formulir secara langsung.

2) Tambahkan Kode HTML untuk Formulir di Editor

 Sekarang, buka editor Kode Anda dengan mengklik Opsi (tiga titik vertikal) > Editor kode dari kiri atas layar Anda. Kemudian, tambahkan kode HTML untuk formulir di editor. Anda dapat menambahkan bidang formulir yang diperlukan yang Anda butuhkan berdasarkan kode berikut. 
<form method="post">
  <label for="nama">Nama:</label>
<input type="text" name="name" required="">

<label for="email">Email:</label>
<input type="email" name="email" diperlukan="">

<label for="message">Pesan:</label>
<textarea name="message" required=""></textarea>

<input type="kirim" value="kirim">
</bentuk>

Kode ini akan membantu Anda membuat formulir kontak sederhana di WordPress. Tetapi Anda dapat dengan mudah memodifikasinya untuk membuat formulir yang Anda inginkan di situs web WordPress Anda.

Setelah Anda menambahkan semua bidang formulir yang diperlukan ke kode, klik Terbitkan atau Perbarui untuk menyimpan perubahan di halaman kontak.

kode html membuat formulir di wordpress

Jika Anda mempratinjau halaman, Anda dapat melihat formulir yang baru saja Anda buat. Tetapi untuk membuat formulir berfungsi dan mengekstrak data darinya, Anda juga harus menangani pengiriman formulir. Jadi kita harus membuat database untuk pengiriman formulir setelah ini.

halaman pratinjau formulir membuat formulir di wordpress

3) Buat Tabel Database untuk Pengiriman Formulir

Untuk membuat database untuk pengiriman formulir, Anda dapat menggunakan alat manajemen database seperti phpMyAdmin. Anda dapat mengaksesnya dengan masuk ke cPanel Anda. Jika Anda tidak memiliki kredensial yang diperlukan, sebaiknya hubungi layanan hosting Anda atau pemilik situs.

Sekarang, gulir ke bawah ke bagian Database dan klik phpMyAdmin . Ini akan membuka dasbor phpMyAdmin, tempat Anda dapat melihat semua basis data situs web Anda.

Luaskan tabel database situs web Anda dan gulir ke bagian bawah halaman, tempat Anda dapat membuat tabel database baru. Di sini, masukkan nama tabel sebagai “ wp_contact_form_submission ” dan klik Go untuk membuat tabel baru.

Kemudian, Anda harus memasukkan bidang data untuk bidang formulir di kolom tabel dan tipenya. Menurut formulir yang baru saja kita buat, kita akan menambahkan nama dan tipe kolom berikut:

nama: TEKS
email: TEKS
pesan teks
waktu_penyerahan: DATETIME

Terakhir, klikSimpan untuk menyimpan perubahan di tabel database.

Kami telah menamai tabel database berdasarkan formulir kontak yang kami buat. Jadi, Anda dapat mengubah nama tabel tergantung pada formulir yang awalnya Anda buat. Demikian pula, jika Anda telah menggunakan bidang formulir yang berbeda pada formulir Anda, Anda dapat menambahkan kolom yang sesuai.

4) Tambahkan Kode untuk Menangani Pengiriman Formulir

Setelah Anda membuat database, Anda masih harus menambahkan satu set kode untuk menangani pengiriman formulir di file fungsi tema situs web Anda.

Tetapi kami menyarankan Anda membuat cadangan situs web Anda sebelum melanjutkan karena kami akan mengedit beberapa file inti situs web. Dan setiap perubahan yang tidak diinginkan dapat menyebabkan masalah lebih lanjut di situs web Anda. Anda dapat melihat panduan terperinci kami tentang cara membuat cadangan situs web WordPress jika Anda memerlukan bantuan.

4.1) Akses File Fungsi Tema

Buka Tampilan > Editor File Tema dari dasbor WordPress Anda untuk mengakses file fungsi tema. Anda akan menemukan semua file tema inti situs web Anda di sini. Kemudian pilih file Theme Functions ( functions.php) di sisi kanan layar Anda, tempat kami akan menambahkan kode.

halaman kode pengiriman formulir membuat formulir di wordpress

4.2) Tambahkan Kode ke Editor File Tema

Anda dapat menggunakan yang berikut ini untuk menangani pengiriman formulir di situs web Anda. Jadi tambahkan kode berikut di akhir editor.

 if ($_SERVER["REQUEST_METHOD"] === "POST") {
  $nama = sanitize_text_field($_POST["nama"]);
  $email = sanitize_email($_POST["email"]);
  $pesan = sanitize_textarea_field($_POST["pesan"]);

  // Tambahkan kode untuk menyimpan data formulir ke database
  global $wpdb;
  $nama_tabel = $wpdb->awalan . 'contact_form_submissions';
  $data = larik(
    'nama' => $nama,
    'email' => $email,
    'pesan' => $pesan,
    'submission_time' => current_time('mysql')
  );
  $insert_result = $wpdb->insert($nama_tabel, $data);

  if ($insert_result === false) {
    $respons = larik(
      'sukses' => salah,
      'message' => 'Kesalahan saat menyimpan data formulir.',
    );
  } kalau tidak {
    $respons = larik(
      'sukses' => benar,
      'message' => 'Formulir data berhasil disimpan.'
    );
  }

  // Mengembalikan respons JSON
  header('Tipe-Konten: aplikasi/json');
  echo json_encode($respons);
  KELUAR;
}

Kode ini akan menyimpan data formulir yang dimasukkan dari formulir ke tabel database pengiriman formulir yang baru saja kita buat. Kami juga menyertakan tanggapan JSON untuk memastikan bahwa Anda telah menambahkan nama dan bidang tabel database yang benar pada formulir saat mengedit kode. Anda dapat menghapusnya setelah data formulir berhasil disimpan di database.

Cukup klik Perbarui File setelah Anda membuat semua perubahan yang diperlukan pada kode.

5) Tampilkan Pengiriman Formulir di Dasbor Anda

Setelah data formulir disimpan di database, Anda dapat membuat menu dasbor untuk melihat pengiriman formulir. Jadi kami akan menyertakan kode untuk menampilkannya juga.

Anda dapat menambahkan kode berikut ke file fungsi tema ( funtions.php), seperti pada langkah sebelumnya.

 fungsi display_contact_form_submissions_page() {
  global $wpdb;
  $nama_tabel = $wpdb->awalan . 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE name <> '' AND email <> '' AND message <> '' ORDER BY submission_time DESC", ARRAY_A);

  ?>
  <div class="bungkus">
    <h1>Pengiriman Formulir Kontak</h1>
    <table class="wp-list-table widefat fixed striped">
      <kepala>
        <tr>
          <th>Nama</th>
          <th>Email</th>
          <th>Pesan</th>
          <th>Waktu Pengiriman</th>
        </tr>
      </ kepala>
      <tubuh>
        <?php foreach ($form_data as $data) : ?>
          <tr>
            <td><?php echo esc_html($data['nama']); ?></td>
            <td><?php echo esc_html($data['email']); ?></td>
            <td><?php echo esc_html($data['pesan']); ?></td>
            <td><?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tubuh>
    </tabel>
  </div>
<?php }

fungsi register_contact_form_submissions_page() {
  tambahkan_menu_halaman(
    'Pengiriman Formulir Kontak',
    'Pengiriman Formulir',
    'kelola_opsi',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'dashicons-umpan balik'
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

Sekali lagi, klik Perbarui File setelah Anda menempelkan dan mengedit kode sesuai dengan formulir dan tabel database yang Anda buat.

Sekarang jika Anda pergi ke dasbor WordPress Anda, Anda akan dapat melihat menu " Pengiriman Formulir Kontak ". Ini akan menampilkan semua pengiriman formulir dari formulir yang awalnya Anda buat.

menampilkan halaman pengiriman formulir membuat formulir di wordpress

Opsi Debug untuk Menampilkan Pengiriman Formulir

Jika Anda tidak dapat melihat data formulir, sebaiknya tambahkan kode untuk output debug dan kueri SQL pada kode tersebut. Anda dapat menambahkan kode var_dump($form_data); dan var_dump($wpdb->last_query); masing-masing setelah query.

Jadi kodenya mungkin terlihat seperti ini:

 fungsi display_contact_form_submissions_page() {
  global $wpdb;
  $nama_tabel = $wpdb->awalan . 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submission_time DESC", ARRAY_A);

  var_dump($form_data); // Men-debug keluaran
  var_dump($wpdb->last_query); // Debug kueri SQL

  ?>
  <!-- Sisa kode... -->
  <?php
}

Berdasarkan laporan debug, Anda dapat mengedit kode lebih lanjut untuk memastikan data formulir ditampilkan dengan benar. Tapi Anda juga bisa melalui poin-poin di bagian selanjutnya untuk memastikan tidak ada kesalahan pada kode yang Anda gunakan.

Pertimbangan Penting untuk Membuat Formulir Kustom yang Efisien

Berikut adalah beberapa faktor yang harus Anda pertimbangkan saat mengedit kode untuk membuat formulir kustom Anda . Mereka dapat membantu jika Anda menemukan kesalahan selama proses berlangsung.

Periksa database: Pastikan data formulir disimpan dengan benar di tabel yang benar. Untuk tutorial ini, ini adalah tabel 'wp_contact_form_submissions'.
Periksa kesalahan: Periksa log kesalahan PHP Anda atau aktifkan pelaporan kesalahan untuk melihat apakah ada kesalahan terkait pengiriman formulir atau tampilan data. Kesalahan dapat memberikan petunjuk tentang apa yang mungkin salah.
Periksa proses pengiriman formulir: Pastikan bahwa data formulir dikirimkan dengan benar dan bahwa kode PHP untuk menyimpan data formulir dijalankan tanpa kesalahan. Periksa apakah data formulir diteruskan dengan benar ke kode PHP saat formulir dikirimkan.
Verifikasi nama tabel: Periksa ulang apakah nama tabel yang digunakan dalam fungsi 'display_contact_form_submissions_page()' cocok dengan nama tabel sebenarnya di database. Pastikan 'wp_contact_form_submissions' atau sesuaikan nama tabel dengan tabel database Anda.
Bersihkan Cache: Jika Anda menggunakan plugin caching atau caching sisi server, bersihkan cache untuk memastikan Anda melihat data terbaru.
Izin: Pastikan peran pengguna yang Anda masuki memiliki kemampuan 'manage_options' untuk mengakses halaman admin khusus. Kemampuan ini memungkinkan administrator untuk mengakses halaman secara default.

Kami telah menyebutkan sekumpulan kode bagi Anda untuk membuat formulir kontak di WordPress. Namun Anda harus mengedit kode-kode tersebut jika ingin membuat form lain atau form alternatif dengan field data yang berbeda. Jadi poin-poin di atas juga dapat membantu Anda membuat formulir kustom di WordPress.

Kesimpulan

Ini adalah cara Anda membuat formulir di WordPress tanpa menggunakan plugin. Anda juga dapat membuat formulir menggunakan plugin. Namun, membuat formulir dengan kode khusus memiliki banyak keuntungan jika Anda memiliki pemahaman dasar tentang pemrograman.

Anda dapat dengan mudah membuat formulir dengan kumpulan kode dasar yang telah kami sertakan dalam tutorial ini. Untuk meringkas, berikut adalah langkah-langkah dasar untuk membangun yang efektif:

Tambahkan kode untuk formulir di editor halaman
Membuat database untuk pengiriman formulir
Tambahkan kode yang diperlukan untuk menangani pengiriman formulir dan menampilkannya

Kami harap Anda sekarang dapat dengan percaya diri membuat formulir di situs web Anda menggunakan kode yang disebutkan dalam tutorial ini. Anda dapat mengeditnya untuk menyertakan kolom formulir tambahan, tergantung pada kebutuhan Anda. Jika Anda mengalami masalah, kami bahkan telah menambahkan beberapa opsi dan faktor debug untuk dipertimbangkan saat membuat kode khusus di WordPress.

Jadi, pernahkah Anda mencoba membuat formulir di WordPress tanpa plugin?

Beri tahu kami di komentar di bawah.

Sementara itu, jangan ragu untuk melihat artikel berikut untuk membantu Anda meningkatkan dan menyesuaikan situs web WordPress Anda.

Cara Menyesuaikan Formulir Pendaftaran WooCommerce
Formulir Kontak Divi Tidak Berfungsi? Inilah Cara Memperbaikinya!
Cara Menambahkan Formulir Popup ke WordPress