Nomor Hanya Terlihat di Editor tetapi Tidak Muncul pada Formulir yang Diterbitkan

nomor hanya terlihat di editor, pada formulir yang diterbitkan tidak muncul

Hi Memil,

Terima kasih telah menghubungi Dukungan Jotform. Saya cek kode CSS formulir Anda, tidak ada konflik langsung dalam artian dua aturan memperebutkan pemilih yang sama, tetapi ada dua hal dalam CSS Anda yang kemungkinan menghalangi penomoran Anda ditampilkan pada formulir langsung.  Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* Sembunyikan ikon panah collapse */

.form-collapse-table:after {

  display: none !important;

  content: none !important;

  -webkit-mask-image: none !important;

  mask-image: none !important;

  background: none !important;

  width: 0 !important;

  height: 0 !important;

}

/* berakhir di sini */



/* Nonaktifkan interaksi hanya pada judul collapse, 

   bukan seluruh konten di dalamnya */

li.form-input-wide[data-type="control_collapse"] > .form-collapse-table {

  pointer-events: none !important;

  cursor: default !important;

}

/* berakhir di sini */



/* Hide the original radio input completely */

.form-radio {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



/* Style the label like a button */

.form-radio-item label {

  display: inline-block;

  padding: 10px 20px;

  margin: 5px;

  border: 2px solid #007bff;

  border-radius: 8px;

  background: #fff;

  color: #007bff;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s ease;

}





/* Hover effect */

.form-radio-item label:hover {

  background: #007bff;

  color: #fff;

}



/* Selected (when radio is checked) */

.form-radio:checked + label {

  background: #007bff;

  color: #fff;

  border-color: #0056b3;

  box-shadow: 0 0 6px rgba(0, 123, 255, 0.6);

}





/* Hilangkan lingkaran tombol radio bawaan */

.form-radio+label:before,

.form-radio+span:before {

  content: none !important;

  display: none !important;

}

/* berakhir di sini */





/* Beri jarak antar tombol */

#id_5 span {

  display: inline-block;  

  width: calc(25% - 4px); /* biar 4 tombol muat dalam 1 baris */

  margin-left: 4px;

  box-sizing: border-box;

}



/* Tombol Back & Next hanya teks */

.form-pagebreak-back,

.form-pagebreak-next {

  background: transparent !important;

  border: none !important;           

  color: #333 !important;

  font-weight: normal !important;

  padding: 0 !important;

  box-shadow: none !important;

  cursor: pointer;

  text-decoration: none !important;

}





/* Saat hover, tampilkan underline */

.form-pagebreak-back:hover,

.form-pagebreak-next:hover {

  text-decoration: underline !important;

  color: #000 !important;

}



/* Reset counter di setiap section */

.form-section {

  counter-reset: qnum;

}



/* Tambahkan nomor sebelum label pertanyaan */

.form-label.form-label-top::before {

  counter-increment: qnum;

  content: counter(qnum) ". ";

  font-weight: bold;

  margin-right: 4px;

}

2. Di Pembangun Formulir, klik ikon Rol Cat di sisi kanan halaman untuk membuka Perancang Formulir.

3. Sekarang, di menu Perancang Formulir, klik tab Gaya, gulir ke bawah, lalu tempelkan kode ke dalam kotak Suntik Kode CSS. Selesai. Kode akan tersimpan secara otomatis.

Lihat screencast saya di bawah ini untuk melihat hasilnya:

Beri tahu kami jika anda memerlukan bantuan lebih lanjut.