Membuat Formulir Online Di WordPress

Membuat Formulir Online Di WordPress. Dalam kesempatan kali ini kami akan berbagi secuil informasi yang semoga bisa bermanfaat bagi semua. Kami akan berbagi cara membuat formulir online di wordpress.

Formulir online ini bisa berupa PPDB online, formulir konfirmasi pembayaran, form online pendaftaran suatu organisasi, kontak form dll. Dengan formulir online ini akan bermanfaat untuk menghemat biaya transport karena tinggal duduk di depan komputer atau smartphone yang terkoneksi internet maka langsung bisa menggunakannnya. Tanpa perlu mendatangi sekolah, organisasi atau tempat yang dituju.

Untuk membuat formulir online ini kami menggunakan plugin contact form 7 yang sudah diintal oleh lebih dari 5 juta pengguna. untuk mendapatkannya bisa melalui panel admin >> plugin >> add new >> contact form 7. Atau mendownload di https://id.wordpress.org/plugins/contact-form-7/.

Membuat Formulir PPDB Online

Formulir kali ini kami akan memberi contoh berupa formulir PPDB Online untuk sebuag pendaftaran murid baru di suatu sekolah. Isi di form hanya berupa contoh nanti bisa ditambahkan ataupun dikurangi. Didalamnya tidak hanya mengisi data namun juga bisa mengupload sebuah file semisal upload ijazah, dll.

Pertama setelah masuk di “Add New Contact Form” buatlah form semisal dibawah ini

Di bagian form seperti dibawah ini

Isinya bisa seperti ini

<div class="form-pendaftaran">
    <div class="data-siswa">
        <table class="table">
            <tbody>
                <tr>
                    <td class="py-1 data-judul">Nama Lengkap</td>
                    <td class="py-1 data-input">[text* namacalonsiswa]</td>
                </tr>
                <tr>
                    <td class="py-1 data-judul">NISN</td>
                    <td class="py-1 data-input">[text* NISN]</td>
                </tr>
                <tr>
                    <td class="py-1 data-judul">Jenis Kelamin</td>
                    <td class="py-1 data-input">[select* JenisKelamin "Laki-laki" "Perempuan"]</td>
                </tr>
                <tr>
                    <td class="py-1 data-judul">TGl. Lahir*</td>
                    <td class="py-1 data-input">[date* ttl]</td>
                </tr>
                 <tr>
                    <td class="py-1 data-judul">Asal Sekolah*</td>
                    <td class="py-1 data-judul">[text* AsalSekolah]</td>
                </tr>

                <tr>
                    <td class="py-1 data-judul">Lulus Tahun*</td>
                    <td class="py-1 data-input">[text* lulus]</td>
                </tr>
                <tr>
                    <td class="py-1 data-judul">No. HP Aktif*</td>
                    <td class="py-1 data-input">[text* hp]</td>
                </tr>
                <tr>
                    <td class="py-1 data-judul">Upload Ijazah</td>
                    <td class="py-1 data-input">[file ijazah]</td>
                </tr>
    </tbody>
</table>
</div>
</div>
[submit class:button-form class:mt-3 "Daftar"]

dan hasilnya kurang lebih akan seperti ini

Kedua, dibagian mail

dibagian message body bisa diisi dengan isian seperti ini

<table>
    <tbody>
        <tr>
            <td style="padding: 5px;">Nama Lengkap</td>
            <td style="padding: 5px;">: [namacalonsiswa]</td>
        </tr>
        <tr>
            <td style="padding: 5px;">NISN</td>
            <td style="padding: 5px;">:[NISN]</td>
        </tr>
        <tr>
            <td style="padding: 5px;">Jenis Kelamin</td>
            <td style="padding: 5px;">: [JenisKelamin]</td>
        </tr>
        <tr>
            <td style="padding: 5px;">TGl. Lahir</td>
            <td style="padding: 5px;">: [ttl]</td>
        </tr>
        <tr>
            <td style="padding: 5px;">Asal Sekolah</td>
            <td style="padding: 5px;">: [AsalSekolah]</td>
        </tr>

        <tr>
            <td style="padding: 5px;">Lulus Tahun</td>
            <td style="padding: 5px;">: [lulus]</td>
        </tr>
        <tr>
            <td style="padding: 5px;">No. HP Aktif</td>
            <td style="padding: 5px;">: [hp]</td>
        </tr>
        <tr>
            <td style="padding: 5px;">Ijazah</td>
            <td style="padding: 5px;">: Di Lampiran</td>
        </tr>
</tbody>
</table>

-- 
This e-mail was sent from a contact form on Sharing Teknologi (https://teknologi.visitklaten.com)

Terakhir, setelah form diisi maka di email akan seperti ini

Jika ada yang perlu ditanyakan terkait artikel ini bisa menghubungi kami lewat kolom komentar dibawah ini. Atau jika mengalami kendala dalam membuat form maka jangan sungkan-sungkan atau malu untuk menghubungi lewat kolom komentar juga. Akan kami bantu sebisa yang kami mampu.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.