idwebhost
icon icon icon icon icon icon •

Cara Membuat Formulir Pendaftaran Murid Pakai Meta Box

Cara Membuat Formulir Pendaftaran Murid Pakai Meta Box
Ade Gusti's avatar
Ade Gusti

Waktu membaca menit

Kategori WordPress Expert

Update Terakhir 9 Jun 2025

Jika kamu sedang membangun website sekolah dan ingin menambahkan fitur formulir pendaftaran murid, maka kamu pasti butuh alat yang fleksibel dan powerful. Salah satu solusi terbaik yang bisa kamu gunakan adalah plugin Meta Box WordPress. Lewat artikel ini, kamu akan belajar cara membuat formulir pendaftaran murid yang profesional langsung dari frontend tanpa ribet coding dari nol.

Apa Itu Meta Box?

Meta Box adalah plugin WordPress yang memungkinkan kamu menambahkan custom fields dan custom post types secara mudah dan fleksibel. Fungsinya cocok banget untuk berbagai skenario seperti input data siswa, form pendaftaran event, hingga sistem database ringan di WordPress.

Apa keunggulan Meta Box dibanding plugin formulir lainnya?

Kalau kamu pernah menggunakan Contact Form 7 atau WPForms, mungkin kamu merasa plugin form-form tersebut cocok untuk formulir biasa seperti kontak atau feedback. Tapi kalau kamu butuh input data kompleks yang bisa disimpan sebagai custom post, di sinilah Meta Box unggul.

Berikut ini beberapa keunggulan Meta Box sebagai plugin formulir WordPress:

  • Sangat fleksibel dan modular, karena Meta Box menyediakan lebih dari 40+ jenis field mulai dari teks biasa hingga peta interaktif. 
  • Simpan data custom post type, yang bisa digunakan untuk menyimpan data formulir dan cocok untuk manajemen data. 
  • Integrasi frontend dan backend, menggunakan ekstensi Meta Box Frontend Submission, tanpa harus masuk ke dashboard admin. 
  • Logika kondisional, menampilkan field hanya saat diperlukan, bikin form lebih ringkas dan interaktif.
  • Tampilan kustom dan profesional, dengan MB Views, kamu bisa desain tampilan form sesuai branding sekolah atau institusi.

Kapan Sebaiknya Gunakan Meta Box?

Meta Box bisa kamu gunakan saat beberapa kondisi berikut ini:

  • Kamu butuh menyimpan data siswa sebagai post terpisah.
  • Kamu ingin menampilkan form langsung di frontend tanpa akses dashboard.
  • Kamu memerlukan field yang kompleks, seperti upload foto, select dengan kondisi, atau input via peta (maps).

Dalam praktiknya, plugin Meta Box bisa kamu gunakan untuk membuat formulir pendaftaran murid di website sekolah atau di sistem penerimaan murid baru (SPMB).

Baca Juga: 5 Plugin Terbaik untuk Mengganti URL Login WordPress

Cara Membuat Formulir Pendaftaran Murid Pakai Plugin Meta Box

Plugin yang Diperlukan

Sebelum mulai membuat formulir pendaftaran murid di website sekolah, kamu perlu instal beberapa plugin WordPress yang mendukung, seperti:

  • Meta Box (versi gratis dari WordPress.org).
  • Meta Box Builder (opsional) – bantu membuat field dengan visual editor.
  • Meta Box Frontend Submission (berbayar) – untuk tampilkan form di halaman depan.
  • Elementor atau Gutenberg (opsional) – untuk menempatkan form.

Kalau kamu serius ingin membuat formulir kompleks, disarankan pakai Meta Box AIO (All-In-One), karena sudah termasuk berbagai ekstensi penting seperti:

  • MB Custom Post Types & Taxonomies
  • MB Views
  • MB Frontend Submission
  • MB Geolocation
  • MB Conditional Logic
  • MB Builder, Group & Columns

Persiapan: Apa yang Perlu Disiapkan?

Nah, setelah kamu menginstal plugin Meta Box yang sesuai, saatnya memulai persiapan membuat formulir pendaftaran. Pastikan kamu tahu informasi apa saja yang ingin dikumpulkan. Biasanya formulir pendaftaran murid mencakup:

  • Data pribadi (nama, alamat, foto)
  • Kontak darurat
  • Program studi yang dipilih
  • Informasi kesehatan
  • Alamat via peta

Karena jumlah field cukup banyak dan jenisnya beragam, Meta Box sangat ideal dipakai di sini.

Cara Membuat Formulir Pendaftaran Murid (Step-by-Step)

Berikut ini panduan cara membuat formulir pendaftaran murid yang akan dijelaskan langkah demi langkah:

Tahap 1: Buat Custom Post Type “Student Info”

Membuat Custom Post Type (CPT) sangat penting. Tujuannya agar setiap pendaftaran murid tersimpan sebagai satu entri post dan tidak jadi “tumpukan” biasa, tapi terorganisir seperti sebuah postingan yang mudah dikelola. 

langkah-langkahnya:

  • Masuk ke Meta Box > Post Types > Add New
  • Buat post type bernama student_info atau atau “Data Murid” yang sesuai kebutuhanmu. Nama ini akan jadi “wadah” penyimpanan semua data pendaftaran murid”.
  • Lengkapi deskripsi dan pengaturan lain, lalu klik Simpan.

Tahap 2: Tambahkan Custom Fields

Tahap berikutnya adalah membuat field atau kolom input data yang akan diisi oleh murid saat mendaftar. Langkahnya:

  • Masuk ke Meta Box > Custom Fields > Add New.
  • Buat grup field dengan nama misalnya “Formulir Pendaftaran Murid”.
  • Tambahkan field satu per satu, contohnya:
Nama FieldTipe FieldFungsi
Personal InfoHeadingMenyusun bagian form
NationalitySelect AdvancedPilihan kewarganegaraan
PhotoImage UploadUpload foto langsung dari komputer
MapsOpen Street MapsInput alamat via peta
Program TypeRadioJenis program studi
Undergraduate MajorsCheckboxJurusan yang dipilih

Tips agar form rapi dan mudah dibaca:

  • Gunakan MB Group & Columns untuk mengatur layout kolom agar form lebih rapi.
  • Kolom dalam Meta Box terbagi menjadi 12 grid.
  • Kamu bisa atur setiap field pakai Column size, misal: 6 + 6 atau 4 + 8 agar sejajar.

Tahap 3: Setting Field Spesial

Ada beberapa field yang butuh pengaturan ekstra agar form pendaftaran terlihat profesional dan fungsional.

1. Maps dan Geolocation

Agar alamat otomatis muncul di form, kamu perlu:

  • Atur ID field Address sebagai referensi di field Maps.
  • Di Custom Settings, tambahkan geo = true.
  • Gunakan ekstensi MB Geolocation agar field seperti negara dan kode pos otomatis terisi.

2. Conditional Logic

Contoh: Jika siswa memilih “Postgraduate Program”, maka field jurusan S2 baru ditampilkan.

  • Pakai ekstensi MB Conditional Logic
  • Tambahkan rules di tab Advanced setiap field jurusan berdasarkan pilihan sebelumnya

Tahap 4: Tampilkan Form di Frontend

Setelah form selesai dibuat, sekarang saatnya kamu menampilkan formulir pendaftaran itu agar murid bisa mengisinya langsung lewat website sekolah.

  • Buat halaman baru di WordPress, misalnya “Formulir Pendaftaran”.
  • Aktifkan MB Frontend Submission (ini berbayar tapi sangat membantu form bisa tampil di frontend dan data tersimpan). 
  • Dari Meta Box, ambil shortcode formulir kamu, misalnya:
[mb_frontend_form id='university-admission-form']
  • Tempel di halaman, atau tampilkan via MB Views agar lebih fleksibel. Tambahkan logo sekolah dan desain sesuai branding sekolah
    Contoh kode sederhana di MB Views:
<div class="form-header">
    <img src="https://domain.com/logo.png" style="width: 20%">
    <div style="text-align: right">
        <h1>Formulir Pendaftaran Siswa</h1>
    </div>
</div>
[mb_frontend_form id='university-admission-form']

Tahap 5: Styling Form

Form yang rapi dan menarik tentu akan membuat murid nyaman mengisinya. Jangan sampai form terlalu polos atau berantakan.

Langkah styling:

  • Sembunyikan header/footer default website supaya form jadi fokus utama.
  • Gunakan CSS di MB Views > Tab CSS, untuk menyesuaikan warna tombol, ukuran input, dan jarak antar field agar form lebih user-friendly:
body { background: #f8f8f8; }
.header, .footer { display: none; }
.form-header { display: flex; justify-content: space-between; }
  • Pastikan form responsif, sehingga tampilan tetap bagus saat diakses lewat HP.
Cara Membuat Formulir Pendaftaran Murid Pakai Meta Box

Tahap 6: Tambahkan Halaman Review Form

Agar murid bisa mengecek ulang data yang sudah mereka masukkan, dan sekaligus mencetak formulir pendaftaran, kamu perlu membuat halaman review khusus.

  • Tambahkan kode redirect di functions.php:
add_filter( 'rwmb_frontend_redirect', function( $redirect, $config ) {
    if ( 'university-admission-form' !== $config['id'] ) return $redirect;
    return 'https://domain.com/review/?student_id=' . $config['post_id'];
}, 10, 2 );
  • Buat halaman baru: “Review Formulir”
  • Buat View baru untuk tampilkan form berdasarkan student_id yang diteruskan:
{% set pupil_id = mb.estar_get_method_function('student_id') %}
{% if pupil_id %}
    [mb_frontend_form id='university-admission-form' post_id="{{pupil_id}}"]
    <div class="form-footer">
        <button onclick="window.print()">Cetak</button>
    </div>
{% endif %}
  • Jangan lupa sembunyikan tombol submit agar siswa tidak bisa mengubah lagi:
.rwmb-form-submit { display: none; }

Dengan halaman review ini, murid bisa memastikan data mereka sudah benar, sekaligus mencetak formulir jika diperlukan.

Baca Juga: Desain Website Sekolah Keren: 7 Elemen Wajib yang Harus Ada!

Kesimpulan

Dengan mengikuti panduan ini, kamu sudah bisa menguasai cara membuat formulir pendaftaran murid yang canggih dan elegan menggunakan plugin Meta Box WordPress. Fitur-fitur seperti conditional logic, geolocation, dan tampilan frontend yang bisa disesuaikan memberikan pengalaman pengguna yang lebih baik dan profesional.

Kalau kamu berencana membangun website sekolah yang stabil, cepat, dan user-friendly, jangan lupa bahwa performa hosting juga sangat berpengaruh. 

IDwebhost punya pilihan VPS Murah yang cocok untuk kebutuhan sekolah, mulai dari paket pemula hingga resource besar. Yuk, mulai wujudkan website sekolah impianmu hari ini bersama IDwebhost!

Beli VPS Murah Sekarang!

Related Articles