CARA MENAMBAHKAN FIELD TAMBAHAN DI FORMULIR DAN SURVEI MENGGUNAKAN CUSTOM HTML/JAVASCRIPT

Cara Menambahkan Field Tambahan di Formulir dan Survei SunnyDay Menggunakan Custom HTML/JavaScript

Jika kamu memerlukan field tambahan di luar elemen standar yang tersedia di builder formulir atau survei SunnyDay, kamu bisa menambahkannya secara manual menggunakan Custom HTML dan JavaScript.

Kapan Kamu Perlu Menggunakan Ini?

Gunakan pendekatan ini jika:

• Kamu ingin menambahkan field yang belum tersedia di Form Builder.

• Perlu menyisipkan elemen interaktif atau custom.

• Butuh kontrol penuh terhadap tampilan dan fungsi field baru.

Langkah-Langkah untuk Menerapkan Solusi

1. Buat Custom Field di Builder:

• Pastikan kamu membuat custom field dengan nama yang relevan, yang akan berfungsi sebagai penampung data dari "My Own Field."

2. Dapatkan ID dari Custom Field:

• Buka tampilan Preview dari formulir yang telah kamu buat.

• Klik kanan di halaman, lalu pilih ‘Inspect’ (atau ‘Periksa’ jika menggunakan browser berbahasa Indonesia).

• Pilih alat pointer mouse (biasanya ikon panah di kiri atas panel Inspect).

• Klik pada Custom Field yang kamu tambahkan.

• Salin ID dari properti name dan id.

Contoh:

Jika kamu membuat custom field dengan nama xxTrustedFormCertUrl, ikuti langkah-langkah di atas untuk mendapatkan ID-nya.avaScript seperti ini:

3. Tandai Custom Field sebagai Tersembunyi (Hidden):

Ada dua cara untuk menyembunyikan custom field pada tampilan preview:

1.Fitur Hidden Bawaan (Native Hidden Feature)

• Di dalam builder, kamu bisa menandai custom field sebagai hidden, sehingga field tersebut tidak akan muncul di tampilan preview.

• Namun, My Own Field (field asli) tetap akan terlihat oleh pengguna.

2.Custom CSS (Untuk Menyembunyikan Secara Manual)

Gunakan kode CSS berikut:

.menu-field-wrap:nth-child(x) {

display: none;

}

x di sini adalah urutan elemen dalam daftar field.

• Contoh: Jika customField adalah field ke-4 di daftar, maka nilai x = 4.

Catatan:

• Untuk Survey, wajib menggunakan metode Custom CSS Hidden.

• Untuk Form, keduanya (fitur hidden bawaan dan CSS) bisa digunakan.

4. Transfer Data Menggunakan JavaScript

Tambahkan kode JavaScript berikut untuk memindahkan data dari "My Own Field" ke custom field tersembunyi yang telah kamu buat:

document.querySelector("form").addEventListener("submit", function() {

let myOwnField = document.querySelector("[name='my_own_field_name']");

let hiddenField = document.querySelector("[name='custom_field_name']");

if (myOwnField && hiddenField) {

hiddenField.value = myOwnField.value;

}

});

Gantilah 'my_own_field_name' dan 'custom_field_name' sesuai dengan name attribute field yang kamu gunakan di form kamu.

Tips

• Kamu bisa menggunakan JavaScript untuk manipulasi field secara dinamis.

• Pastikan ID dan Name field tidak bentrok dengan field standar lainnya.

• Gunakan validasi jika diperlukan (misal dengan required, pattern, dsb).

Keterbatasan

• Jika kamu menyisipkan JavaScript eksternal (misalnya lewat CDN), pastikan kode tersebut aman dan tidak menimbulkan konflik dengan skrip default SunnyDay.

• Tidak semua elemen HTML akan didukung dalam builder, jadi lakukan testing terlebih dahulu.